[ML] Replace View Forecast button image with Single Metric icon (#34563)
* [ML] Replace View Forecast button image with Single Metric icon * [ML] Remove table scss overrides and use icon in Explorer view
This commit is contained in:
Pete Harverson
GitHub
parent
b3f7435ad2
commit
bbfe50f39b
|
|
@ -399,7 +399,7 @@ export const LinksMenu = injectI18n(class LinksMenu extends Component {
|
|||
items.push(
|
||||
<EuiContextMenuItem
|
||||
key="view_series"
|
||||
icon="popout"
|
||||
icon="stats"
|
||||
onClick={() => { this.closePopover(); this.viewSeries(); }}
|
||||
>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ function ExplorerChartContainer({
|
|||
>
|
||||
<EuiButtonEmpty
|
||||
iconSide="right"
|
||||
iconType="popout"
|
||||
iconType="stats"
|
||||
size="xs"
|
||||
onClick={() => window.open(getExploreSeriesLink(series), '_blank')}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
@import 'job_details';
|
||||
@import 'forecasts_table/index';
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
// SASSTODO: This has dangerous EUI overrides and should be removed. Some of it should just use the JS props
|
||||
.forecasts-table {
|
||||
.euiTable {
|
||||
font-size: 12px;
|
||||
|
||||
th:last-child {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
td {
|
||||
.euiTableCellContent {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-forecast-btn {
|
||||
width: 35px;
|
||||
min-width: 35px;
|
||||
height: 24px;
|
||||
|
||||
.euiButton__content {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.euiLink {
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'forcasts_table';
|
||||
|
|
@ -14,7 +14,7 @@ import React, {
|
|||
} from 'react';
|
||||
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonIcon,
|
||||
EuiCallOut,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
|
|
@ -282,21 +282,29 @@ class ForecastsTableUI extends Component {
|
|||
id: 'xpack.ml.jobsList.jobDetails.forecastsTable.viewLabel',
|
||||
defaultMessage: 'View'
|
||||
}),
|
||||
render: (forecast) => (
|
||||
<EuiButton
|
||||
onClick={() => this.openSingleMetricView(forecast)}
|
||||
className="view-forecast-btn"
|
||||
isDisabled={forecast.forecast_status !== FORECAST_REQUEST_STATE.FINISHED}
|
||||
>
|
||||
<i aria-hidden="true" className="fa fa-line-chart"/>
|
||||
</EuiButton>
|
||||
)
|
||||
width: '60px',
|
||||
render: (forecast) => {
|
||||
const viewForecastAriaLabel = intl.formatMessage({
|
||||
id: 'xpack.ml.jobsList.jobDetails.forecastsTable.viewAriaLabel',
|
||||
defaultMessage: 'View forecast created at {createdDate}' }, {
|
||||
createdDate: formatDate(forecast.forecast_create_timestamp, TIME_FORMAT)
|
||||
});
|
||||
|
||||
return (
|
||||
<EuiButtonIcon
|
||||
onClick={() => this.openSingleMetricView(forecast)}
|
||||
isDisabled={forecast.forecast_status !== FORECAST_REQUEST_STATE.FINISHED}
|
||||
iconType="stats"
|
||||
aria-label={viewForecastAriaLabel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<EuiInMemoryTable
|
||||
className="forecasts-table"
|
||||
compressed={true}
|
||||
items={forecasts}
|
||||
columns={columns}
|
||||
pagination={{
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import 'components/forecasting_modal/index';
|
||||
@import 'timeseriesexplorer';
|
||||
@import 'timeseriesexplorer_annotations';
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.forecast-modal {
|
||||
max-width: 860px;
|
||||
|
||||
table tr th:last-child,
|
||||
table tr td:last-child {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
// SASSTODO: Proper calcs
|
||||
.view-forecast-btn {
|
||||
width: 35px;
|
||||
min-width: 35px;
|
||||
height: 24px;
|
||||
|
||||
.euiButton__content {
|
||||
padding: 0px $euiSizeS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'forecasting_modal';
|
||||
|
|
@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
|
|||
import React from 'react';
|
||||
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonIcon,
|
||||
EuiIcon,
|
||||
EuiInMemoryTable,
|
||||
EuiText,
|
||||
|
|
@ -58,14 +58,23 @@ function getColumns(viewForecast) {
|
|||
name: i18n.translate('xpack.ml.timeSeriesExplorer.forecastsList.viewColumnName', {
|
||||
defaultMessage: 'View'
|
||||
}),
|
||||
render: (forecast) => (
|
||||
<EuiButton
|
||||
className="view-forecast-btn"
|
||||
onClick={() => viewForecast(forecast.forecast_id)}
|
||||
>
|
||||
<i aria-hidden="true" className="fa fa-line-chart"/>
|
||||
</EuiButton>
|
||||
)
|
||||
width: '60px',
|
||||
render: (forecast) => {
|
||||
const viewForecastAriaLabel = i18n.translate(
|
||||
'xpack.ml.timeSeriesExplorer.forecastsList.viewForecastAriaLabel', {
|
||||
defaultMessage: 'View forecast created at {createdDate}',
|
||||
values: { createdDate: formatHumanReadableDateTimeSeconds(forecast.forecast_create_timestamp) }
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiButtonIcon
|
||||
onClick={() => viewForecast(forecast.forecast_id)}
|
||||
iconType="stats"
|
||||
aria-label={viewForecastAriaLabel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export function Modal(props) {
|
|||
<EuiOverlayMask>
|
||||
<EuiModal
|
||||
onClose={props.close}
|
||||
className="forecast-modal"
|
||||
maxWidth="860px"
|
||||
>
|
||||
|
||||
<EuiModalHeader>
|
||||
|
|
|
|||
Loading…
Reference in a new issue