Add latest changes from gitlab-org/gitlab@master

2 files changed, 84 insertions, 0 deletions

diff --git a/app/assets/javascripts/google_cloud/aiml/panel.vue b/app/assets/javascripts/google_cloud/aiml/panel.vue
new file mode 100644
index 00000000000..f591c47ac40
--- /dev/null
+++ b/app/assets/javascripts/google_cloud/aiml/panel.vue
@@ -0,0 +1,63 @@
+<script>
+import GoogleCloudMenu from '../components/google_cloud_menu.vue';
+import IncubationBanner from '../components/incubation_banner.vue';
+import ServiceTable from './service_table.vue';
+
+export default {
+  components: {
+    IncubationBanner,
+    GoogleCloudMenu,
+    ServiceTable,
+  },
+  props: {
+    configurationUrl: {
+      type: String,
+      required: true,
+    },
+    deploymentsUrl: {
+      type: String,
+      required: true,
+    },
+    databasesUrl: {
+      type: String,
+      required: true,
+    },
+    aimlUrl: {
+      type: String,
+      required: true,
+    },
+    visionAiUrl: {
+      type: String,
+      required: true,
+    },
+    translationAiUrl: {
+      type: String,
+      required: true,
+    },
+    languageAiUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <incubation-banner />
+
+    <google-cloud-menu
+      active="aiml"
+      :configuration-url="configurationUrl"
+      :deployments-url="deploymentsUrl"
+      :databases-url="databasesUrl"
+      :aiml-url="aimlUrl"
+    />
+
+    <service-table
+      :language-ai-url="languageAiUrl"
+      :translation-ai-url="translationAiUrl"
+      :vision-ai-url="visionAiUrl"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
index d6b7c702b54..69b9c6133f1 100644
--- a/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
+++ b/app/assets/javascripts/google_cloud/components/google_cloud_menu.vue
@@ -4,11 +4,13 @@ import { s__ } from '~/locale';
 const CONFIGURATION_KEY = 'configuration';
 const DEPLOYMENTS_KEY = 'deployments';
 const DATABASES_KEY = 'databases';
+const AIML_KEY = 'aiml';
 
 const i18n = {
   configuration: { title: s__('CloudSeed|Configuration') },
   deployments: { title: s__('CloudSeed|Deployments') },
   databases: { title: s__('CloudSeed|Databases') },
+  aiml: { title: s__('CloudSeed|AI / ML') },
 };
 
 export default {
@@ -29,6 +31,11 @@ export default {
       type: String,
       required: true,
     },
+    aimlUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     isConfigurationActive() {
@@ -40,6 +47,9 @@ export default {
     isDatabasesActive() {
       return this.active === DATABASES_KEY;
     },
+    isAimlActive() {
+      return this.active === AIML_KEY;
+    },
   },
   i18n,
 };
@@ -80,6 +90,17 @@ export default {
           {{ $options.i18n.databases.title }}
         </a>
       </li>
+      <li role="presentation" class="nav-item">
+        <a
+          data-testid="aimlLink"
+          role="tab"
+          :href="aimlUrl"
+          class="nav-link gl-tab-nav-item hidden"
+          :class="{ 'gl-tab-nav-item-active': isAimlActive }"
+        >
+          {{ $options.i18n.aiml.title }}
+        </a>
+      </li>
     </ul>
   </div>
 </template>