[Logs UI] Clarify labels of log rate section (elastic#44108) (elastic…

…#44228) This clarifies a section title and view switcher labels on the log analysis tab. It also fixes the unit on the y axis label.
lukasolson · Aug 28, 2019 · 68f175b · 68f175b
1 parent 41c86e0
commit 68f175b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 38 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx
@@ -93,7 +93,7 @@ export const ChartView = ({ data }: Props) => {
           <Axis
             id={getAxisId('values')}
             title={i18n.translate('xpack.infra.logs.analysis.logRateSectionYaxisTitle', {
-              defaultMessage: 'Log entries',
+              defaultMessage: 'Log entries per minute',
             })}
             position="left"
             tickFormat={value => Number(value).toFixed(0)}

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
@@ -4,26 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
-import { i18n } from '@kbn/i18n';
 import {
-  EuiTitle,
+  EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingChart,
   EuiSpacer,
-  EuiEmptyPrompt,
+  EuiTitle,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useState } from 'react';
+
 import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
-import { ViewSwitcher } from './view_switcher';
 import { ChartView } from './chart';
+import { isValidLogRateView, LogRateView, LogRateViewSwitcher } from './log_rate_view_switcher';
 import { TableView } from './table';
 
-export enum ViewMode {
-  chart = 'chart',
-  table = 'table',
-}
-
 export const LogRateResults = ({
   isLoading,
   results,
@@ -32,15 +28,15 @@ export const LogRateResults = ({
   results: GetLogEntryRateSuccessResponsePayload['data'] | null;
 }) => {
   const title = i18n.translate('xpack.infra.logs.analysis.logRateSectionTitle', {
-    defaultMessage: 'Log entry anomalies',
+    defaultMessage: 'Log rate',
   });
 
   const loadingAriaLabel = i18n.translate(
     'xpack.infra.logs.analysis.logRateSectionLoadingAriaLabel',
     { defaultMessage: 'Loading log rate results' }
   );
 
-  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.chart);
+  const [viewMode, setViewMode] = useState<LogRateView>('chart');
 
   return (
     <>
@@ -77,15 +73,14 @@ export const LogRateResults = ({
         <>
           <EuiFlexGroup>
             <EuiFlexItem grow={true}>
-              <ViewSwitcher selectedView={viewMode} onChange={id => setViewMode(id as ViewMode)} />
+              <LogRateViewSwitcher
+                selectedView={viewMode}
+                onChange={id => (isValidLogRateView(id) ? setViewMode(id) : undefined)}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer size="l" />
-          {viewMode === ViewMode.chart ? (
-            <ChartView data={results} />
-          ) : (
-            <TableView data={results} />
-          )}
+          {viewMode === 'chart' ? <ChartView data={results} /> : <TableView data={results} />}
         </>
       )}
     </>

diff --git a/...lysis/sections/log_rate/view_switcher.tsx → ...tions/log_rate/log_rate_view_switcher.tsx b/...lysis/sections/log_rate/view_switcher.tsx → ...tions/log_rate/log_rate_view_switcher.tsx
@@ -7,39 +7,47 @@
 import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { ViewMode } from './index';
 
-interface Props {
-  selectedView: string;
+export type LogRateView = 'chart' | 'table';
+
+export const isValidLogRateView = (maybeView: string): maybeView is LogRateView =>
+  ['chart', 'table'].includes(maybeView);
+
+interface LogRateViewSwitcherProps {
+  selectedView: LogRateView;
   onChange: EuiButtonGroupProps['onChange'];
 }
 
 const chartLabel = i18n.translate(
   'xpack.infra.logs.analysis.logRateSection.viewSwitcher.chartLabel',
-  { defaultMessage: 'Chart view' }
+  { defaultMessage: 'Rate chart' }
 );
 const tableLabel = i18n.translate(
   'xpack.infra.logs.analysis.logRateSection.viewSwitcher.tableLabel',
-  { defaultMessage: 'Table view' }
+  { defaultMessage: 'Anomaly table' }
 );
 const legendLabel = i18n.translate(
   'xpack.infra.logs.analysis.logRateSection.viewSwitcher.legendLabel',
-  { defaultMessage: 'Switch between chart and table view' }
+  { defaultMessage: 'Switch between the log rate chart and the anomalies table view' }
 );
 
-export const ViewSwitcher = ({ selectedView, onChange }: Props) => {
-  const buttons = [
-    {
-      id: ViewMode.chart,
-      label: chartLabel,
-      iconType: 'apps',
-    },
-    {
-      id: ViewMode.table,
-      label: tableLabel,
-      iconType: 'editorUnorderedList',
-    },
-  ];
+const buttons = [
+  {
+    id: 'chart',
+    label: chartLabel,
+    iconType: 'apps',
+  },
+  {
+    id: 'table',
+    label: tableLabel,
+    iconType: 'editorUnorderedList',
+  },
+];
+
+export const LogRateViewSwitcher: React.FunctionComponent<LogRateViewSwitcherProps> = ({
+  selectedView,
+  onChange,
+}) => {
   return (
     <EuiButtonGroup
       legend={legendLabel}