Translations files for dashboard and components (elastic#92)

x-pack/plugins/cloud_security_posture/public/components/csp_health_badge.tsx

@@ -8,14 +8,15 @@
 import React from 'react';
 import { EuiBadge } from '@elastic/eui';
 import type { Score } from '../../common/types';
+import * as TEXT from './translations';
 
 interface Props {
   value: Score;
 }
 
 export const CspHealthBadge = ({ value }: Props) => {
-  if (value <= 65) return <EuiBadge color="danger">{'Critical'}</EuiBadge>;
-  if (value <= 86) return <EuiBadge color="warning">{'Warning'}</EuiBadge>;
-  if (value <= 100) return <EuiBadge color="success">{'Healthy'}</EuiBadge>;
+  if (value <= 65) return <EuiBadge color="danger">{TEXT.CRITICAL}</EuiBadge>;
+  if (value <= 86) return <EuiBadge color="warning">{TEXT.WARNING}</EuiBadge>;
+  if (value <= 100) return <EuiBadge color="success">{TEXT.HEALTHY}</EuiBadge>;
   return null;
 };

x-pack/plugins/cloud_security_posture/public/components/translations.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CRITICAL = i18n.translate('xpack.csp.critical', {
+  defaultMessage: 'Critical',
+});
+
+export const WARNING = i18n.translate('xpack.csp.warning', {
+  defaultMessage: 'Warning',
+});
+
+export const HEALTHY = i18n.translate('xpack.csp.healthy', {
+  defaultMessage: 'Healthy',
+});
+
+export const PAGE_NOT_FOUND = i18n.translate('xpack.csp.page_not_found', {
+  defaultMessage: 'Page not found',
+});

x-pack/plugins/cloud_security_posture/public/components/unknown_route.tsx

@@ -6,21 +6,17 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { CspPageTemplate } from './page_template';
+import * as TEXT from './translations';
 
 export const UnknownRoute = React.memo(() => (
   <CspPageTemplate template="centeredContent">
     <EuiEmptyPrompt
       data-test-subj="unknownRoute"
       iconColor="default"
       iconType="logoElastic"
-      title={
-        <p>
-          <FormattedMessage id="xpack.csp.unknownRoute" defaultMessage="Page not found" />
-        </p>
-      }
+      title={<p>{TEXT.PAGE_NOT_FOUND}</p>}
     />
   </CspPageTemplate>
 ));

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx

@@ -19,6 +19,7 @@ import type { PartitionElementEvent } from '@elastic/charts';
 import { statusColors } from '../../../common/constants';
 import type { BenchmarkStats } from '../../../../common/types';
 import { useNavigateToCspFindings } from '../../../common/navigation/use_navigate_to_csp_findings';
+import * as TEXT from '../translations';
 
 interface CloudPostureScoreChartProps {
   data: BenchmarkStats;
@@ -44,8 +45,8 @@ export const CloudPostureScoreChart = ({
   const percentage = `${((totalPassed / total) * 100).toFixed(1)}%`;
 
   const data = [
-    { label: 'Passed', value: totalPassed },
-    { label: 'Failed', value: totalFailed },
+    { label: TEXT.PASSED, value: totalPassed },
+    { label: TEXT.FAILEd, value: totalFailed },
   ];
 
   return (

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx

@@ -20,6 +20,7 @@ import type { IconType, EuiStatProps } from '@elastic/eui';
 import { useCloudPostureStatsApi } from '../../../common/api';
 import { statusColors } from '../../../common/constants';
 import { Score } from '../../../../common/types';
+import * as TEXT from '../translations';
 
 // type Trend = Array<[time: number, value: number]>;
 
@@ -77,14 +78,14 @@ export const ComplianceStats = () => {
   const stats = [
     {
       title: postureScore,
-      description: 'Posture Score',
+      description: TEXT.POSTURE_SCORE,
       titleColor: getTitleColor(postureScore),
       iconType: getScoreIcon(postureScore),
     },
     {
       // TODO: remove placeholder for the commented out component, needs BE
       title: placeholder,
-      description: 'Posture Score Trend',
+      description: TEXT.POSTURE_SCORE_TREND,
     },
     // {
     //   title: (
@@ -123,12 +124,12 @@ export const ComplianceStats = () => {
     {
       // TODO: this should count only ACTIVE benchmarks. needs BE
       title: benchmarks.length,
-      description: 'Active Frameworks',
+      description: TEXT.ACTIVE_FRAMEWORKS,
     },
     {
       // TODO: should be relatively simple to return from BE. needs BE
       title: placeholder,
-      description: 'Total Resources',
+      description: TEXT.TOTAL_RESOURCES,
     },
   ];
 

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx

@@ -15,21 +15,18 @@ import {
   AreaSeries,
 } from '@elastic/charts';
 
-export const ComplianceTrendChart = () => {
-  return (
-    <Chart size={{ height: 200 }}>
-      <Settings showLegend={false} legendPosition="right" />
-      <AreaSeries
-        id="compliance_score"
-        name="Compliance Score"
-        // TODO: no api for this chart yet, using empty state for now. needs BE
-        data={[]}
-        xScaleType="time"
-        xAccessor={0}
-        yAccessors={[1]}
-      />
-      <Axis id="bottom-axis" position="bottom" tickFormat={timeFormatter(niceTimeFormatByDay(1))} />
-      <Axis ticks={4} id="left-axis" position="left" showGridLines domain={{ min: 0, max: 100 }} />
-    </Chart>
-  );
-};
+export const ComplianceTrendChart = () => (
+  <Chart size={{ height: 200 }}>
+    <Settings showLegend={false} legendPosition="right" />
+    <AreaSeries
+      id="compliance_score"
+      // TODO: no api for this chart yet, using empty state for now. needs BE
+      data={[]}
+      xScaleType="time"
+      xAccessor={0}
+      yAccessors={[1]}
+    />
+    <Axis id="bottom-axis" position="bottom" tickFormat={timeFormatter(niceTimeFormatByDay(1))} />
+    <Axis ticks={4} id="left-axis" position="left" showGridLines domain={{ min: 0, max: 100 }} />
+  </Chart>
+);

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/score_per_account_chart.tsx

@@ -26,7 +26,6 @@ export const ScorePerAccountChart = ({
           valueFormatter: (v) => `${Number(v * 100).toFixed(0)}%`,
         }}
         id="bars"
-        name="0"
         data={accountEvaluations}
         xAccessor={'resource'}
         yAccessors={['value']}

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_dashboard.tsx

@@ -13,23 +13,16 @@ import { SummarySection } from './dashboard_sections/summary_section';
 import { BenchmarksSection } from './dashboard_sections/benchmarks_section';
 import { useCloudPostureStatsApi } from '../../common/api';
 import { CspPageTemplate } from '../../components/page_template';
+import * as TEXT from './translations';
 
 const CompliancePage = () => {
   const getStats = useCloudPostureStatsApi();
   if (getStats.isLoading) return null;
 
   return (
     <>
-      <EuiTitle>
-        <h3>{'Summary'}</h3>
-      </EuiTitle>
-      <EuiSpacer />
       <SummarySection />
       <EuiSpacer />
-      <EuiTitle>
-        <h3>{'Benchmarks'}</h3>
-      </EuiTitle>
-      <EuiSpacer />
       <BenchmarksSection />
       <EuiSpacer />
     </>
@@ -42,7 +35,7 @@ export const ComplianceDashboard = () => {
   return (
     <CspPageTemplate
       pageHeader={{
-        pageTitle: 'Compliance',
+        pageTitle: TEXT.CLOUD_POSTURE,
       }}
     >
       <CompliancePage />

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx

@@ -21,6 +21,7 @@ import { ComplianceTrendChart } from '../compliance_charts/compliance_trend_char
 import { useCloudPostureStatsApi } from '../../../common/api/use_cloud_posture_stats_api';
 import { CspHealthBadge } from '../../../components/csp_health_badge';
 import { ChartPanel } from '../../../components/chart_panel';
+import * as TEXT from '../translations';
 
 type BenchmarksWithIcons = 'CIS Kubernetes';
 
@@ -65,7 +66,7 @@ export const BenchmarksSection = () => {
                 listItems={[
                   {
                     // TODO: this shows the failed/passed ratio and not the calculated score. needs product
-                    title: 'Compliance Score',
+                    title: TEXT.COMPLIANCE_SCORE,
                     description: (
                       <ChartPanel
                         hasBorder={false}
@@ -83,7 +84,7 @@ export const BenchmarksSection = () => {
               <EuiDescriptionList
                 listItems={[
                   {
-                    title: 'Compliance Trend',
+                    title: TEXT.COMPLIANCE_TREND,
                     description: (
                       <ChartPanel
                         hasBorder={false}
@@ -102,22 +103,22 @@ export const BenchmarksSection = () => {
               <EuiDescriptionList
                 listItems={[
                   {
-                    title: 'Posture Score',
+                    title: TEXT.POSTURE_SCORE,
                     // TODO: temporary until the type for this are fixed and the score is no longer optional (right now can fail if score equals 0).
                     description: benchmark.postureScore || 'error',
                   },
                   {
-                    title: 'Status',
+                    title: TEXT.STATUS,
                     description:
                       benchmark.postureScore !== undefined ? (
                         <CspHealthBadge value={benchmark.postureScore} />
                       ) : (
-                        'error'
+                        TEXT.ERROR
                       ),
                   },
                   {
-                    title: 'Total Failures',
-                    description: benchmark.totalFailed || 'error',
+                    title: TEXT.TOTAL_FAILURES,
+                    description: benchmark.totalFailed || TEXT.ERROR,
                   },
                 ]}
               />

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx

@@ -12,6 +12,7 @@ import { ScorePerAccountChart } from '../compliance_charts/score_per_account_cha
 import { ChartPanel } from '../../../components/chart_panel';
 import { ComplianceStats } from '../compliance_charts/compliance_stats';
 import { useCloudPostureStatsApi } from '../../../common/api';
+import * as TEXT from '../translations';
 
 export const SummarySection = () => {
   const getStats = useCloudPostureStatsApi();
@@ -25,8 +26,8 @@ export const SummarySection = () => {
       <EuiFlexItem>
         <ChartPanel
           chart={ResourcesAtRiskChart}
-          title="Top 5 Resources Types At Risk"
-          description="Non compliant first"
+          title={TEXT.TOP_5_CHART_TITLE}
+          description={TEXT.NON_COMPLIANT_FIRST}
           data={getStats.data?.resourcesEvaluations}
           isLoading={getStats.isLoading}
           isError={getStats.isError}
@@ -35,8 +36,8 @@ export const SummarySection = () => {
       <EuiFlexItem>
         <ChartPanel
           chart={ScorePerAccountChart}
-          title="Score Per Account / Cluster"
-          description="Non compliant first"
+          title={TEXT.SCORE_PER_CLUSTER_CHART_TITLE}
+          description={TEXT.NON_COMPLIANT_FIRST}
           // TODO: no api for this chart yet, using empty state for now. needs BE
           data={[]}
           isLoading={getStats.isLoading}

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/translations.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CLOUD_POSTURE = i18n.translate('xpack.csp.cloud_posture', {
+  defaultMessage: 'Cloud Posture',
+});
+
+export const TOP_5_CHART_TITLE = i18n.translate('xpack.csp.top_5_chart_title', {
+  defaultMessage: 'Top 5 Resources Types At Risk',
+});
+
+export const SCORE_PER_CLUSTER_CHART_TITLE = i18n.translate(
+  'xpack.csp.score_per_cluster_chart_title',
+  {
+    defaultMessage: 'Score Per Account / Cluster',
+  }
+);
+
+export const NON_COMPLIANT_FIRST = i18n.translate('xpack.csp.non_compliant_first', {
+  defaultMessage: 'Non compliant first',
+});
+
+export const COMPLIANCE_SCORE = i18n.translate('xpack.csp.compliance_score', {
+  defaultMessage: 'Compliance Score',
+});
+
+export const COMPLIANCE_TREND = i18n.translate('xpack.csp.compliance_trend', {
+  defaultMessage: 'Compliance Trend',
+});
+
+export const POSTURE_SCORE = i18n.translate('xpack.csp.posture_score', {
+  defaultMessage: 'Posture Score',
+});
+
+export const STATUS = i18n.translate('xpack.csp.status', {
+  defaultMessage: 'STATUS',
+});
+
+export const TOTAL_FAILURES = i18n.translate('xpack.csp.total_failures', {
+  defaultMessage: 'Total Failures',
+});
+
+export const ERROR = i18n.translate('xpack.csp.error', {
+  defaultMessage: 'Error',
+});
+
+export const POSTURE_SCORE_TREND = i18n.translate('xpack.csp.posture_score_trend', {
+  defaultMessage: 'Posture Score Trend',
+});
+
+export const ACTIVE_FRAMEWORKS = i18n.translate('xpack.csp.active_frameworks', {
+  defaultMessage: 'Active Frameworks',
+});
+
+export const TOTAL_RESOURCES = i18n.translate('xpack.csp.total_resources', {
+  defaultMessage: 'Total Resources',
+});
+
+export const PASSED = i18n.translate('xpack.csp.passed', {
+  defaultMessage: 'Passed',
+});
+
+export const FAILED = i18n.translate('xpack.csp.failed', {
+  defaultMessage: 'Failed',
+});