Skip to content

Commit

Permalink
[Monitoring] SASS modularization (#68726)
Browse files Browse the repository at this point in the history
andreadelrio authored Jun 11, 2020
1 parent 398def2 commit 2d1312f
Showing 60 changed files with 315 additions and 336 deletions.
1 change: 1 addition & 0 deletions .sass-lint.yml
Original file line number Diff line number Diff line change
@@ -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:
24 changes: 0 additions & 24 deletions x-pack/plugins/monitoring/public/_hacks.scss

This file was deleted.

2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/angular/index.ts
Original file line number Diff line number Diff line change
@@ -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;

97 changes: 0 additions & 97 deletions x-pack/plugins/monitoring/public/components/chart/_chart.scss

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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() {
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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) => {
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.monRhythmChart__wrapper .monRhythmChart__zoom {
visibility: hidden;
padding-right: $euiSizeM;
}

.monRhythmChart__wrapper:hover .monRhythmChart__zoom {
visibility: visible;
}
Original file line number Diff line number Diff line change
@@ -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) {
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<div className="monTableCell__clusterCellLiscense">N/A</div>
<div className="monTableCell__clusterCellLicense">N/A</div>
</div>
);
}
@@ -209,7 +210,7 @@ const getColumns = (

return (
<div>
<div className="monTableCell__clusterCellLiscense">{capitalize(licenseType)}</div>
<div className="monTableCell__clusterCellLicense">{capitalize(licenseType)}</div>
<div className="monTableCell__clusterCellExpiration">
{showLicenseExpiration ? licenseExpiry() : null}
</div>
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -104,7 +104,8 @@ export function AlertsPanel({ alerts, changeUrl }) {
changeUrl={changeUrl}
/>
<EuiText size="xs">
<p data-test-subj="alertMeta" className="monCallout--meta">
<EuiSpacer size="m" />
<p data-test-subj="alertMeta">
<FormattedMessage
id="xpack.monitoring.cluster.overview.alertsPanel.lastCheckedTimeText"
defaultMessage="Last checked {updateDateTime} (triggered {duration} ago)"
@@ -144,7 +145,8 @@ export function AlertsPanel({ alerts, changeUrl }) {
<EuiCallOut {...callOutProps}>
<p>{message}</p>
<EuiText size="xs">
<p data-test-subj="alertMeta" className="monCallout--meta">
<EuiSpacer size="m" />
<p data-test-subj="alertMeta">
<FormattedMessage
id="xpack.monitoring.cluster.overview.alertsPanel.lastCheckedTimeText"
defaultMessage="Last checked {updateDateTime} (triggered {duration} ago)"
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ import {
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
import './ccr.scss';

function toSeconds(ms) {
return Math.floor(ms / 1000) + 's';
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import './indices.scss';

const columns = [
{
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.monElasticsearchIndicesTable__status {
display: flex;
align-items: center;
}

This file was deleted.

Loading

0 comments on commit 2d1312f

Please sign in to comment.