diff --git a/.sass-lint.yml b/.sass-lint.yml index eb43af293c670..56b85adca8a71 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -12,6 +12,7 @@ files: - 'x-pack/plugins/maps/**/*.s+(a|c)ss' - 'x-pack/plugins/spaces/**/*.s+(a|c)ss' - 'x-pack/plugins/security/**/*.s+(a|c)ss' + - 'x-pack/plugins/monitoring/**/*.s+(a|c)ss' ignore: - 'x-pack/plugins/canvas/shareable_runtime/**/*.s+(a|c)ss' rules: diff --git a/x-pack/plugins/monitoring/public/_hacks.scss b/x-pack/plugins/monitoring/public/_hacks.scss deleted file mode 100644 index bd5079a560820..0000000000000 --- a/x-pack/plugins/monitoring/public/_hacks.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import '@elastic/eui/src/components/header/variables'; - -#monitoring-app { - // SASSTODO: PUI tooltips can be replaced with EuiToolTip - .pui-tooltip-inner { - font-size: $euiFontSizeXS; - } - - .monitoring-tooltip__trigger, - .monitoring-tooltip__trigger:hover { - color: $euiTextColor; - } - - // SASSTODO: Remove font awesome - .monTabs--icon { - margin-left: $euiSizeXS; - color: $euiColorDarkShade; - font-size: $euiFontSize; - } - - .monCallout--meta { - margin-top: $euiSize; - } -} diff --git a/x-pack/plugins/monitoring/public/angular/index.ts b/x-pack/plugins/monitoring/public/angular/index.ts index b371503fdb7c9..3f2a51a898d1f 100644 --- a/x-pack/plugins/monitoring/public/angular/index.ts +++ b/x-pack/plugins/monitoring/public/angular/index.ts @@ -12,7 +12,7 @@ import { localAppModule, appModuleName } from './app_modules'; import { MonitoringPluginDependencies } from '../types'; -const APP_WRAPPER_CLASS = 'monitoringApplicationWrapper'; +const APP_WRAPPER_CLASS = 'monApplicationWrapper'; export class AngularApp { private injector?: angular.auto.IInjectorService; diff --git a/x-pack/plugins/monitoring/public/components/chart/_chart.scss b/x-pack/plugins/monitoring/public/components/chart/_chart.scss deleted file mode 100644 index 1b8ebb762533d..0000000000000 --- a/x-pack/plugins/monitoring/public/components/chart/_chart.scss +++ /dev/null @@ -1,97 +0,0 @@ -@mixin monitoringNoUserSelect { - user-select: none; -} - -.monRhythmChart__wrapper .monRhythmChart__zoom { - visibility: hidden; - padding-right: $euiSizeM; -} - -.monRhythmChart__wrapper:hover .monRhythmChart__zoom { - visibility: visible; -} - -.monRhythmChart { - position: relative; - display: flex; - flex-direction: column; - flex: 1 0 auto; -} - -.monRhythmChart__title { - color: $euiTextColor; - margin: 0 0 $euiSizeS; -} - -.monRhythmChart__content { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex: 1 0 auto; -} - -.monRhythmChart__visualization { - display: flex; - flex-direction: column; - flex: 1 0 auto; - position: relative; - - // SASSTODO: generic selector - & > div { - min-width: 1px; - width: 100%; - height: 100%; - } - - // SASSTODO: generic selector - div { - @include monitoringNoUserSelect; - } -} - -.monRhythmChart__legendItem { - font-size: $euiFontSizeXS; - cursor: pointer; - color: $euiTextColor; - display: flex; - flex-direction: row; - align-items: center; - - &-isDisabled { - opacity: 0.5; - } -} - -.monRhythmChart__legendHorizontal { - margin-top: $euiSizeXS; -} - -.monRhythmChart__legendLabel { - overflow: hidden; - white-space: nowrap; - display: flex; - flex-direction: row; - align-items: center; -} - -.monRhythmChart__legendValue { - overflow: hidden; - white-space: nowrap; - margin-left: $euiSizeXS; -} - -.monChart__tooltipLabel, -.monChart__tooltipValue { - text-align: left; - font-size: $euiFontSizeXS; - padding: $euiSizeXS; - word-wrap: break-word; - white-space: normal; -} - -.monChart__tooltipLabel { - font-weight: $euiFontWeightBold; -} diff --git a/x-pack/plugins/monitoring/public/components/chart/_index.scss b/x-pack/plugins/monitoring/public/components/chart/_index.scss deleted file mode 100644 index 2626b91b4c1e2..0000000000000 --- a/x-pack/plugins/monitoring/public/components/chart/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'chart'; diff --git a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js index 738775ed8d4d9..7d7f232f63975 100644 --- a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js +++ b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js @@ -9,6 +9,7 @@ import { includes, isFunction } from 'lodash'; import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiKeyboardAccessible } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; +import './horizontal_legend.scss'; export class HorizontalLegend extends React.Component { constructor() { diff --git a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.scss b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.scss new file mode 100644 index 0000000000000..a68f86d28d201 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.scss @@ -0,0 +1,30 @@ +.monRhythmChart__legendItem { + font-size: $euiFontSizeXS; + cursor: pointer; + color: $euiTextColor; + display: flex; + flex-direction: row; + align-items: center; + + &-isDisabled { + opacity: .5; + } +} + +.monRhythmChart__legendHorizontal { + margin-top: $euiSizeXS; +} + +.monRhythmChart__legendLabel { + overflow: hidden; + white-space: nowrap; + display: flex; + flex-direction: row; + align-items: center; +} + +.monRhythmChart__legendValue { + overflow: hidden; + white-space: nowrap; + margin-left: $euiSizeXS; +} diff --git a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js index 37fe756187cd4..87efd0a065d49 100644 --- a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js +++ b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js @@ -6,6 +6,7 @@ import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; +import './info_tooltip.scss'; export function InfoTooltip({ series, bucketSize }) { const tableRows = series.map((item, index) => { diff --git a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.scss b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.scss new file mode 100644 index 0000000000000..7798951ce23fc --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.scss @@ -0,0 +1,12 @@ +.monChart__tooltipLabel, +.monChart__tooltipValue { + text-align: left; + font-size: $euiFontSizeXS; + padding: $euiSizeXS; + word-wrap: break-word; + white-space: normal; +} + +.monChart__tooltipLabel { + font-weight: $euiFontWeightBold; +} diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js index c5f4082e2b684..c6bd0773343e0 100644 --- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js +++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js @@ -10,6 +10,7 @@ import { getTitle } from './get_title'; import { getUnits } from './get_units'; import { MonitoringTimeseries } from './monitoring_timeseries'; import { InfoTooltip } from './info_tooltip'; +import './monitoring_timeseries_container.scss'; import { EuiIconTip, diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.scss b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.scss new file mode 100644 index 0000000000000..0da89b55e69e4 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.scss @@ -0,0 +1,8 @@ +.monRhythmChart__wrapper .monRhythmChart__zoom { + visibility: hidden; + padding-right: $euiSizeM; +} + +.monRhythmChart__wrapper:hover .monRhythmChart__zoom { + visibility: visible; +} diff --git a/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.js b/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.js index 02753f4d1da5b..eb32ee108e7b3 100644 --- a/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.js +++ b/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.js @@ -11,6 +11,7 @@ import { TimeseriesContainer } from './timeseries_container'; import { HorizontalLegend } from './horizontal_legend'; import { getValuesForSeriesIndex, getValuesByX } from './get_values_for_legend'; import { DEBOUNCE_SLOW_MS } from '../../../common/constants'; +import './timeseries_visualization.scss'; export class TimeseriesVisualization extends React.Component { constructor(props) { diff --git a/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.scss b/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.scss new file mode 100644 index 0000000000000..8c954e2896dc4 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/chart/timeseries_visualization.scss @@ -0,0 +1,39 @@ +.monRhythmChart { + position: relative; + display: flex; + flex-direction: column; + flex: 1 0 auto; +} + +.monRhythmChart__content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex: 1 0 auto; +} + +@mixin monitoringNoUserSelect { + user-select: none; +} + +.monRhythmChart__visualization { + display: flex; + flex-direction: column; + flex: 1 0 auto; + position: relative; + + // SASSTODO: generic selector + & > div { + min-width: 1px; + width: 100%; + height: 100%; + } + + // SASSTODO: generic selector + div { + @include monitoringNoUserSelect; + } +} diff --git a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js index f1a867536b606..d47af51ee159f 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.js @@ -25,6 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public'; import { STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../../common/constants'; +import './listing.scss'; const IsClusterSupported = ({ isSupported, children }) => { return isSupported ? children : '-'; @@ -191,7 +192,7 @@ const getColumns = ( if (!licenseType) { return (
-
N/A
+
N/A
); } @@ -209,7 +210,7 @@ const getColumns = ( return (
-
{capitalize(licenseType)}
+
{capitalize(licenseType)}
{showLicenseExpiration ? licenseExpiry() : null}
diff --git a/x-pack/plugins/monitoring/public/components/table/_table.scss b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.scss similarity index 82% rename from x-pack/plugins/monitoring/public/components/table/_table.scss rename to x-pack/plugins/monitoring/public/components/cluster/listing/listing.scss index 7c5ab4d51d999..035d9fe5729d6 100644 --- a/x-pack/plugins/monitoring/public/components/table/_table.scss +++ b/x-pack/plugins/monitoring/public/components/cluster/listing/listing.scss @@ -9,12 +9,12 @@ color: $euiTextColor; } -.monTableCell__clusterCellLiscense { - font-size: 16px; +.monTableCell__clusterCellLicense { + font-size: $euiFontSize; } + .monTableCell__clusterCellExpiration { color: $euiColorDarkShade; - @include euiFontSizeS; } .monTableCell__name, @@ -28,8 +28,8 @@ } .monTableCell__transportAddress { - color: $euiColorDarkShade; @include euiFontSizeS; + color: $euiColorDarkShade; } .monTableCell__number { @@ -39,8 +39,3 @@ .monTableCell__splitNumber { @include euiFontSizeM; } - -.monElasticsearchIndicesTable__status { - display: flex; - align-items: center; -} diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js index 6dcd64f875e1c..5ad0f8c0597f2 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js @@ -104,7 +104,8 @@ export function AlertsPanel({ alerts, changeUrl }) { changeUrl={changeUrl} /> -

+ +

{message}

-

+ +

{ const key = data.id; const initialClasses = ['monChild']; + if (data.type === 'index') { + initialClasses.push('monChild--index'); + } const shardStats = get(this.props.shardStats.indices, key); if (shardStats) { switch (shardStats.status) { diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/calculate_class.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/calculate_class.js index 23f70de3e262a..3acbfcb94d3a8 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/calculate_class.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/lib/calculate_class.js @@ -10,6 +10,7 @@ export function calculateClass(item, initial) { classes.push(initial); } if (item.type === 'shard') { + classes.push('monShard'); classes.push((item.primary && 'primary') || 'replica'); classes.push(item.state.toLowerCase()); if (item.state === 'UNASSIGNED' && item.primary) { diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.js index c5ddfecb04488..af3b55bf92146 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.js @@ -9,6 +9,7 @@ import { EuiTitle, EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elast import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { ClusterView } from './components/cluster_view'; +import './shard_allocation.scss'; export const ShardAllocation = ({ scope, kbnUrl, type, shardStats }) => { const types = [ diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.scss similarity index 85% rename from x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss rename to x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.scss index 50e92d572908c..c46d7a048b93b 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.scss @@ -7,7 +7,7 @@ .monCluster { .monUnassigned { vertical-align: middle; - width: 150px; + width: $euiSize * 10; } .monUnassigned__children, @@ -22,9 +22,9 @@ margin: $euiSizeS; border: 1px solid $euiColorMediumShade; border-radius: $euiSizeXS; - padding: $euiSizeXS/2 0; - // SASS-TODO: Rename this class following Eui conventions - &.index { + padding: $euiSizeXS / 2 0; + + &.monChild--index { border-left: $euiSizeXS solid $euiColorSuccess; &.monChild--danger { @@ -58,10 +58,10 @@ } td:first-child { - width: 200px; + width: $euiSize * 12.5; } - // SASS-TODO: Rename this class following Eui conventions - .shard { + + .monShard { align-self: center; padding: $euiSizeXS $euiSizeS; font-size: $euiFontSizeXS; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap index 7a5f8e89e8620..b25f256f802ea 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap @@ -3,7 +3,7 @@ exports[`CollapsibleStatement component renders child components 1`] = ` diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap index db95a2bca5119..0bfdb6de50188 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap @@ -3,7 +3,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = ` @@ -75,7 +75,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = ` exports[`PluginStatement component adds warning highlight for event millis 1`] = ` @@ -147,7 +147,7 @@ exports[`PluginStatement component adds warning highlight for event millis 1`] = exports[`PluginStatement component does not render explicit id field if no id is specified 1`] = ` @@ -197,7 +197,7 @@ exports[`PluginStatement component does not render explicit id field if no id is exports[`PluginStatement component renders input metrics and explicit id fields 1`] = ` @@ -257,7 +257,7 @@ exports[`PluginStatement component renders input metrics and explicit id fields exports[`PluginStatement component renders processor statement metrics 1`] = ` diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_index.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_index.scss deleted file mode 100644 index 6a50f7b76b501..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'pipeline_viewer'; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_pipeline_viewer.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_pipeline_viewer.scss deleted file mode 100644 index 64356c59944e4..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/_pipeline_viewer.scss +++ /dev/null @@ -1,103 +0,0 @@ -.monPipelineViewer { - max-width: 1000px; -} - -.monPipelineViewer__statement { - padding-left: $euiSizeM; -} - -.monPipelineViewer__plugin { - margin-left: $euiSizeXS; -} - -.monPipelineViewer__spaceContainer { - background-color: $euiColorEmptyShade; - align-self: stretch; - display: flex; - // Separates the left border spaces properly - border-bottom: solid 2px $euiColorEmptyShade; -} - -.monPipelineViewer__spacer { - width: $euiSizeM; - align-self: stretch; - margin-left: $euiSizeM; - border-left: 1px $euiBorderColor dashed; - - // This allows the border to be flush - &:last-child { - width: 0px; - } - - &:first-child { - // Odd number is because of the single pixel border. - margin-left: $euiSizeL - 1px; - } -} - -.monPipelineViewer__metric { - text-align: right; - - &--cpuTime { - width: $euiSizeXXL; - } - - &--events, &--eventsEmitted { - width: $euiSizeXXL * 4; - } - - &--eventMillis { - width: $euiSizeXXL * 2; - } -} - -.monPipelineViewer__queueMessage { - margin-left: $euiSizeL; - color: $euiColorDarkShade; -} - -.monPipelineViewer__list { - .monPipelineViewer__listItem { - display: flex; - min-height: $euiSizeXL; - align-items: center; - padding-right: $euiSizeM; - - &:nth-child(2n+1) { - background: tintOrShade($euiColorLightestShade, 2%, 2%); - } - } -} - -.monPipelineViewer__conditional { - font-weight: bold; -} - -img.lspvDetailDrawerIcon { - display: inline; - margin: 0 $euiSizeXS 0 0; - width: auto; - vertical-align: middle; -} - -// SASSTODO: Why is this width here? -.lspvDetailDrawerSparklineContainer { - width: 7vw; -} - -@include euiBreakpoint('m') { - .monPipelineViewer { - .monPipelineViewer__spacer { - border: none; - } - - .monPipelineViewer__metricFlexItem { - margin-bottom: $euiSizeXS !important; - } - - .monPipelineViewer__metric { - text-align: left; - padding-left: $euiSizeXL; - } - } -} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js index 77fd484d2be6f..9fcd922d10b79 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js @@ -8,6 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import './collapsible_statement.scss'; function getToggleIconType(isCollapsed) { return isCollapsed ? 'arrowRight' : 'arrowDown'; @@ -29,7 +30,7 @@ export function CollapsibleStatement(props) { responsive={false} gutterSize="none" alignItems="center" - className="monPipelineViewer__statement" + className="monPipelineViewer__collapsibleStatement" > ; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.scss new file mode 100644 index 0000000000000..061ac275ff74d --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.scss @@ -0,0 +1,4 @@ +// SASSTODO: Why is this width here? +.lspvDetailDrawerSparklineContainer { + width: 7vw; +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.js index cf9f0c8b02878..6bc8caab08688 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.js @@ -8,6 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EuiFlexItem, EuiBadge, EuiText } from '@elastic/eui'; import classNames from 'classnames'; +import './metric.scss'; export function Metric({ className, warning, value }) { const classes = classNames('monPipelineViewer__metric', className); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.scss new file mode 100644 index 0000000000000..71b16cdaf3ff4 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/metric.scss @@ -0,0 +1,27 @@ +.monPipelineViewer__metric { + text-align: right; + + &--cpuTime { + width: $euiSizeXXL; + } + + &--events, + &--eventsEmitted { + width: $euiSizeXXL * 4; + } + + &--eventMillis { + width: $euiSizeXXL * 2; + } +} + +@include euiBreakpoint('m') { + .monPipelineViewer__metricFlexItem { + margin-bottom: $euiSizeXS !important; // sass-lint:disable-line no-important + } + + .monPipelineViewer__metric { + text-align: left; + padding-left: $euiSizeXL; + } +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js index 2f5968ee4737e..2061860c98ed8 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js @@ -10,6 +10,7 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eu import { formatMetric } from '../../../../lib/format_number'; import { Metric } from './metric'; import { i18n } from '@kbn/i18n'; +import './plugin_statement.scss'; function getInputStatementMetrics({ latestEventsPerSecond }) { return [ @@ -69,7 +70,7 @@ export function PluginStatement({ return ( diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.scss new file mode 100644 index 0000000000000..564c1ab615a16 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.scss @@ -0,0 +1,7 @@ +.monPipelineViewer__plugin { + margin-left: $euiSizeXS; +} + +.monPipelineViewer__pluginStatement { + padding-left: $euiSizeM; +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js index c3fd9986474cf..3fd9c6e333d7f 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js @@ -8,6 +8,7 @@ import React from 'react'; import { StatementListHeading } from './statement_list_heading'; import { EuiSpacer, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import './queue.scss'; export function Queue() { return ( diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.scss new file mode 100644 index 0000000000000..60bac9f41b991 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.scss @@ -0,0 +1,4 @@ +.monPipelineViewer__queueMessage { + margin-left: $euiSizeL; + color: $euiColorDarkShade; +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js index 6b763500bf6de..4553aeb07ed19 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js @@ -11,6 +11,7 @@ import { PluginStatement as PluginStatementModel } from '../models/pipeline/plug import { CollapsibleStatement } from './collapsible_statement'; import { IfElement } from '../models/list/if_element'; import { PluginStatement } from './plugin_statement'; +import './statement.scss'; function renderStatementName(name, onVertexSelected) { return ( diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.scss b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.scss new file mode 100644 index 0000000000000..00d139463af50 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.scss @@ -0,0 +1,47 @@ +.monPipelineViewer__spaceContainer { + background-color: $euiColorEmptyShade; + align-self: stretch; + display: flex; + // Separates the left border spaces properly + border-bottom: solid 2px $euiColorEmptyShade; +} + +.monPipelineViewer__spacer { + width: $euiSizeM; + align-self: stretch; + margin-left: $euiSizeM; + border-left: 1px $euiBorderColor dashed; + + // This allows the border to be flush + &:last-child { + width: 0; + } + + &:first-child { + // Odd number is because of the single pixel border. + margin-left: $euiSizeL - 1px; + } +} + +.monPipelineViewer__list { + .monPipelineViewer__listItem { + display: flex; + min-height: $euiSizeXL; + align-items: center; + padding-right: $euiSizeM; + + &:nth-child(2n + 1) { + background: tintOrShade($euiColorLightestShade, 2%, 2%); + } + } +} + +.monPipelineViewer__conditional { + font-weight: bold; +} + +@include euiBreakpoint('m') { + .monPipelineViewer__spacer { + border: none; + } +} diff --git a/x-pack/plugins/monitoring/public/components/no_data/_index.scss b/x-pack/plugins/monitoring/public/components/no_data/_index.scss deleted file mode 100644 index bc9b5d065ebd9..0000000000000 --- a/x-pack/plugins/monitoring/public/components/no_data/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'no_data'; diff --git a/x-pack/plugins/monitoring/public/components/no_data/_no_data.scss b/x-pack/plugins/monitoring/public/components/no_data/_no_data.scss deleted file mode 100644 index efd370c7bc7cb..0000000000000 --- a/x-pack/plugins/monitoring/public/components/no_data/_no_data.scss +++ /dev/null @@ -1,5 +0,0 @@ -.noData__content { - max-width: 600px; - text-align: center; - position: relative; -} diff --git a/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap b/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap index 7b468d08e29a6..f4d8232b2e340 100644 --- a/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap @@ -9,7 +9,7 @@ exports[`PageLoading should show a simple page loading component 1`] = ` class="euiPageBody" >

diff --git a/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss b/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss new file mode 100644 index 0000000000000..ebe0defecb02a --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/page_loading/page_loading.scss @@ -0,0 +1,5 @@ +.monNoData__content { + max-width: $euiSizeM * 50; + text-align: center; + position: relative; +} diff --git a/x-pack/plugins/monitoring/public/components/setup_mode/_index.scss b/x-pack/plugins/monitoring/public/components/setup_mode/_index.scss deleted file mode 100644 index b9c218fc4f39c..0000000000000 --- a/x-pack/plugins/monitoring/public/components/setup_mode/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'enter_button'; diff --git a/x-pack/plugins/monitoring/public/components/setup_mode/_enter_button.scss b/x-pack/plugins/monitoring/public/components/setup_mode/enter_button.scss similarity index 100% rename from x-pack/plugins/monitoring/public/components/setup_mode/_enter_button.scss rename to x-pack/plugins/monitoring/public/components/setup_mode/enter_button.scss diff --git a/x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx b/x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx index 8adcb635a6559..1edfdddeaae99 100644 --- a/x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx +++ b/x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { EuiButton } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import './enter_button.scss'; export interface SetupModeEnterButtonProps { enabled: boolean; diff --git a/x-pack/plugins/monitoring/public/components/sparkline/_index.scss b/x-pack/plugins/monitoring/public/components/sparkline/_index.scss deleted file mode 100644 index 8fd74e94d91a2..0000000000000 --- a/x-pack/plugins/monitoring/public/components/sparkline/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'sparkline'; diff --git a/x-pack/plugins/monitoring/public/components/sparkline/index.js b/x-pack/plugins/monitoring/public/components/sparkline/index.js index db210de5300f6..c424e5a0b897e 100644 --- a/x-pack/plugins/monitoring/public/components/sparkline/index.js +++ b/x-pack/plugins/monitoring/public/components/sparkline/index.js @@ -8,6 +8,7 @@ import { isEqual } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { SparklineFlotChart } from './sparkline_flot_chart'; +import './sparkline.scss'; export class Sparkline extends React.Component { constructor(props) { diff --git a/x-pack/plugins/monitoring/public/components/sparkline/_sparkline.scss b/x-pack/plugins/monitoring/public/components/sparkline/sparkline.scss similarity index 100% rename from x-pack/plugins/monitoring/public/components/sparkline/_sparkline.scss rename to x-pack/plugins/monitoring/public/components/sparkline/sparkline.scss diff --git a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap index feb0f7297fb47..5a0ee905f92e4 100644 --- a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap @@ -6,13 +6,14 @@ exports[`Summary Status Component should allow label to be optional 1`] = ` intl="[object Object]" >
@@ -47,9 +48,10 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
@@ -74,9 +76,10 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
@@ -110,14 +113,15 @@ exports[`Summary Status Component should allow status to be optional 1`] = ` intl="[object Object]" >
@@ -144,9 +148,10 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
@@ -180,13 +185,14 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = ` intl="[object Object]" >
@@ -221,9 +227,10 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
@@ -250,9 +257,10 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/_index.scss b/x-pack/plugins/monitoring/public/components/summary_status/_index.scss deleted file mode 100644 index 6f0c842776263..0000000000000 --- a/x-pack/plugins/monitoring/public/components/summary_status/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'summary_status'; diff --git a/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss b/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss deleted file mode 100644 index 4bda98876d651..0000000000000 --- a/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss +++ /dev/null @@ -1,13 +0,0 @@ -.monSummaryStatusNoWrap { - margin-left: $euiSizeM; - margin-right: $euiSizeM; - .euiTitle { - overflow-x: hidden; - white-space: nowrap; - @include euiFontSizeXS; - } - - .euiFlexItem { - margin: $euiSizeS; - } -} diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js index 957ce50ebed95..943e100dc5409 100644 --- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js +++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js @@ -11,10 +11,22 @@ import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui'; import { StatusIcon } from '../status_icon/index.js'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import './summary_status.scss'; const wrapChild = ({ label, value, ...props }, index) => ( - - + + ); @@ -46,7 +58,12 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => { } return ( - + @@ -55,8 +72,9 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => { {capitalize(status)} } - titleSize="xs" + titleSize="xxxs" textAlign="left" + className="monSummaryStatusNoWrap__stat" description={i18n.translate('xpack.monitoring.summaryStatus.statusDescription', { defaultMessage: 'Status', })} @@ -74,7 +92,7 @@ export function SummaryStatus({ }) { return (
- + {metrics.map(wrapChild)} diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.scss b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.scss new file mode 100644 index 0000000000000..24577c84e701d --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.scss @@ -0,0 +1,10 @@ +.monSummaryStatusNoWrap { + margin-left: $euiSizeM; + margin-right: $euiSizeM; + + .monSummaryStatusNoWrap__stat { + p { + @include euiTextTruncate; + } + } +} diff --git a/x-pack/plugins/monitoring/public/components/table/_index.scss b/x-pack/plugins/monitoring/public/components/table/_index.scss deleted file mode 100644 index 999e0d69e2480..0000000000000 --- a/x-pack/plugins/monitoring/public/components/table/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'table'; diff --git a/x-pack/plugins/monitoring/public/index.scss b/x-pack/plugins/monitoring/public/index.scss index 4dda80ee7454b..e25885debebdd 100644 --- a/x-pack/plugins/monitoring/public/index.scss +++ b/x-pack/plugins/monitoring/public/index.scss @@ -1,9 +1,3 @@ -// Import the EUI global scope so we can use EUI constants -@import 'src/legacy/ui/public/styles/_styling_constants'; - -// Temporary hacks -@import 'hacks'; - // Monitoring plugin styles // Prefix all styles with "mon" to avoid conflicts. @@ -13,17 +7,7 @@ // monChart__legend--small // monChart__legend-isLoading -@import 'components/chart/index'; -@import 'components/no_data/index'; -@import 'components/sparkline/index'; -@import 'components/summary_status/index'; -@import 'components/table/index'; -@import 'components/logstash/pipeline_viewer/views/index'; -@import 'components/elasticsearch/shard_allocation/index'; -@import 'components/setup_mode/index'; -@import 'components/elasticsearch/ccr/index'; - -.monitoringApplicationWrapper { +.monApplicationWrapper { display: flex; flex-direction: column; flex-grow: 1;