Merge branch 'vue-i18n-js-monitoring-directory-ee' into 'master'

EE Port - Vue-i18n: app/assets/javascripts/monitoring directory

See merge request gitlab-org/gitlab-ee!14341

app/assets/javascripts/monitoring/components/charts/area.vue

 <script>
+import { __ } from '~/locale';
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
@@ -99,7 +100,7 @@ export default {
     chartOptions() {
       return {
         xAxis: {
-          name: 'Time',
+          name: __('Time'),
           type: 'time',
           axisLabel: {
             formatter: date => dateFormat(date, 'h:MM TT'),

app/assets/javascripts/monitoring/components/empty_state.vue

 <script>
+import { __ } from '~/locale';
+
 export default {
   props: {
     documentationPath: {
@@ -41,35 +43,35 @@ export default {
       states: {
         gettingStarted: {
           svgUrl: this.emptyGettingStartedSvgPath,
-          title: 'Get started with performance monitoring',
-          description: `Stay updated about the performance and health
-              of your environment by configuring Prometheus to monitor your deployments.`,
-          buttonText: 'Install on clusters',
+          title: __('Get started with performance monitoring'),
+          description: __(`Stay updated about the performance and health
+              of your environment by configuring Prometheus to monitor your deployments.`),
+          buttonText: __('Install on clusters'),
           buttonPath: this.clustersPath,
-          secondaryButtonText: 'Configure existing installation',
+          secondaryButtonText: __('Configure existing installation'),
           secondaryButtonPath: this.settingsPath,
         },
         loading: {
           svgUrl: this.emptyLoadingSvgPath,
-          title: 'Waiting for performance data',
-          description: `Creating graphs uses the data from the Prometheus server.
-              If this takes a long time, ensure that data is available.`,
-          buttonText: 'View documentation',
+          title: __('Waiting for performance data'),
+          description: __(`Creating graphs uses the data from the Prometheus server.
+              If this takes a long time, ensure that data is available.`),
+          buttonText: __('View documentation'),
           buttonPath: this.documentationPath,
         },
         noData: {
           svgUrl: this.emptyNoDataSvgPath,
-          title: 'No data found',
-          description: `You are connected to the Prometheus server, but there is currently
-              no data to display.`,
-          buttonText: 'Configure Prometheus',
+          title: __('No data found'),
+          description: __(`You are connected to the Prometheus server, but there is currently
+              no data to display.`),
+          buttonText: __('Configure Prometheus'),
           buttonPath: this.settingsPath,
         },
         unableToConnect: {
           svgUrl: this.emptyUnableToConnectSvgPath,
-          title: 'Unable to connect to Prometheus server',
+          title: __('Unable to connect to Prometheus server'),
           description: 'Ensure connectivity is available from the GitLab server to the ',
-          buttonText: 'View documentation',
+          buttonText: __('View documentation'),
           buttonPath: this.documentationPath,
         },
       },
@@ -90,7 +92,9 @@ export default {
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-12">
-      <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
+      <div class="state-svg svg-content">
+        <img :src="currentState.svgUrl" />
+      </div>
     </div>
 
     <div class="col-12">
@@ -98,20 +102,22 @@ export default {
         <h4 class="state-title text-center">{{ currentState.title }}</h4>
         <p class="state-description">
           {{ currentState.description }}
-          <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
+          <a v-if="showButtonDescription" :href="settingsPath">{{ __('Prometheus server') }}</a>
         </p>
 
         <div class="text-center">
-          <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
-            {{ currentState.buttonText }}
-          </a>
+          <a
+            v-if="currentState.buttonPath"
+            :href="currentState.buttonPath"
+            class="btn btn-success"
+            >{{ currentState.buttonText }}</a
+          >
           <a
             v-if="currentState.secondaryButtonPath"
             :href="currentState.secondaryButtonPath"
             class="btn"
+            >{{ currentState.secondaryButtonText }}</a
           >
-            {{ currentState.secondaryButtonText }}
-          </a>
         </div>
       </div>
     </div>

locale/gitlab.pot

@@ -3433,6 +3433,9 @@ msgstr ""
 msgid "Configure Let's Encrypt"
 msgstr ""
 
+msgid "Configure Prometheus"
+msgstr ""
+
 msgid "Configure Tracing"
 msgstr ""
 
@@ -3442,6 +3445,9 @@ msgstr ""
 msgid "Configure automatic git checks and housekeeping on repositories."
 msgstr ""
 
+msgid "Configure existing installation"
+msgstr ""
+
 msgid "Configure limits for web and API requests."
 msgstr ""
 
@@ -3862,6 +3868,9 @@ msgstr ""
 msgid "Creating epic"
 msgstr ""
 
+msgid "Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
+msgstr ""
+
 msgid "Cron Timezone"
 msgstr ""
 
@@ -6296,6 +6305,9 @@ msgstr ""
 msgid "Get started with error tracking"
 msgstr ""
 
+msgid "Get started with performance monitoring"
+msgstr ""
+
 msgid "Getting started with releases"
 msgstr ""
 
@@ -7177,6 +7189,9 @@ msgstr ""
 msgid "Install a soft token authenticator like %{free_otp_link} or Google Authenticator from your application repository and scan this QR code. More information is available in the %{help_link_start}documentation%{help_link_end}."
 msgstr ""
 
+msgid "Install on clusters"
+msgstr ""
+
 msgid "Installed"
 msgstr ""
 
@@ -8832,6 +8847,9 @@ msgstr ""
 msgid "No credit card required."
 msgstr ""
 
+msgid "No data found"
+msgstr ""
+
 msgid "No details available"
 msgstr ""
 
@@ -10559,6 +10577,9 @@ msgstr ""
 msgid "ProjectsDropdown|This feature requires browser localStorage support"
 msgstr ""
 
+msgid "Prometheus server"
+msgstr ""
+
 msgid "PrometheusAlerts|Add alert"
 msgstr ""
 
@@ -12651,6 +12672,9 @@ msgstr ""
 msgid "Status:"
 msgstr ""
 
+msgid "Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
+msgstr ""
+
 msgid "Stop Terminal"
 msgstr ""
 
@@ -13769,6 +13793,9 @@ msgstr ""
 msgid "Thursday"
 msgstr ""
 
+msgid "Time"
+msgstr ""
+
 msgid "Time based: Yes"
 msgstr ""
 
@@ -14289,6 +14316,9 @@ msgstr ""
 msgid "URL"
 msgstr ""
 
+msgid "Unable to connect to Prometheus server"
+msgstr ""
+
 msgid "Unable to connect to server: %{error}"
 msgstr ""
 
@@ -15129,6 +15159,9 @@ msgstr ""
 msgid "Wait for the source to load to copy it to the clipboard"
 msgstr ""
 
+msgid "Waiting for performance data"
+msgstr ""
+
 msgid "Want to see the data? Please ask an administrator for access."
 msgstr ""
 
@@ -15425,6 +15458,9 @@ msgstr ""
 msgid "You are attempting to update a file that has changed since you started editing it."
 msgstr ""
 
+msgid "You are connected to the Prometheus server, but there is currently no data to display."
+msgstr ""
+
 msgid "You are going to remove %{group_name}, this will also remove all of its subgroups and projects. Removed groups CANNOT be restored! Are you ABSOLUTELY sure?"
 msgstr ""