Add URLs for source&target project.

ottogroup · Apr 16, 2024 · 8b414ae · 8b414ae
1 parent c4fe9fd
commit 8b414ae
Show file tree

Hide file tree

Showing 2 changed files with 275 additions and 253 deletions.
diff --git a/frontend/src/components/BackupTable.vue b/frontend/src/components/BackupTable.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import BackupEditDialog from "@/components/BackupEditDialog.vue";
 import BackupViewDialog from "@/components/BackupViewDialog.vue";
-import { Backup, DefaultService } from "@/models/api";
-import { BackupType } from "@/models/api/models/BackupType";
-import { useNotificationsStore } from "@/stores";
-import { ref } from "vue";
+import {Backup, DefaultService} from "@/models/api";
+import {BackupType} from "@/models/api/models/BackupType";
+import {useNotificationsStore} from "@/stores";
+import {ref} from "vue";
 
 const notificationsStore = useNotificationsStore();
 
@@ -16,26 +16,27 @@ const editDialogID = ref<string | undefined>(undefined);
 const isLoading = ref(true);
 const items = ref<Backup[]>([]);
 const headers = [
-  { title: "", key: "edit", sortable: false },
-  { title: "", key: "view", sortable: false },
-  { title: "Type", key: "type" },
-  { title: "Project", key: "project" },
-  { title: "Strategy", key: "strategy" },
-  { title: "Status", key: "status" },
-  { title: "Sink bucket", key: "sink" },
-  { title: "Source", key: "source" },
+  {title: "", key: "edit", sortable: false},
+  {title: "", key: "view", sortable: false},
+  {title: "Type", key: "type"},
+  {title: "Project", key: "project"},
+  {title: "Source", key: "source"},
+  {title: "Sink Project", key: "sink_project"},
+  {title: "Sink bucket", key: "sink"},
+  {title: "Strategy", key: "strategy"},
+  {title: "Status", key: "status"},
 ];
 
 const updateData = async () => {
   isLoading.value = true;
   DefaultService.getBackups()
-    .then((response) => {
-      items.value = response.backups ?? [];
-    })
-    .catch((err) => notificationsStore.handleError(err))
-    .finally(() => {
-      isLoading.value = false;
-    });
+      .then((response) => {
+        items.value = response.backups ?? [];
+      })
+      .catch((err) => notificationsStore.handleError(err))
+      .finally(() => {
+        isLoading.value = false;
+      });
 };
 
 updateData();
@@ -51,49 +52,59 @@ const bigqueryDatasetLink = (project: string, dataset: string) => {
 const bigqueryTableLink = (project: string, dataset: string, table: string) => {
   return `https://console.cloud.google.com/bigquery?project=${project}&p=${project}&d=${dataset}&t=${table}&page=table`;
 };
+
+const projectLink = (project: string) => {
+  return `https://console.cloud.google.com/welcome?project=${project}`;
+};
 </script>
 
 <template>
-  <BackupViewDialog :id="viewDialogID" @close="viewDialogID = undefined" />
-  <BackupEditDialog :id="editDialogID" @close="editDialogID = undefined" />
+  <BackupViewDialog :id="viewDialogID" @close="viewDialogID = undefined"/>
+  <BackupEditDialog :id="editDialogID" @close="editDialogID = undefined"/>
 
   <v-data-table
-    :items="items"
-    :headers="headers"
-    show-select
-    :loading="isLoading"
-    v-model="selectedItems"
-    :items-per-page="25"
+      :items="items"
+      :headers="headers"
+      show-select
+      :loading="isLoading"
+      v-model="selectedItems"
+      :items-per-page="25"
   >
     <template #[`item.edit`]="{ item }">
       <v-icon @click="editDialogID = item.id">mdi-wrench</v-icon>
     </template>
     <template #[`item.view`]="{ item }">
       <v-icon @click="viewDialogID = item.id">mdi-view-list</v-icon>
     </template>
+    <template #[`item.project`]="{ item }">
+      <a :href="projectLink(item.project ?? '')" target="_blank">{{ item.project }}</a>
+    </template>
     <template #[`item.sink`]="{ item }">
-      <a :href="cloudStorageLink(item.sink_project ?? '', item.sink ?? '')">{{ item.sink }}</a>
+      <a :href="cloudStorageLink(item.sink_project ?? '', item.sink ?? '')" target="_blank">{{ item.sink }}</a>
+    </template>
+    <template #[`item.sink_project`]="{ item }">
+      <a :href="projectLink(item.sink_project ?? '')" target="_blank">{{ item.sink_project }} </a>
     </template>
     <template #[`item.source`]="{ item }">
       <template v-if="item.type === BackupType.BIG_QUERY">
         BigQuery:
         <a :href="bigqueryDatasetLink(item.project ?? '', item.bigquery_options?.dataset ?? '')">{{
-          item.bigquery_options?.dataset
-        }}</a>
+            item.bigquery_options?.dataset
+          }}</a>
         <ul>
           <li v-for="table in item.bigquery_options?.table">
             Table:
             <a :href="bigqueryTableLink(item.project ?? '', item.bigquery_options?.dataset ?? '', table)">{{
-              table
-            }}</a>
+                table
+              }}</a>
           </li>
         </ul>
       </template>
       <template v-if="item.type === BackupType.CLOUD_STORAGE">
         Bucket:
         <a :href="cloudStorageLink(item.project ?? '', item.gcs_options?.bucket ?? '')">{{
-          item.gcs_options?.bucket
-        }}</a>
+            item.gcs_options?.bucket
+          }}</a>
       </template>
     </template>
   </v-data-table>