translate InfraOps visualization component (Part 2) (#25212)

* translate InfraOps visualization component (Part 2 - part of folder components and root files) * update translation of Beats Management vizualization component (Part 2) * update translation of Infra Ops vizualization component (Part 2) * update translation of Infra Ops vizualization component (Part 2) * update translation of Infra Ops vizualization component (Part 2) * change some ids and add some logic * update Infra Ops Part 2 - directly wrap some classes by injectI18n() * Update Infra Part-II change some code * update Infra-II - add static to displayName, add needed translations * update Infra-II - fix errors wich broke CI * update Infra-II - fix errors wich broke CI * update Infra-II - fix errors * update Infra-II - fix errors in group_by_controls * update Infra-II - update nodeType in files with errors * update Infra-II * update Infra-II * update Infra-II - update one type * add one empty line, use lodash get method
opensearch-project · Nov 29, 2018 · 584e68f · 584e68f
1 parent 9e94fef
commit 584e68f
Show file tree

Hide file tree

Showing 15 changed files with 1,392 additions and 842 deletions.
diff --git a/src/ui/public/registry/feature_catalogue.d.ts b/src/ui/public/registry/feature_catalogue.d.ts
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { I18nServiceType } from '@kbn/i18n/angular';
+
 export enum FeatureCatalogueCategory {
   ADMIN = 'admin',
   DATA = 'data',
@@ -33,7 +35,7 @@ interface FeatureCatalogueObject {
   category: FeatureCatalogueCategory;
 }
 
-type FeatureCatalogueRegistryFunction = () => FeatureCatalogueObject;
+type FeatureCatalogueRegistryFunction = (i18n: I18nServiceType) => FeatureCatalogueObject;
 
 export const FeatureCatalogueRegistryProvider: {
   register: (fn: FeatureCatalogueRegistryFunction) => void;

diff --git a/x-pack/plugins/infra/index.ts b/x-pack/plugins/infra/index.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import JoiNamespace from 'joi';
 import { resolve } from 'path';
 
@@ -19,31 +20,43 @@ export function infra(kibana: any) {
     require: ['kibana', 'elasticsearch'],
     uiExports: {
       app: {
-        description: 'Explore your infrastructure',
+        description: i18n.translate('xpack.infra.infrastructureDescription', {
+          defaultMessage: 'Explore your infrastructure',
+        }),
         icon: 'plugins/infra/images/infra_mono_white.svg',
         main: 'plugins/infra/app',
-        title: 'Infrastructure',
+        title: i18n.translate('xpack.infra.infrastructureTitle', {
+          defaultMessage: 'Infrastructure',
+        }),
         listed: false,
         url: `/app/${APP_ID}#/home`,
       },
       home: ['plugins/infra/register_feature'],
       links: [
         {
-          description: 'Explore your infrastructure',
+          description: i18n.translate('xpack.infra.linkInfrastructureDescription', {
+            defaultMessage: 'Explore your infrastructure',
+          }),
           icon: 'plugins/infra/images/infra_mono_white.svg',
           euiIconType: 'infraApp',
           id: 'infra:home',
           order: 8000,
-          title: 'Infrastructure',
+          title: i18n.translate('xpack.infra.linkInfrastructureTitle', {
+            defaultMessage: 'Infrastructure',
+          }),
           url: `/app/${APP_ID}#/home`,
         },
         {
-          description: 'Explore your logs',
+          description: i18n.translate('xpack.infra.linkLogsDescription', {
+            defaultMessage: 'Explore your logs',
+          }),
           icon: 'plugins/infra/images/logging_mono_white.svg',
           euiIconType: 'loggingApp',
           id: 'infra:logs',
           order: 8001,
-          title: 'Logs',
+          title: i18n.translate('xpack.infra.linkLogsTitle', {
+            defaultMessage: 'Logs',
+          }),
           url: `/app/${APP_ID}#/logs`,
         },
       ],

diff --git a/x-pack/plugins/infra/public/components/metrics/index.tsx b/x-pack/plugins/infra/public/components/metrics/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { EuiPageContentBody, EuiTitle } from '@elastic/eui';
+import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { InfraMetricData } from '../../../common/graphql/types';
@@ -19,66 +20,87 @@ interface Props {
   loading: boolean;
   nodeName: string;
   onChangeRangeTime?: (time: metricTimeActions.MetricRangeTimeState) => void;
+  intl: InjectedIntl;
 }
 
 interface State {
   crosshairValue: number | null;
 }
 
-export class Metrics extends React.PureComponent<Props, State> {
-  public readonly state = {
-    crosshairValue: null,
-  };
+export const Metrics = injectI18n(
+  class extends React.PureComponent<Props, State> {
+    public static displayName = 'Metrics';
+    public readonly state = {
+      crosshairValue: null,
+    };
 
-  public render() {
-    if (this.props.loading) {
-      return (
-        <InfraLoadingPanel
-          height="100vh"
-          width="auto"
-          text={`Loading data for ${this.props.nodeName}`}
-        />
-      );
+    public render() {
+      const { intl } = this.props;
+      if (this.props.loading) {
+        return (
+          <InfraLoadingPanel
+            height="100vh"
+            width="auto"
+            text={intl.formatMessage(
+              {
+                id: 'xpack.infra.metrics.loadingNodeDataText',
+                defaultMessage: 'Loading data for {nodeName}',
+              },
+              {
+                nodeName: this.props.nodeName,
+              }
+            )}
+          />
+        );
+      }
+      return <React.Fragment>{this.props.layouts.map(this.renderLayout)}</React.Fragment>;
     }
-    return <React.Fragment>{this.props.layouts.map(this.renderLayout)}</React.Fragment>;
-  }
 
-  private renderLayout = (layout: InfraMetricLayout) => {
-    return (
-      <React.Fragment key={layout.id}>
-        <EuiPageContentBody>
-          <EuiTitle size="m">
-            <h2 id={layout.id}>{`${layout.label} Overview`}</h2>
-          </EuiTitle>
-        </EuiPageContentBody>
-        {layout.sections.map(this.renderSection(layout))}
-      </React.Fragment>
-    );
-  };
+    private renderLayout = (layout: InfraMetricLayout) => {
+      return (
+        <React.Fragment key={layout.id}>
+          <EuiPageContentBody>
+            <EuiTitle size="m">
+              <h2 id={layout.id}>
+                <FormattedMessage
+                  id="xpack.infra.metrics.layoutLabelOverviewTitle"
+                  defaultMessage="{layoutLabel} Overview"
+                  values={{
+                    layoutLabel: layout.label,
+                  }}
+                />
+              </h2>
+            </EuiTitle>
+          </EuiPageContentBody>
+          {layout.sections.map(this.renderSection(layout))}
+        </React.Fragment>
+      );
+    };
 
-  private renderSection = (layout: InfraMetricLayout) => (section: InfraMetricLayoutSection) => {
-    let sectionProps = {};
-    if (section.type === 'chart') {
-      const { onChangeRangeTime } = this.props;
-      sectionProps = {
-        onChangeRangeTime,
-        crosshairValue: this.state.crosshairValue,
-        onCrosshairUpdate: this.onCrosshairUpdate,
-      };
-    }
-    return (
-      <Section
-        section={section}
-        metrics={this.props.metrics}
-        key={`${layout.id}-${section.id}`}
-        {...sectionProps}
-      />
-    );
-  };
+    private renderSection = (layout: InfraMetricLayout) => (section: InfraMetricLayoutSection) => {
+      let sectionProps = {};
+      if (section.type === 'chart') {
+        const { onChangeRangeTime } = this.props;
+        sectionProps = {
+          onChangeRangeTime,
+          crosshairValue: this.state.crosshairValue,
+          onCrosshairUpdate: this.onCrosshairUpdate,
+        };
+      }
+      return (
+        <Section
+          section={section}
+          metrics={this.props.metrics}
+          key={`${layout.id}-${section.id}`}
+          {...sectionProps}
+        />
+      );
+    };
 
-  private onCrosshairUpdate = (crosshairValue: number) => {
-    this.setState({
-      crosshairValue,
-    });
-  };
-}
+    private onCrosshairUpdate = (crosshairValue: number) => {
+      this.setState({
+        crosshairValue,
+      });
+    };
+  }
+);