mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
Andrea Del Rio
GitHub
parent
5a33bbe0cf
commit
e0ded2710b
60 changed files with 315 additions and 336 deletions
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'chart';
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.monRhythmChart__wrapper .monRhythmChart__zoom {
|
||||
visibility: hidden;
|
||||
padding-right: $euiSizeM;
|
||||
}
|
||||
|
||||
.monRhythmChart__wrapper:hover .monRhythmChart__zoom {
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -19,6 +19,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';
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import './indices.scss';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.monElasticsearchIndicesTable__status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'shard_allocation';
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
exports[`Shard should show for assigned primary shards 1`] = `
|
||||
<div
|
||||
className="shard primary started master"
|
||||
data-shard-classification="shard primary started master 0"
|
||||
className="shard monShard primary started master"
|
||||
data-shard-classification="shard monShard primary started master 0"
|
||||
data-shard-tooltip="Started"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
@ -19,8 +19,8 @@ exports[`Shard should show for assigned primary shards 1`] = `
|
|||
|
||||
exports[`Shard should show for assigned replica shards 1`] = `
|
||||
<div
|
||||
className="shard replica started master"
|
||||
data-shard-classification="shard replica started master 0"
|
||||
className="shard monShard replica started master"
|
||||
data-shard-classification="shard monShard replica started master 0"
|
||||
data-shard-tooltip="Started"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
@ -36,8 +36,8 @@ exports[`Shard should show for assigned replica shards 1`] = `
|
|||
|
||||
exports[`Shard should show for initializing shards 1`] = `
|
||||
<div
|
||||
className="shard primary initializing master"
|
||||
data-shard-classification="shard primary initializing master 0"
|
||||
className="shard monShard primary initializing master"
|
||||
data-shard-classification="shard monShard primary initializing master 0"
|
||||
data-shard-tooltip="Initializing"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
@ -53,8 +53,8 @@ exports[`Shard should show for initializing shards 1`] = `
|
|||
|
||||
exports[`Shard should show for relocating shards 1`] = `
|
||||
<div
|
||||
className="shard primary relocating master"
|
||||
data-shard-classification="shard primary relocating master 0"
|
||||
className="shard monShard primary relocating master"
|
||||
data-shard-classification="shard monShard primary relocating master 0"
|
||||
data-shard-tooltip="Relocating"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
@ -70,8 +70,8 @@ exports[`Shard should show for relocating shards 1`] = `
|
|||
|
||||
exports[`Shard should show unassigned primary shards 1`] = `
|
||||
<div
|
||||
className="shard primary unassigned emergency master"
|
||||
data-shard-classification="shard primary unassigned emergency master 0"
|
||||
className="shard monShard primary unassigned emergency master"
|
||||
data-shard-classification="shard monShard primary unassigned emergency master 0"
|
||||
data-shard-tooltip="Unassigned"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
@ -87,8 +87,8 @@ exports[`Shard should show unassigned primary shards 1`] = `
|
|||
|
||||
exports[`Shard should show unassigned replica shards 1`] = `
|
||||
<div
|
||||
className="shard replica unassigned"
|
||||
data-shard-classification="shard replica unassigned 0"
|
||||
className="shard monShard replica unassigned"
|
||||
data-shard-classification="shard monShard replica unassigned 0"
|
||||
data-shard-tooltip="Unassigned"
|
||||
data-test-subj="shardIcon"
|
||||
onMouseEnter={[Function]}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ export class Assigned extends React.Component {
|
|||
createChild = (data) => {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`CollapsibleStatement component renders child components 1`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__collapsibleStatement"
|
||||
gutterSize="none"
|
||||
responsive={false}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
@ -75,7 +75,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
|
|||
exports[`PluginStatement component adds warning highlight for event millis 1`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
@ -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`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
@ -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`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
@ -257,7 +257,7 @@ exports[`PluginStatement component renders input metrics and explicit id fields
|
|||
exports[`PluginStatement component renders processor statement metrics 1`] = `
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'pipeline_viewer';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
>
|
||||
<EuiFlexItem key={id} grow={false}>
|
||||
<EuiButtonIcon
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.monPipelineViewer__collapsibleStatement {
|
||||
padding-left: $euiSizeM;
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@ import {
|
|||
import { Sparkline } from '../../../sparkline';
|
||||
import { formatMetric } from '../../../../lib/format_number';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import './detail_drawer.scss';
|
||||
|
||||
function renderIcon(vertex) {
|
||||
return <EuiIcon type={vertex.iconType} className="lspvDetailDrawerIcon" />;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
// SASSTODO: Why is this width here?
|
||||
.lspvDetailDrawerSparklineContainer {
|
||||
width: 7vw;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
className="monPipelineViewer__statement"
|
||||
className="monPipelineViewer__pluginStatement"
|
||||
gutterSize="none"
|
||||
justifyContent="spaceBetween"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
.monPipelineViewer__plugin {
|
||||
margin-left: $euiSizeXS;
|
||||
}
|
||||
|
||||
.monPipelineViewer__pluginStatement {
|
||||
padding-left: $euiSizeM;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.monPipelineViewer__queueMessage {
|
||||
margin-left: $euiSizeL;
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'no_data';
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.noData__content {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ exports[`PageLoading should show a simple page loading component 1`] = `
|
|||
class="euiPageBody"
|
||||
>
|
||||
<div
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter noData__content"
|
||||
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter monNoData__content"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
EuiLoadingSpinner,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import './page_loading.scss';
|
||||
|
||||
export function PageLoading() {
|
||||
return (
|
||||
|
|
@ -22,7 +23,7 @@ export function PageLoading() {
|
|||
<EuiPageContent
|
||||
verticalPosition="center"
|
||||
horizontalPosition="center"
|
||||
className="noData__content"
|
||||
className="monNoData__content"
|
||||
>
|
||||
<EuiFlexGroup justifyContent="spaceAround">
|
||||
<EuiFlexItem grow={false}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.monNoData__content {
|
||||
max-width: $euiSizeM * 50;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'enter_button';
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'sparkline';
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
intl="[object Object]"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero eui-textTruncate"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -25,7 +26,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
Status:
|
||||
</p>
|
||||
|
|
@ -47,9 +48,10 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="transportAddress"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -60,7 +62,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
127.0.0.1:9300
|
||||
</p>
|
||||
|
|
@ -74,9 +76,10 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="documentCount"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -89,7 +92,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
24.8k
|
||||
</p>
|
||||
|
|
@ -110,14 +113,15 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
|
|||
intl="[object Object]"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="freeDiskSpace"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -130,7 +134,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
173.9 GB
|
||||
</p>
|
||||
|
|
@ -144,9 +148,10 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
|
|||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="documentCount"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -159,7 +164,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
24.8k
|
||||
</p>
|
||||
|
|
@ -180,13 +185,14 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
intl="[object Object]"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero eui-textTruncate"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -199,7 +205,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
Status:
|
||||
</p>
|
||||
|
|
@ -221,9 +227,10 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="freeDiskSpace"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -236,7 +243,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
173.9 GB
|
||||
</p>
|
||||
|
|
@ -250,9 +257,10 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
data-test-subj="documentCount"
|
||||
style="max-width:200px"
|
||||
>
|
||||
<div
|
||||
class="euiStat euiStat--leftAligned"
|
||||
class="euiStat euiStat--leftAligned monSummaryStatusNoWrap__stat"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--small euiStat__description"
|
||||
|
|
@ -265,7 +273,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
|
|||
</div>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="euiTitle euiTitle--xsmall euiStat__title"
|
||||
class="euiTitle euiTitle--xxxsmall euiStat__title"
|
||||
>
|
||||
24.8k
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'summary_status';
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.monSummaryStatusNoWrap {
|
||||
margin-left: $euiSizeM;
|
||||
margin-right: $euiSizeM;
|
||||
.euiTitle {
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
@include euiFontSizeXS;
|
||||
}
|
||||
|
||||
.euiFlexItem {
|
||||
margin: $euiSizeS;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) => (
|
||||
<EuiFlexItem key={`summary-status-item-${index}`} grow={false} {...props}>
|
||||
<EuiStat title={value} titleSize="xs" textAlign="left" description={label ? `${label}` : ''} />
|
||||
<EuiFlexItem
|
||||
style={{ maxWidth: 200 }}
|
||||
key={`summary-status-item-${index}`}
|
||||
grow={false}
|
||||
{...props}
|
||||
>
|
||||
<EuiStat
|
||||
title={value}
|
||||
className="monSummaryStatusNoWrap__stat"
|
||||
titleSize="xxxs"
|
||||
textAlign="left"
|
||||
description={label ? `${label}` : ''}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
|
||||
|
|
@ -46,7 +58,12 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<EuiFlexItem key={`summary-status-item-status`} grow={false}>
|
||||
<EuiFlexItem
|
||||
className="eui-textTruncate"
|
||||
style={{ maxWidth: 200 }}
|
||||
key={`summary-status-item-status`}
|
||||
grow={false}
|
||||
>
|
||||
<EuiStat
|
||||
title={
|
||||
<Fragment>
|
||||
|
|
@ -55,8 +72,9 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
|
|||
{capitalize(status)}
|
||||
</Fragment>
|
||||
}
|
||||
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 (
|
||||
<div {...props} className="monSummaryStatusNoWrap">
|
||||
<EuiFlexGroup justifyContent="spaceBetween">
|
||||
<EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="spaceBetween">
|
||||
<StatusIndicator status={status} IconComponent={IconComponent} isOnline={isOnline} />
|
||||
{metrics.map(wrapChild)}
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.monSummaryStatusNoWrap {
|
||||
margin-left: $euiSizeM;
|
||||
margin-right: $euiSizeM;
|
||||
|
||||
.monSummaryStatusNoWrap__stat {
|
||||
p {
|
||||
@include euiTextTruncate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'table';
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue