[Logs UI] Fix log rate analysis tab title and route (#49646)

This aligns the log rate analysis tab title with the requirements. It also changes the sub-route from `analysis` to `log-rate` and performs some additional cleanup in anticipation of the soon-to-be-added category analysis tab. The page redirects from `/logs/analysis` to `/logs/log-rate` to reduce confusion in the build candidates. fixes #49198
elastic · Oct 30, 2019 · 019ee92 · 019ee92
1 parent 27c464e
commit 019ee92
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 70 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx
@@ -4,9 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTab, EuiTabs, EuiLink } from '@elastic/eui';
+import { EuiBetaBadge, EuiLink, EuiTab, EuiTabs } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route } from 'react-router-dom';
+
 import euiStyled from '../../../../../common/eui_styled_components';
 
 interface TabConfiguration {
@@ -54,6 +56,24 @@ export class RoutedTabs extends React.Component<RoutedTabsProps> {
   }
 }
 
+const tabBetaBadgeLabel = i18n.translate('xpack.infra.common.tabBetaBadgeLabel', {
+  defaultMessage: 'Beta',
+});
+
+const tabBetaBadgeTooltipContent = i18n.translate('xpack.infra.common.tabBetaBadgeTooltipContent', {
+  defaultMessage:
+    'This feature is under active development. Extra functionality is coming, and some functionality may change.',
+});
+
+export const TabBetaBadge = euiStyled(EuiBetaBadge).attrs({
+  'aria-label': tabBetaBadgeLabel,
+  label: tabBetaBadgeLabel,
+  tooltipContent: tabBetaBadgeTooltipContent,
+})`
+  margin-left: 4px;
+  vertical-align: baseline;
+`;
+
 const TabContainer = euiStyled.div`
   .euiLink {
     color: inherit !important;

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { EuiBetaBadge } from '@elastic/eui';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { UICapabilities } from 'ui/capabilities';
@@ -14,7 +13,7 @@ import { injectUICapabilities } from 'ui/capabilities/react';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { Header } from '../../components/header';
-import { RoutedTabs } from '../../components/navigation/routed_tabs';
+import { RoutedTabs, TabBetaBadge } from '../../components/navigation/routed_tabs';
 import { ColumnarPage } from '../../components/page';
 import { SourceLoadingPage } from '../../components/source_loading_page';
 import { SourceErrorPage } from '../../components/source_error_page';
@@ -28,6 +27,7 @@ import {
   LogAnalysisCapabilities,
 } from '../../containers/logs/log_analysis';
 import { useSourceId } from '../../containers/source_id';
+import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
 
 interface LogsPageProps extends RouteComponentProps {
   uiCapabilities: UICapabilities;
@@ -39,76 +39,32 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
   const logAnalysisCapabilities = useLogAnalysisCapabilities();
 
   const streamTab = {
-    title: i18n.translate('xpack.infra.logs.index.streamTabTitle', { defaultMessage: 'Stream' }),
+    title: streamTabTitle,
     path: `${match.path}/stream`,
   };
-  const analysisBetaBadgeTitle = i18n.translate('xpack.infra.logs.index.analysisBetaBadgeTitle', {
-    defaultMessage: 'Analysis',
-  });
-  const analysisBetaBadgeLabel = i18n.translate('xpack.infra.logs.index.analysisBetaBadgeLabel', {
-    defaultMessage: 'Beta',
-  });
-  const analysisBetaBadgeTooltipContent = i18n.translate(
-    'xpack.infra.logs.index.analysisBetaBadgeTooltipContent',
-    {
-      defaultMessage:
-        'This feature is under active development. Extra functionality is coming, and some functionality may change.',
-    }
-  );
-  const analysisBetaBadge = (
-    <EuiBetaBadge
-      label={analysisBetaBadgeLabel}
-      aria-label={analysisBetaBadgeLabel}
-      title={analysisBetaBadgeTitle}
-      tooltipContent={analysisBetaBadgeTooltipContent}
-    />
-  );
-  const analysisTab = {
+
+  const logRateTab = {
     title: (
       <>
-        <span
-          style={{
-            display: 'inline-block',
-            position: 'relative',
-            top: '-4px',
-            marginRight: '5px',
-          }}
-        >
-          {i18n.translate('xpack.infra.logs.index.analysisTabTitle', {
-            defaultMessage: 'Analysis',
-          })}
-        </span>
-        {analysisBetaBadge}
+        {logRateTabTitle}
+        <TabBetaBadge title={logRateTabTitle} />
       </>
     ),
-    path: `${match.path}/analysis`,
+    path: `${match.path}/log-rate`,
   };
+
   const settingsTab = {
-    title: i18n.translate('xpack.infra.logs.index.settingsTabTitle', {
-      defaultMessage: 'Settings',
-    }),
+    title: settingsTabTitle,
     path: `${match.path}/settings`,
   };
-  const pageTitle = i18n.translate('xpack.infra.header.logsTitle', {
-    defaultMessage: 'Logs',
-  });
+
   return (
     <Source.Context.Provider value={source}>
       <LogAnalysisCapabilities.Context.Provider value={logAnalysisCapabilities}>
         <ColumnarPage>
-          <DocumentTitle
-            title={i18n.translate('xpack.infra.logs.index.documentTitle', {
-              defaultMessage: 'Logs',
-            })}
-          />
+          <DocumentTitle title={pageTitle} />
 
-          <HelpCenterContent
-            feedbackLink="https://discuss.elastic.co/c/logs"
-            feedbackLinkText={i18n.translate(
-              'xpack.infra.logsPage.logsHelpContent.feedbackLinkText',
-              { defaultMessage: 'Provide feedback for Logs' }
-            )}
-          />
+          <HelpCenterContent feedbackLink={feedbackLinkUrl} feedbackLinkText={feedbackLinkText} />
 
           <Header
             breadcrumbs={[
@@ -134,16 +90,21 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
                 <RoutedTabs
                   tabs={
                     logAnalysisCapabilities.hasLogAnalysisCapabilites
-                      ? [streamTab, analysisTab, settingsTab]
+                      ? [streamTab, logRateTab, settingsTab]
                       : [streamTab, settingsTab]
                   }
                 />
               </AppNavigation>
 
               <Switch>
-                <Route path={`${match.path}/stream`} component={StreamPage} />
-                <Route path={`${match.path}/analysis`} component={AnalysisPage} />
-                <Route path={`${match.path}/settings`} component={SettingsPage} />
+                <Route path={streamTab.path} component={StreamPage} />
+                <Route path={logRateTab.path} component={AnalysisPage} />
+                <Route path={settingsTab.path} component={SettingsPage} />
+                <RedirectWithQueryParams
+                  from={`${match.path}/analysis`}
+                  to={logRateTab.path}
+                  exact
+                />
               </Switch>
             </>
           )}
@@ -152,3 +113,25 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
     </Source.Context.Provider>
   );
 });
+
+const pageTitle = i18n.translate('xpack.infra.header.logsTitle', {
+  defaultMessage: 'Logs',
+});
+
+const streamTabTitle = i18n.translate('xpack.infra.logs.index.streamTabTitle', {
+  defaultMessage: 'Stream',
+});
+
+const logRateTabTitle = i18n.translate('xpack.infra.logs.index.analysisBetaBadgeTitle', {
+  defaultMessage: 'Log Rate',
+});
+
+const settingsTabTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle', {
+  defaultMessage: 'Settings',
+});
+
+const feedbackLinkText = i18n.translate('xpack.infra.logsPage.logsHelpContent.feedbackLinkText', {
+  defaultMessage: 'Provide feedback for Logs',
+});
+
+const feedbackLinkUrl = 'https://discuss.elastic.co/c/logs';
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5063,11 +5063,7 @@
     "xpack.infra.logs.analysisPage.unavailable.mLDisabledTitle": "分析機能には機械学習が必要です",
     "xpack.infra.logs.highlights.goToNextHighlightButtonLabel": "次のハイライトにスキップ",
     "xpack.infra.logs.highlights.goToPreviousHighlightButtonLabel": "前のハイライトにスキップ",
-    "xpack.infra.logs.index.analysisBetaBadgeLabel": "ベータ",
     "xpack.infra.logs.index.analysisBetaBadgeTitle": "分析",
-    "xpack.infra.logs.index.analysisBetaBadgeTooltipContent": "この機能は現在開発中です。他にも機能が追加され、機能によっては変更されるものもあります。",
-    "xpack.infra.logs.index.analysisTabTitle": "分析",
-    "xpack.infra.logs.index.documentTitle": "ログ",
     "xpack.infra.logs.index.settingsTabTitle": "設定",
     "xpack.infra.logs.index.streamTabTitle": "ストリーム",
     "xpack.infra.logs.logsAnalysisResults.onboardingSuccessContent": "機械学習ロボットがデータの収集を開始するまでしばらくお待ちください。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5064,11 +5064,7 @@
     "xpack.infra.logs.analysisPage.unavailable.mLDisabledTitle": "分析功能需要 Machine Learning",
     "xpack.infra.logs.highlights.goToNextHighlightButtonLabel": "跳转到下一高亮条目",
     "xpack.infra.logs.highlights.goToPreviousHighlightButtonLabel": "跳转到上一高亮条目",
-    "xpack.infra.logs.index.analysisBetaBadgeLabel": "公测版",
     "xpack.infra.logs.index.analysisBetaBadgeTitle": "分析",
-    "xpack.infra.logs.index.analysisBetaBadgeTooltipContent": "此功能仍处于开发状态。额外功能即将推出，某些功能可能会有变更。",
-    "xpack.infra.logs.index.analysisTabTitle": "分析",
-    "xpack.infra.logs.index.documentTitle": "Logs",
     "xpack.infra.logs.index.settingsTabTitle": "设置",
     "xpack.infra.logs.index.streamTabTitle": "流式传输",
     "xpack.infra.logs.logsAnalysisResults.onboardingSuccessContent": "请注意，我们的 Machine Learning 机器人若干分钟后才会开始收集数据。",