Skip to content

Commit

Permalink
[Monitoring] Sass cleanup (elastic#51100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreadelrio @timductive
andreadelrio authored and timductive committed Dec 16, 2019
1 parent ee85b2f commit 5dc8d8c
Show file tree
Hide file tree
Showing 21 changed files with 1,957 additions and 1,900 deletions.
15 changes: 10 additions & 5 deletions x-pack/legacy/plugins/monitoring/public/components/chart/_chart.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
@mixin monitoringNoUserSelect(){
@mixin monitoringNoUserSelect {
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}

.monRhythmChart__wrapper .monRhythmChart__zoom {
Expand All @@ -12,7 +10,7 @@
.monRhythmChart__wrapper:hover .monRhythmChart__zoom {
visibility: visible;
}

.monRhythmChart {
position: relative;
display: flex;
Expand Down Expand Up @@ -50,14 +48,17 @@

// SASSTODO: generic selector
div {
@include monitoringNoUserSelect();
@include monitoringNoUserSelect;
}
}

.monRhythmChart__legendItem {
font-size: $euiFontSizeXS;
cursor: pointer;
color: $euiTextColor;
display: flex;
flex-direction: row;
align-items: center;

&-isDisabled {
opacity: 0.5;
Expand All @@ -71,7 +72,11 @@
.monRhythmChart__legendLabel {
overflow: hidden;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
}

.monRhythmChart__legendValue {
overflow: hidden;
white-space: nowrap;
Expand Down
72 changes: 34 additions & 38 deletions x-pack/legacy/plugins/monitoring/public/components/chart/horizontal_legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@

import React from 'react';
import { includes, isFunction } from 'lodash';
import {
EuiKeyboardAccessible,
} from '@elastic/eui';
import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiKeyboardAccessible } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';

Expand All @@ -23,11 +21,7 @@ export class HorizontalLegend extends React.Component {
* @param {Number} value Final value to display
*/
displayValue(value) {
return (
<span className="monRhythmChart__legendValue">
{ value }
</span>
);
return <span className="monRhythmChart__legendValue">{value}</span>;
}

/**
Expand All @@ -44,10 +38,12 @@ export class HorizontalLegend extends React.Component {
*/
formatter(value, row) {
if (!this.validValue(value)) {
return (<FormattedMessage
id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
defaultMessage="N/A"
/>);
return (
<FormattedMessage
id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
defaultMessage="N/A"
/>
);
}

if (row && row.tickFormatter) {
Expand All @@ -61,38 +57,38 @@ export class HorizontalLegend extends React.Component {
}

createSeries(row, rowIdx) {
const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem'];
const classes = ['monRhythmChart__legendItem'];

if (!includes(this.props.seriesFilter, row.id)) {
classes.push('monRhythmChart__legendItem-isDisabled');
}
if (!row.label || row.legend === false) {
return (
<div
key={rowIdx}
style={{ display: 'none' }}
/>
);
return <div key={rowIdx} style={{ display: 'none' }} />;
}

return (
<EuiKeyboardAccessible key={rowIdx}>
<div
className={classes.join(' ')}
onClick={event => this.props.onToggle(event, row.id)}
>
<span className="monRhythmChart__legendLabel">
<span
className="fa fa-circle monRhythmChart__legendIndicator"
style={{ color: row.color }}
aria-label={i18n.translate('xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel', {
defaultMessage: 'toggle button'
})}
/>
{ ' ' + row.label + ' ' }
</span>
{ this.formatter(this.props.seriesValues[row.id], row) }
</div>
<EuiFlexItem grow={false}>
<button
className={classes.join(' ')}
onClick={event => this.props.onToggle(event, row.id)}
>
<span className="monRhythmChart__legendLabel">
<EuiIcon
className="monRhythmChart__legendIndicator"
aria-label={i18n.translate(
'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
{ defaultMessage: 'toggle button' }
)}
size="l"
type="dot"
color={row.color}
/>
{' ' + row.label + ' '}
</span>
{this.formatter(this.props.seriesValues[row.id], row)}
</button>
</EuiFlexItem>
</EuiKeyboardAccessible>
);
}
Expand All @@ -102,9 +98,9 @@ export class HorizontalLegend extends React.Component {

return (
<div className="monRhythmChart__legendHorizontal">
<div className="row monRhythmChart__legend-series">
{ rows }
</div>
<EuiFlexGroup wrap={true} gutterSize="s" className="monRhythmChart__legendSeries">
{rows}
</EuiFlexGroup>
</div>
);
}
Expand Down
33 changes: 18 additions & 15 deletions x-pack/legacy/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,18 @@ import { MonitoringTimeseries } from './monitoring_timeseries';
import { InfoTooltip } from './info_tooltip';

import {
EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiScreenReaderOnly, EuiTextAlign, EuiButtonEmpty
EuiIconTip,
EuiFlexGroup,
EuiFlexItem,
EuiTitle,
EuiScreenReaderOnly,
EuiTextAlign,
EuiButtonEmpty,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';

const zoomOutBtn = (zoomInfo) => {
const zoomOutBtn = zoomInfo => {
if (!zoomInfo || !zoomInfo.showZoomOutBtn()) {
return null;
}
Expand All @@ -28,9 +34,9 @@ const zoomOutBtn = (zoomInfo) => {
<EuiButtonEmpty
color="primary"
size="s"
iconType="magnifyWithMinus"
onClick={zoomInfo.zoomOutHandler}
>
<i className="fa fa-search-minus" /> {' '}
<FormattedMessage
id="xpack.monitoring.chart.timeSeries.zoomOut"
defaultMessage="Zoom out"
Expand All @@ -55,11 +61,10 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
i18n.translate('xpack.monitoring.chart.seriesScreenReaderListDescription', {
defaultMessage: 'Interval: {bucketSize}',
values: {
bucketSize
}
})
]
.concat(series.map(item => `${item.metric.label}: ${item.metric.description}`));
bucketSize,
},
}),
].concat(series.map(item => `${item.metric.label}: ${item.metric.description}`));

return (
<EuiFlexGroup direction="column" gutterSize="s" className="monRhythmChart__wrapper">
Expand All @@ -68,7 +73,8 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
<EuiFlexItem grow={false}>
<EuiTitle size="s" tabIndex="0">
<h2>
{ getTitle(series) }{ units ? ` (${units})` : '' }
{getTitle(series)}
{units ? ` (${units})` : ''}
<EuiScreenReaderOnly>
<span>
<FormattedMessage
Expand All @@ -86,7 +92,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
anchorClassName="eui-textRight eui-alignMiddle monChart__tooltipTrigger"
type="iInCircle"
position="right"
content={<InfoTooltip series={series} bucketSize={bucketSize}/>}
content={<InfoTooltip series={series} bucketSize={bucketSize} />}
/>
<EuiScreenReaderOnly>
<span id={`monitoringChart${titleForAriaIds}`}>
Expand All @@ -95,14 +101,11 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
</EuiScreenReaderOnly>
</Fragment>
</EuiFlexItem>
{ zoomOutBtn(zoomInfo) }
{zoomOutBtn(zoomInfo)}
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem style={{ minHeight: '200px' }}>
<MonitoringTimeseries
series={series}
onBrush={onBrush}
/>
<MonitoringTimeseries series={series} onBrush={onBrush} />
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
65 changes: 25 additions & 40 deletions x-pack/legacy/plugins/monitoring/public/components/elasticsearch/indices/indices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,9 @@ const columns = [
field: 'name',
width: '350px',
sortable: true,
render: (value) => (
render: value => (
<div data-test-subj="name">
<EuiLink
href={`#/elasticsearch/indices/${value}`}
data-test-subj={`indexLink-${value}`}
>
<EuiLink href={`#/elasticsearch/indices/${value}`} data-test-subj={`indexLink-${value}`}>
{value}
</EuiLink>
</div>
Expand All @@ -48,12 +45,13 @@ const columns = [
}),
field: 'status',
sortable: true,
render: (value) => (
<div title={`Index status: ${value}`}>
<ElasticsearchStatusIcon status={value} />&nbsp;
render: value => (
<div className="monElasticsearchIndicesTable__status" title={`Index status: ${value}`}>
<ElasticsearchStatusIcon status={value} />
&nbsp;
{capitalize(value)}
</div>
)
),
},
{
name: i18n.translate('xpack.monitoring.elasticsearch.indices.documentCountTitle', {
Expand All @@ -62,34 +60,24 @@ const columns = [
field: 'doc_count',
sortable: true,
render: value => (
<div data-test-subj="documentCount">
{formatMetric(value, LARGE_ABBREVIATED)}
</div>
)
<div data-test-subj="documentCount">{formatMetric(value, LARGE_ABBREVIATED)}</div>
),
},
{
name: i18n.translate('xpack.monitoring.elasticsearch.indices.dataTitle', {
defaultMessage: 'Data',
}),
field: 'data_size',
sortable: true,
render: value => (
<div data-test-subj="dataSize">
{formatMetric(value, LARGE_BYTES)}
</div>
)
render: value => <div data-test-subj="dataSize">{formatMetric(value, LARGE_BYTES)}</div>,
},
{
name: i18n.translate('xpack.monitoring.elasticsearch.indices.indexRateTitle', {
defaultMessage: 'Index Rate',
}),
field: 'index_rate',
sortable: true,
render: value => (
<div data-test-subj="indexRate">
{formatMetric(value, LARGE_FLOAT, '/s')}
</div>
)
render: value => <div data-test-subj="indexRate">{formatMetric(value, LARGE_FLOAT, '/s')}</div>,
},
{
name: i18n.translate('xpack.monitoring.elasticsearch.indices.searchRateTitle', {
Expand All @@ -98,23 +86,17 @@ const columns = [
field: 'search_rate',
sortable: true,
render: value => (
<div data-test-subj="searchRate">
{formatMetric(value, LARGE_FLOAT, '/s')}
</div>
)
<div data-test-subj="searchRate">{formatMetric(value, LARGE_FLOAT, '/s')}</div>
),
},
{
name: i18n.translate('xpack.monitoring.elasticsearch.indices.unassignedShardsTitle', {
defaultMessage: 'Unassigned Shards',
}),
field: 'unassigned_shards',
sortable: true,
render: value => (
<div data-test-subj="unassignedShards">
{formatMetric(value, '0')}
</div>
)
}
render: value => <div data-test-subj="unassignedShards">{formatMetric(value, '0')}</div>,
},
];

const getNoDataMessage = () => {
Expand Down Expand Up @@ -154,16 +136,16 @@ export const ElasticsearchIndices = ({
<EuiSpacer size="m" />
<EuiPageContent>
<EuiSwitch
label={(
label={
<FormattedMessage
id="xpack.monitoring.elasticsearch.indices.systemIndicesLabel"
defaultMessage="System indices"
/>
)}
}
checked={showSystemIndices}
onChange={e => toggleShowSystemIndices(e.target.checked)}
/>
<EuiSpacer size="m"/>
<EuiSpacer size="m" />
<EuiMonitoringTable
className="elasticsearchIndicesTable"
rows={indices}
Expand All @@ -174,14 +156,17 @@ export const ElasticsearchIndices = ({
search={{
box: {
incremental: true,
placeholder: i18n.translate('xpack.monitoring.elasticsearch.indices.monitoringTablePlaceholder', {
defaultMessage: 'Filter Indices…'
})
placeholder: i18n.translate(
'xpack.monitoring.elasticsearch.indices.monitoringTablePlaceholder',
{
defaultMessage: 'Filter Indices…',
}
),
},
}}
onTableChange={onTableChange}
executeQueryOptions={{
defaultFields: ['name']
defaultFields: ['name'],
}}
/>
</EuiPageContent>
Expand Down
Loading

0 comments on commit 5dc8d8c

Please sign in to comment.