2 files changed, 27 insertions, 15 deletions
diff --git a/app/assets/javascripts/serverless/components/area.vue b/app/assets/javascripts/serverless/components/area.vue
index 4110d7e0a49..a1a8cd3acbd 100644
--- a/app/assets/javascripts/serverless/components/area.vue
+++ b/app/assets/javascripts/serverless/components/area.vue
@@ -43,7 +43,7 @@ export default {
     },
     generateSeries() {
       return {
-        name: __('ServerlessPrometheusGraph|Invocations'),
+        name: __('Invocations'),
         type: 'line',
         data: this.chartData.requests.map(data => [data.time, data.value]),
         symbolSize: 0,
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
index 38e2a3f16a9..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({
@@ -88,26 +111,15 @@ export default {
             }}
           </p>
           <ul>
-            <!-- 
-              TODO: will need to add eslint-disable vue-i18n/no-bare-strings 
-              After https://gitlab.com/ekigbo/eslint-plugin-vue-i18n is merged in
-              Don't want to translate `serverless.yml` and `.gitlab-ci.yml`
-            -->
             <li>
-              Your repository does not have a corresponding
-              <code>{{ 'serverless.yml' }}</code> file.
+              {{ noServerlessConfigFile }}
             </li>
             <li>
-              Your <code>{{ '.gitlab-ci.yml' }}</code> file is not properly configured.
+              {{ noGitlabYamlConfigured }}
             </li>
             <li>
-              The functions listed in the <code>{{ 'serverless.yml' }}</code> file don't match the
-              namespace of your cluster.
+              {{ mismatchedServerlessFunctions }}
             </li>
-            <!-- 
-              TODO: will need to add eslint-enable vue-i18n/no-bare-strings 
-              After https://gitlab.com/ekigbo/eslint-plugin-vue-i18n is merged in
-            -->
             <li>{{ s__('Serverless|The deploy job has not finished.') }}</li>
           </ul>