1 files changed, 38 insertions, 0 deletions
diff --git a/app/assets/javascripts/google_cloud/databases/panel.vue b/app/assets/javascripts/google_cloud/databases/panel.vue
index e2f18c286a5..8b91c508871 100644
--- a/app/assets/javascripts/google_cloud/databases/panel.vue
+++ b/app/assets/javascripts/google_cloud/databases/panel.vue
@@ -1,11 +1,15 @@
 <script>
 import GoogleCloudMenu from '../components/google_cloud_menu.vue';
 import IncubationBanner from '../components/incubation_banner.vue';
+import InstanceTable from './cloudsql/instance_table.vue';
+import ServiceTable from './service_table.vue';
 
 export default {
   components: {
     IncubationBanner,
+    InstanceTable,
     GoogleCloudMenu,
+    ServiceTable,
   },
   props: {
     configurationUrl: {
@@ -20,6 +24,26 @@ export default {
       type: String,
       required: true,
     },
+    cloudsqlPostgresUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlMysqlUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlSqlserverUrl: {
+      type: String,
+      required: true,
+    },
+    cloudsqlInstances: {
+      type: Array,
+      required: true,
+    },
+    emptyIllustrationUrl: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
@@ -34,5 +58,19 @@ export default {
       :deployments-url="deploymentsUrl"
       :databases-url="databasesUrl"
     />
+
+    <service-table
+      alloydb-postgres-url="#"
+      :cloudsql-mysql-url="cloudsqlMysqlUrl"
+      :cloudsql-postgres-url="cloudsqlPostgresUrl"
+      :cloudsql-sqlserver-url="cloudsqlSqlserverUrl"
+      firestore-url="#"
+      memorystore-redis-url="#"
+    />
+
+    <instance-table
+      :cloudsql-instances="cloudsqlInstances"
+      :empty-illustration-url="emptyIllustrationUrl"
+    />
   </div>
 </template>