[Stack Monitoring] Visual refresh changes

.github/CODEOWNERS

@@ -2542,7 +2542,6 @@ x-pack/solutions/security/plugins/security_solution/server/lib/security_integrat
 
 # Observability design
 /x-pack/platform/plugins/shared/fleet/**/*.scss @elastic/observability-design
-/x-pack/platform/plugins/private/monitoring/**/*.scss @elastic/observability-design
 
 # Ent. Search design
 /x-pack/solutions/search/plugins/enterprise_search/**/*.scss @elastic/search-design

x-pack/platform/plugins/private/monitoring/public/application/pages/logstash/node_pipelines.tsx

@@ -99,7 +99,7 @@ export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }
       {data.pipelines && (
         <div data-test-subj="logstashPipelinesListing">
           <PipelineListing
-            className="monitoringLogstashPipelinesTable"
+            data-test-subj="monitoringLogstashPipelinesTable"
             onBrush={onBrush}
             zoomInfo={zoomInfo}
             stats={data.nodeSummary}

x-pack/platform/plugins/private/monitoring/public/application/pages/logstash/pipelines.tsx

@@ -87,7 +87,7 @@ export const LogStashPipelinesPage: React.FC<ComponentProps> = ({ clusters }) =>
     const upgradeMessage = pageData ? makeUpgradeMessage(clusterStatus.versions) : null;
     return (
       <PipelineListing
-        className="monitoringLogstashPipelinesTable"
+        data-test-subj="monitoringLogstashPipelinesTable"
         onBrush={(xaxis: any) => onBrush({ xaxis })}
         stats={clusterStatus}
         data={pipelines}

x-pack/platform/plugins/private/monitoring/public/components/apm/instances/instances.tsx

@@ -65,14 +65,12 @@ function getColumns(setupMode: SetupMode, cgroup: unknown) {
           };
 
           setupModeStatus = (
-            <div className="monTableCell__setupModeStatus">
-              <SetupModeBadge
-                setupMode={setupMode}
-                status={status}
-                instance={instance}
-                productName={APM_SYSTEM_ID}
-              />
-            </div>
+            <SetupModeBadge
+              setupMode={setupMode}
+              status={status}
+              instance={instance}
+              productName={APM_SYSTEM_ID}
+            />
           );
         }
 
@@ -187,7 +185,7 @@ export function ApmServerInstances({ apms, setupMode, alerts }: Props) {
         <EuiPanel>
           {setupModeCallout}
           <EuiMonitoringTable
-            className="apmInstancesTable"
+            data-test-subj="apmInstancesTable"
             rows={data.apms}
             columns={getColumns(setupMode, data.cgroup)}
             sorting={sorting}

x-pack/platform/plugins/private/monitoring/public/components/beats/listing/listing.js

@@ -48,14 +48,12 @@ export class Listing extends PureComponent {
             };
 
             setupModeStatus = (
-              <div className="monTableCell__setupModeStatus">
-                <SetupModeBadge
-                  setupMode={setupMode}
-                  status={status}
-                  instance={instance}
-                  productName={BEATS_SYSTEM_ID}
-                />
-              </div>
+              <SetupModeBadge
+                setupMode={setupMode}
+                status={status}
+                instance={instance}
+                productName={BEATS_SYSTEM_ID}
+              />
             );
           }
 
@@ -161,7 +159,7 @@ export class Listing extends PureComponent {
           <EuiPanel>
             {setupModeCallOut}
             <EuiMonitoringTable
-              className="beatsTable"
+              data-test-subj="beatsTable"
               rows={data}
               setupMode={setupMode}
               productName={BEATS_SYSTEM_ID}

x-pack/platform/plugins/private/monitoring/public/components/chart/horizontal_legend.js → x-pack/platform/plugins/private/monitoring/public/components/chart/horizontal_legend.tsx

@@ -5,31 +5,86 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { MouseEvent } from 'react';
+import {
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiIcon,
+  UseEuiTheme,
+  euiFontSize,
+  logicalCSS,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import { includes, isFunction } from 'lodash';
-import { EuiFlexItem, EuiFlexGroup, EuiIcon } 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() {
-    super();
+const legendItemStyle = (isDisabled: boolean) => (theme: UseEuiTheme) =>
+  css`
+    display: flex;
+    font-size: ${euiFontSize(theme, 'xs').fontSize};
+    cursor: pointer;
+    color: ${theme.euiTheme.colors.textParagraph};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    ${isDisabled ? 'opacity: 0.5;' : ''}
+  `;
+
+const legendHorizontalStyle = ({ euiTheme }: UseEuiTheme) => css`
+  ${logicalCSS('margin-top', euiTheme.size.xs)}
+`;
+
+const legendLabelStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const legendValueStyle = ({ euiTheme }: UseEuiTheme) => css`
+  overflow: hidden;
+  white-space: nowrap;
+  ${logicalCSS('margin-left', euiTheme.size.xs)}
+`;
+
+interface Row {
+  id: string;
+  label: string;
+  legend?: boolean;
+  color?: string;
+  tickFormatter?: (arg: number) => number;
+}
+
+interface Props {
+  series: Row[];
+  seriesValues: { [key: string]: number };
+  seriesFilter: string[];
+  onToggle: (event: MouseEvent<HTMLButtonElement>, id: string) => void;
+  legendFormatter?: (value: number) => number;
+  tickFormatter?: (value: number) => number;
+}
+
+export class HorizontalLegend extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
     this.formatter = this.formatter.bind(this);
     this.createSeries = this.createSeries.bind(this);
   }
 
   /**
    * @param {Number} value Final value to display
    */
-  displayValue(value) {
-    return <span className="monRhythmChart__legendValue">{value}</span>;
+  displayValue(value: number) {
+    return <span css={legendValueStyle}>{value}</span>;
   }
 
   /**
    * @param {Number} value True if value is falsy and/or not a number
    */
-  validValue(value) {
+  validValue(value: number) {
     return value !== null && value !== undefined && (typeof value === 'string' || !isNaN(value));
   }
 
@@ -38,7 +93,7 @@ export class HorizontalLegend extends React.Component {
    * A null means no data for the time bucket and will be formatted as 'N/A'
    * @param {Object} row Props passed form a parent by row index
    */
-  formatter(value, row) {
+  formatter(value: number, row: Row) {
     if (!this.validValue(value)) {
       return (
         <FormattedMessage
@@ -48,7 +103,7 @@ export class HorizontalLegend extends React.Component {
       );
     }
 
-    if (row && row.tickFormatter) {
+    if (row?.tickFormatter) {
       return this.displayValue(row.tickFormatter(value));
     }
 
@@ -60,25 +115,19 @@ export class HorizontalLegend extends React.Component {
     return this.displayValue(value);
   }
 
-  createSeries(row, rowIdx) {
-    const classes = ['monRhythmChart__legendItem'];
-
-    if (!includes(this.props.seriesFilter, row.id)) {
-      classes.push('monRhythmChart__legendItem-isDisabled');
-    }
+  createSeries(row: Row, rowIdx: number) {
     if (!row.label || row.legend === false) {
       return <div key={rowIdx} style={{ display: 'none' }} />;
     }
 
     return (
       <EuiFlexItem grow={false} key={rowIdx}>
         <button
-          className={classes.join(' ')}
+          css={legendItemStyle(!includes(this.props.seriesFilter, row.id))}
           onClick={(event) => this.props.onToggle(event, row.id)}
         >
-          <span className="monRhythmChart__legendLabel">
+          <span css={legendLabelStyle}>
             <EuiIcon
-              className="monRhythmChart__legendIndicator"
               aria-label={i18n.translate(
                 'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
                 { defaultMessage: 'toggle button' }
@@ -87,7 +136,7 @@ export class HorizontalLegend extends React.Component {
               type="dot"
               color={row.color}
             />
-            {' ' + row.label + ' '}
+            {` ${row.label} `}
           </span>
           {this.formatter(this.props.seriesValues[row.id], row)}
         </button>
@@ -99,8 +148,8 @@ export class HorizontalLegend extends React.Component {
     const rows = this.props.series.map(this.createSeries);
 
     return (
-      <div className="monRhythmChart__legendHorizontal">
-        <EuiFlexGroup wrap={true} gutterSize="s" className="monRhythmChart__legendSeries">
+      <div css={legendHorizontalStyle}>
+        <EuiFlexGroup wrap={true} gutterSize="s">
           {rows}
         </EuiFlexGroup>
       </div>

x-pack/platform/plugins/private/monitoring/public/components/chart/info_tooltip.js → x-pack/platform/plugins/private/monitoring/public/components/chart/info_tooltip.tsx

@@ -6,10 +6,36 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
+import { euiFontSize, UseEuiTheme } from '@elastic/eui';
+
 import { FormattedMessage } from '@kbn/i18n-react';
-import './info_tooltip.scss';
 
-export function InfoTooltip({ series, bucketSize }) {
+import { Series } from './types';
+
+const tooltipLabelStyle = (theme: UseEuiTheme) => css`
+  text-align: left;
+  font-size: ${euiFontSize(theme, 'xs').fontSize};
+  padding: ${theme.euiTheme.size.xs};
+  word-wrap: break-word;
+  white-space: normal;
+  font-weight: ${theme.euiTheme.font.weight.bold};
+`;
+
+const tooltipValueStyle = (theme: UseEuiTheme) => css`
+  text-align: left;
+  font-size: ${euiFontSize(theme, 'xs').fontSize};
+  padding: ${theme.euiTheme.size.xs};
+  word-wrap: break-word;
+  white-space: normal;
+`;
+
+interface Props {
+  series: Series[];
+  bucketSize?: string;
+}
+
+export function InfoTooltip({ series, bucketSize }: Props) {
   const tableRows = series.map((item, index) => {
     return (
       <tr
@@ -19,8 +45,8 @@ export function InfoTooltip({ series, bucketSize }) {
         data-debug-metric-is-derivative={item.metric.isDerivative}
         data-debug-metric-has-calculation={item.metric.hasCalculation}
       >
-        <td className="monChart__tooltipLabel">{item.metric.label}</td>
-        <td className="monChart__tooltipValue">{item.metric.description}</td>
+        <td css={tooltipLabelStyle}>{item.metric.label}</td>
+        <td css={tooltipValueStyle}>{item.metric.description}</td>
       </tr>
     );
   });
@@ -29,13 +55,13 @@ export function InfoTooltip({ series, bucketSize }) {
     <table>
       <tbody>
         <tr>
-          <td className="monChart__tooltipLabel">
+          <td css={tooltipLabelStyle}>
             <FormattedMessage
               id="xpack.monitoring.chart.infoTooltip.intervalLabel"
               defaultMessage="Interval"
             />
           </td>
-          <td className="monChart__tooltipValue">{bucketSize}</td>
+          <td css={tooltipValueStyle}>{bucketSize}</td>
         </tr>
         {tableRows}
       </tbody>