Skip to content

Commit

Permalink
[ML] Redesign to be more in line with EUI/Kibana.
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterra
walterra committed Sep 25, 2018
1 parent 08060ce commit 936cd0e
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 98 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/public/components/anomalies_table/anomalies_table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ class AnomaliesTable extends Component {
unsetShowFunction={this.unsetShowRuleEditorFlyoutFunction}
/>
<EuiInMemoryTable
className="ml-anomalies-table eui-textBreakWord euiPanel euiPanel--ml"
className="ml-anomalies-table eui-textBreakWord"
items={tableData.anomalies}
columns={columns}
pagination={{
Expand Down
13 changes: 5 additions & 8 deletions x-pack/plugins/ml/public/components/influencers_list/influencers_list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import React from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
Expand Down Expand Up @@ -133,13 +132,11 @@ export function InfluencersList({ influencers }) {
}

const influencersByName = Object.keys(influencers).map(influencerFieldName => (
<EuiPanel paddingSize="s" style={{ marginBottom: '10px' }} className="euiPanel--ml">
<InfluencersByName
key={influencerFieldName}
influencerFieldName={influencerFieldName}
fieldValues={influencers[influencerFieldName]}
/>
</EuiPanel>
<InfluencersByName
key={influencerFieldName}
influencerFieldName={influencerFieldName}
fieldValues={influencers[influencerFieldName]}
/>
));

return (
Expand Down
63 changes: 34 additions & 29 deletions x-pack/plugins/ml/public/explorer/explorer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,37 @@
</div>

<div ng-if="noInfluencersConfigured === false" class="column col-xs-2 euiText">
<div class="euiPanel euiPanel--paddingSmall euiPanel--ml">
<span class="panel-title">
Top Influencers
</span>
<ml-influencers-list
influencers="influencers"
/>
</div>
</div>

<div class="column" ng-class="noInfluencersConfigured === true ? 'col-xs-12' : 'col-xs-10'">
<div class="euiPanel euiPanel--paddingSmall euiPanel--ml">
<span class="panel-title euiText">
Anomaly timeline
</span>

<div
class="ml-explorer-swimlane euiText"
ng-mouseenter="setSwimlaneSelectActive(true)"
ng-mouseleave="setSwimlaneSelectActive(false)"
>
<ml-explorer-swimlane
swimlane-type="overall"
swimlane-data="overallSwimlaneData"
selected-job-ids="selectedJobIds"
chart-width="swimlaneWidth"
app-state="appState"
style="width: 100%; height: 250px;">
</ml-explorer-swimlane>
</div>

<div ng-if="viewBySwimlaneOptions.length > 0">
<div class="ml-controls">
<label for="selectViewBy" class="kuiLabel">View by:</label>
Expand All @@ -64,9 +82,9 @@
</li>
</ul>
</div>

<ml-select-limit />

<span ng-if="viewByLoadedForTimeFormatted" class="panel-sub-title">
(Sorted by max anomaly score for {{viewByLoadedForTimeFormatted}})
</span>
Expand All @@ -76,52 +94,38 @@
</div>
</div>

<div class="euiPanel euiPanel--paddingSmall euiPanel--ml">

<div ng-if="viewBySwimlaneOptions.length > 0">
<div
class="ml-explorer-swimlane euiText"
ng-if="showViewBySwimlane()"
ng-mouseenter="setSwimlaneSelectActive(true)"
ng-mouseleave="setSwimlaneSelectActive(false)"
>
<ml-explorer-swimlane
swimlane-type="overall"
swimlane-data="overallSwimlaneData"
swimlane-type="viewBy"
swimlane-data="viewBySwimlaneData"
selected-job-ids="selectedJobIds"
chart-width="swimlaneWidth"
app-state="appState"
style="width: 100%; height: 250px;">
</ml-explorer-swimlane>
</div>

<div ng-if="viewBySwimlaneOptions.length > 0">
<div
class="ml-explorer-swimlane euiText"
ng-if="showViewBySwimlane()"
ng-mouseenter="setSwimlaneSelectActive(true)"
ng-mouseleave="setSwimlaneSelectActive(false)"
>
<ml-explorer-swimlane
swimlane-type="viewBy"
swimlane-data="viewBySwimlaneData"
selected-job-ids="selectedJobIds"
chart-width="swimlaneWidth"
app-state="appState"
style="width: 100%; height: 250px;">
</ml-explorer-swimlane>
</div>

<div ng-if="!showViewBySwimlane()" class="text-center visualize-error euiText">
<div class="item top"></div>
<div class="item">
<h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers found</h4>
</div>
<div class="item bottom"></div>
<div ng-if="!showViewBySwimlane()" class="text-center visualize-error euiText">
<div class="item top"></div>
<div class="item">
<h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers found</h4>
</div>

<div class="item bottom"></div>
</div>

</div>
</div>

<div class="euiSpacer euiSpacer--m"></div>

<div class="euiPanel euiPanel--paddingSmall euiPanel--ml">
<span class="panel-title euiText">
Anomalies
</span>
Expand Down Expand Up @@ -162,6 +166,7 @@ <h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers
<ml-anomalies-table
table-data="tableData"
/>
<div>

</div>

Expand Down
67 changes: 32 additions & 35 deletions x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
import React from 'react';

import {
EuiPanel,
EuiIconTip
} from '@elastic/eui';

Expand Down Expand Up @@ -38,42 +37,40 @@ export function ExplorerChartsContainer({

return (
<div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
<EuiPanel paddingSize="s" className="euiPanel--ml">
<div className="explorer-chart-label">
<div className="explorer-chart-label-fields">
{(detectorLabel.length > 0 && entityFields.length > 0) && (
<span>{detectorLabel} - </span>
)}
{(detectorLabel.length > 0 && entityFields.length === 0) && (
<span>{detectorLabel}</span>
)}
{entityFields.map((entity, j) => {
return (
<span key={j}>{entity.fieldName} {entity.fieldValue}</span>
);
})}
</div>
<EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
{tooManyBuckets && (
<EuiIconTip
content={'This selection contains too many buckets to be displayed.' +
'The dashboard is best viewed over a shorter time range.'}
position="bottom"
size="s"
type="alert"
color="warning"
/>
<div className="explorer-chart-label">
<div className="explorer-chart-label-fields">
{(detectorLabel.length > 0 && entityFields.length > 0) && (
<span>{detectorLabel} - </span>
)}
<a className="euiLink" onClick={() => window.open(getExploreSeriesLink(series), '_blank')}>
View <i className="fa fa-external-link" aria-hidden="true" />
</a>
{(detectorLabel.length > 0 && entityFields.length === 0) && (
<span>{detectorLabel}</span>
)}
{entityFields.map((entity, j) => {
return (
<span key={j}>{entity.fieldName} {entity.fieldValue}</span>
);
})}
</div>
<ExplorerChart
tooManyBuckets={tooManyBuckets}
seriesConfig={series}
mlSelectSeverityService={mlSelectSeverityService}
/>
</EuiPanel>
<EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
{tooManyBuckets && (
<EuiIconTip
content={'This selection contains too many buckets to be displayed.' +
'The dashboard is best viewed over a shorter time range.'}
position="bottom"
size="s"
type="alert"
color="warning"
/>
)}
<a className="euiLink" onClick={() => window.open(getExploreSeriesLink(series), '_blank')}>
View <i className="fa fa-external-link" aria-hidden="true" />
</a>
</div>
<ExplorerChart
tooManyBuckets={tooManyBuckets}
seriesConfig={series}
mlSelectSeverityService={mlSelectSeverityService}
/>
</div>
);
})
Expand Down
26 changes: 1 addition & 25 deletions x-pack/plugins/ml/public/explorer/styles/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,7 @@
width: 100%;
display: inline-block;
color: #555;
background-color: #fbfbfb;

.euiSelect, .euiComboBox__inputWrap {
background-color: #fff;
}

.euiPanel--ml {
-webkit-box-shadow: 0 2px 2px -1px rgba(153, 153, 153, 0.2), 0 1px 5px -2px rgba(153, 153, 153, 0.2);
box-shadow: 0 2px 2px -1px rgba(153, 153, 153, 0.2), 0 1px 5px -2px rgba(153, 153, 153, 0.2);
background-color: #FFF;
border: 1px solid #f4f4f4;
border-radius: 3px;
}
background-color: #f0f0f0;

.visualize-error {
h4 {
Expand Down Expand Up @@ -146,18 +134,6 @@

padding: 15px 0px 0px 0px;

ml-explorer-swimlane[swimlane-type="overall"] {
.lane-label {
font-weight: 800;
}

.time-tick-labels {
display: none;
}

margin-bottom: 0px;
}

ml-explorer-swimlane {
& > .title {
background-color: #9c9fa6;
Expand Down

0 comments on commit 936cd0e

Please sign in to comment.