Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Monitoring] Sass cleanup #51100

Merged
merged 13 commits into from
Nov 27, 2019
Merged

[Monitoring] Sass cleanup #51100

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b333620
no sass lint warnings
andreadelrio Sep 9, 2019
0b5fbb4
gathering changes to sass
andreadelrio Nov 19, 2019
4e4a7cb
snaps
andreadelrio Nov 19, 2019
5b39d0b
rename one class
andreadelrio Nov 19, 2019
beef29b
Merge remote-tracking branch 'upstream/master' into monitoring-sass-c…
andreadelrio Nov 22, 2019
65b535a
Merge remote-tracking branch 'upstream/master' into monitoring-sass-c…
andreadelrio Nov 22, 2019
3c104da
Merge remote-tracking branch 'upstream/master' into monitoring-sass-c…
andreadelrio Nov 24, 2019
94dc9ec
better class names and some more cleanup
andreadelrio Nov 26, 2019
1e48f4e
renamed monTitle
andreadelrio Nov 26, 2019
d00e95d
removed unused sass class
andreadelrio Nov 26, 2019
1b46852
removed another unused class
andreadelrio Nov 26, 2019
6292d22
PR feedback
andreadelrio Nov 27, 2019
0dc0e62
Merge branch 'master' into monitoring-sass-cleanup
elasticmachine Nov 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions x-pack/legacy/plugins/monitoring/public/components/chart/_chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@mixin monitoringNoUserSelect(){
@mixin monitoringNoUserSelect {
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; // sass-lint:disable-line no-vendor-prefixes
-webkit-tap-highlight-color: transparent; // sass-lint:disable-line no-vendor-prefixes
cchaos marked this conversation as resolved.
Show resolved Hide resolved
}

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

.monRhythmChart {
position: relative;
display: flex;
Expand Down Expand Up @@ -50,14 +50,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 +74,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
69 changes: 31 additions & 38 deletions x-pack/legacy/plugins/monitoring/public/components/chart/horizontal_legend.js
View file
Open in desktop
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,35 @@ export class HorizontalLegend extends React.Component {
}

createSeries(row, rowIdx) {
const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem'];
const classes = ['monRhythmChart__legendItem'];
cchaos marked this conversation as resolved.
Show resolved Hide resolved

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}>
<div className={classes.join(' ')} onClick={event => this.props.onToggle(event, row.id)}>
cchaos marked this conversation as resolved.
Show resolved Hide resolved
<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)}
</div>
</EuiFlexItem>
</EuiKeyboardAccessible>
);
}
Expand All @@ -102,9 +95,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
Open in desktop
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
Open in desktop
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="elasticsearchIndicesTable__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