Vue-i18n: app/assets/javascripts/serverless directory

i18n linting for .vue files under the
app/assets/javascripts/serverless directory

3 files changed, 47 insertions, 19 deletions

diff --git a/app/assets/javascripts/serverless/components/area.vue b/app/assets/javascripts/serverless/components/area.vue
index 32c9d6eccb8..a1a8cd3acbd 100644
--- a/app/assets/javascripts/serverless/components/area.vue
+++ b/app/assets/javascripts/serverless/components/area.vue
@@ -4,6 +4,7 @@ import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
 import dateFormat from 'dateformat';
 import { X_INTERVAL } from '../constants';
 import { validateGraphData } from '../utils';
+import { __ } from '~/locale';
 
 let debouncedResize;
 
@@ -42,7 +43,7 @@ export default {
     },
     generateSeries() {
       return {
-        name: 'Invocations',
+        name: __('Invocations'),
         type: 'line',
         data: this.chartData.requests.map(data => [data.time, data.value]),
         symbolSize: 0,
@@ -124,7 +125,9 @@ export default {
   <div class="prometheus-graph">
     <div class="prometheus-graph-header">
       <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphData.title }}</h5>
-      <div ref="graphWidgets" class="prometheus-graph-widgets"><slot></slot></div>
+      <div ref="graphWidgets" class="prometheus-graph-widgets">
+        <slot></slot>
+      </div>
     </div>
     <gl-area-chart
       ref="areaChart"
@@ -135,12 +138,8 @@ export default {
       :width="width"
       :include-legend-avg-max="false"
     >
-      <template slot="tooltipTitle">
-        {{ tooltipPopoverTitle }}
-      </template>
-      <template slot="tooltipContent">
-        {{ tooltipPopoverContent }}
-      </template>
+      <template slot="tooltipTitle">{{ tooltipPopoverTitle }}</template>
+      <template slot="tooltipContent">{{ tooltipPopoverContent }}</template>
     </gl-area-chart>
   </div>
 </template>
diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue
index b8906cfca4e..d542dad8119 100644
--- a/app/assets/javascripts/serverless/components/function_details.vue
+++ b/app/assets/javascripts/serverless/components/function_details.vue
@@ -89,7 +89,9 @@ export default {
         }}
       </p>
     </div>
-    <div v-else><p>No pods loaded at this time.</p></div>
+    <div v-else>
+      <p>{{ s__('ServerlessDetails|No pods loaded at this time.') }}</p>
+    </div>
 
     <area-chart v-if="hasPrometheusData" :graph-data="graphData" :container-width="elWidth" />
     <missing-prometheus
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
index 94341050b86..9e66869515c 100644
--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -1,4 +1,5 @@
 <script>
+import { sprintf, s__ } from '~/locale';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import FunctionRow from './function_row.vue';
@@ -37,6 +38,28 @@ export default {
     isInstalled() {
       return this.installed === true;
     },
+    noServerlessConfigFile() {
+      return sprintf(
+        s__(
+          'Serverless|Your repository does not have a corresponding %{startTag}serverless.yml%{endTag} file.',
+        ),
+        { startTag: '<code>', endTag: '</code>' },
+      );
+    },
+    noGitlabYamlConfigured() {
+      return sprintf(
+        s__('Serverless|Your %{startTag}.gitlab-ci.yml%{endTag} file is not properly configured.'),
+        { startTag: '<code>', endTag: '</code>' },
+      );
+    },
+    mismatchedServerlessFunctions() {
+      return sprintf(
+        s__(
+          "Serverless|The functions listed in the %{startTag}serverless.yml%{endTag} file don't match the namespace of your cluster.",
+        ),
+        { startTag: '<code>', endTag: '</code>' },
+      );
+    },
   },
   created() {
     this.fetchFunctions({
@@ -82,25 +105,29 @@ export default {
           <h4 class="state-title text-center">{{ s__('Serverless|No functions available') }}</h4>
           <p class="state-description">
             {{
-              s__(`Serverless|There is currently no function data available from Knative.
-                   This could be for a variety of reasons including:`)
+              s__(
+                'Serverless|There is currently no function data available from Knative. This could be for a variety of reasons including:',
+              )
             }}
           </p>
           <ul>
-            <li>Your repository does not have a corresponding <code>serverless.yml</code> file.</li>
-            <li>Your <code>.gitlab-ci.yml</code> file is not properly configured.</li>
             <li>
-              The functions listed in the <code>serverless.yml</code> file don't match the namespace
-              of your cluster.
+              {{ noServerlessConfigFile }}
+            </li>
+            <li>
+              {{ noGitlabYamlConfigured }}
+            </li>
+            <li>
+              {{ mismatchedServerlessFunctions }}
             </li>
-            <li>The deploy job has not finished.</li>
+            <li>{{ s__('Serverless|The deploy job has not finished.') }}</li>
           </ul>
 
           <p>
             {{
-              s__(`Serverless|If you believe none of these apply, please check
-                   back later as the function data may be in the process of becoming
-                   available.`)
+              s__(
+                'Serverless|If you believe none of these apply, please check back later as the function data may be in the process of becoming available.',
+              )
             }}
           </p>
           <div class="text-center">