From 10e2a2801ab29fb760aa733ade6c7859417e6121 Mon Sep 17 00:00:00 2001
From: mohamedamer453 <amerm@incubaid.com>
Date: Thu, 2 Nov 2023 14:15:46 +0200
Subject: [PATCH 1/5] fix sorting

---
 .../src/components/k8s_deployment_table.vue   | 108 ++++++++----------
 .../src/components/vm_deployment_table.vue    |  30 ++---
 2 files changed, 62 insertions(+), 76 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 77ee201482..8c7fe1455f 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -1,64 +1,42 @@
 <template>
-  <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
-    Failed to load deployment{{ count - items.length > 1 ? "s" : "" }} with name{{
-      count - items.length > 1 ? "s" : ""
-    }}
-    <strong>{{ namesOfFailedDeployments }}</strong
-    >.
-  </v-alert>
-
-  <ListTable
-    :headers="[
-      { title: 'PLACEHOLDER', key: 'data-table-select' },
-      { title: 'Name', key: 'name' },
-      { title: 'Public IPv4', key: 'ipv4' },
-      { title: 'Public IPv6', key: 'ipv6' },
-      { title: 'Planetary Network IP', key: 'planetary' },
-      { title: 'Workers', key: 'workers' },
-      { title: 'Billing Rate', key: 'billing' },
-      { title: 'Actions', key: 'actions' },
-    ]"
-    :items="items"
-    :loading="loading"
-    :deleting="deleting"
-    :model-value="$props.modelValue"
-    @update:model-value="$emit('update:model-value', $event)"
-    :no-data-text="`No Kubernetes deployments found on this account.`"
-    @click:row="$attrs['onClick:row']"
-  >
-    <template #[`item.name`]="{ item }">
-      {{ item.value.deploymentName }}
-    </template>
-
-    <template #[`item.ipv4`]="{ item }">
-      {{ item.value.masters[0].publicIP?.ip?.split("/")?.[0] || item.value.masters[0].publicIP?.ip || "None" }}
-    </template>
-
-    <template #[`item.ipv6`]="{ item }">
-      {{ item.value.masters[0].publicIP?.ip6 || "None" }}
-    </template>
-
-    <template #[`item.planetary`]="{ item }">
-      {{ item.value.masters[0].planetary || "None" }}
-    </template>
-
-    <template #[`item.workers`]="{ item }">
-      {{ item.value.workers.length }}
-    </template>
-
-    <template #[`item.billing`]="{ item }">
-      {{ item.value.masters[0].billing }}
-    </template>
-
-    <template #[`item.actions`]="{ item }">
-      <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
-        Deleting...
-      </v-chip>
-      <v-btn-group variant="tonal" v-else>
-        <slot name="actions" :item="item"></slot>
-      </v-btn-group>
-    </template>
-  </ListTable>
+  <div>
+    <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
+      Failed to load deployment{{ count - items.length > 1 ? "s" : "" }} with name{{
+        count - items.length > 1 ? "s" : ""
+      }}
+      <strong>{{ namesOfFailedDeployments }}</strong
+      >.
+    </v-alert>
+
+    <ListTable
+      :headers="[
+        { title: 'PLACEHOLDER', key: 'data-table-select' },
+        { title: 'Name', key: 'name' },
+        { title: 'Public IPv4', key: 'ipv4', sortable: false },
+        { title: 'Public IPv6', key: 'ipv6', sortable: false },
+        { title: 'Planetary Network IP', key: 'planetary', sortable: false },
+        { title: 'Workers', key: 'workers' },
+        { title: 'Billing Rate', key: 'billing' },
+        { title: 'Actions', key: 'actions', sortable: false },
+      ]"
+      :items="items"
+      :loading="loading"
+      :deleting="deleting"
+      :model-value="$props.modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
+      :no-data-text="`No Kubernetes deployments found on this account.`"
+      @click:row="$attrs['onClick:row']"
+    >
+      <template #[`item.actions`]="{ item }">
+        <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
+          Deleting...
+        </v-chip>
+        <v-btn-group variant="tonal" v-else>
+          <slot name="actions" :item="item"></slot>
+        </v-btn-group>
+      </template>
+    </ListTable>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -100,7 +78,15 @@ async function loadDeployments() {
   namesOfFailedDeployments.value = failedDeployments.join(", ");
 
   count.value = clusters.count;
-  items.value = clusters.items;
+  items.value = clusters.items.map((item: any) => {
+    item.name = item.deploymentName;
+    item.ipv4 = item.masters[0].publicIP?.ip?.split("/")?.[0] || item.masters[0].publicIP?.ip || "None";
+    item.ipv6 = item.masters[0].publicIP?.ip6 || "None";
+    item.planetary = item.masters[0].planetary || "None";
+    item.workers = item.workers.length;
+    item.billing = item.masters[0].billing;
+    return item;
+  });
   loading.value = false;
 }
 
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a28d4f640e..ab87ecab3b 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -25,37 +25,37 @@
       @click:row="$attrs['onClick:row']"
     >
       <template #[`item.name`]="{ item }">
-        {{ item.value[0].name }}
+        {{ item.value.name }}
       </template>
 
       <template #[`item.ipv4`]="{ item }">
-        {{ item.value[0].publicIP?.ip?.split("/")?.[0] || item.value[0].publicIP?.ip || "-" }}
+        {{ item.value.publicIP?.ip?.split("/")?.[0] || item.value.publicIP?.ip || "-" }}
       </template>
 
       <template #[`item.ipv6`]="{ item }">
-        {{ item.value[0].publicIP?.ip6 || "-" }}
+        {{ item.value.publicIP?.ip6 || "-" }}
       </template>
 
       <template #[`item.planetary`]="{ item }">
-        {{ item.value[0].planetary || "-" }}
+        {{ item.value.planetary || "-" }}
       </template>
 
       <template #[`item.wireguard`]="{ item }">
-        {{ item.value[0].interfaces[0].ip || "-" }}
+        {{ item.value.interfaces.ip || "-" }}
       </template>
 
       <template #[`item.flist`]="{ item }">
-        <v-tooltip :text="item.value[0].flist" location="bottom right">
+        <v-tooltip :text="item.value.flist" location="bottom right">
           <template #activator="{ props }">
             <p v-bind="props">
-              {{ item.value[0].flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
+              {{ item.value.flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
             </p>
           </template>
         </v-tooltip>
       </template>
 
       <template #[`item.billing`]="{ item }">
-        {{ item.value[0].billing }}
+        {{ item.value.billing }}
       </template>
       <template #[`item.actions`]="{ item }">
         <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
@@ -121,22 +121,22 @@ async function loadDeployments() {
   namesOfFailedDeployments.value = failedDeployments.join(", ");
 
   count.value = vms.count;
-  items.value = vms.items;
+  items.value = vms.items.flat(1);
 
   loading.value = false;
 }
 
 const filteredHeaders = computed(() => {
   let headers = [
-    { title: "PLACEHOLDER", key: "data-table-select" },
+    { title: "PLACEHOLDER", key: "data-tabl  -select" },
     { title: "Name", key: "name" },
-    { title: "Public IPv4", key: "ipv4" },
-    { title: "Public IPv6", key: "ipv6" },
-    { title: "Planetary Network IP", key: "planetary" },
-    { title: "WireGuard", key: "wireguard" },
+    { title: "Public IPv4", key: "ipv4", sortable: false },
+    { title: "Public IPv6", key: "ipv6", sortable: false },
+    { title: "Planetary Network IP", key: "planetary", sortable: false },
+    { title: "WireGuard", key: "wireguard", sortable: false },
     { title: "Flist", key: "flist" },
     { title: "Cost", key: "billing" },
-    { title: "Actions", key: "actions" },
+    { title: "Actions", key: "actions", sortable: false },
   ];
 
   const IPV6Solutions = [ProjectName.VM, ProjectName.Fullvm] as string[];

From 191754c73908ec3d90af27d597ad1bdb46a70551 Mon Sep 17 00:00:00 2001
From: mohamedamer453 <amerm@incubaid.com>
Date: Thu, 2 Nov 2023 14:25:18 +0200
Subject: [PATCH 2/5] hide placeholder

---
 packages/playground/src/components/vm_deployment_table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index ab87ecab3b..288dc8c9e6 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -128,7 +128,7 @@ async function loadDeployments() {
 
 const filteredHeaders = computed(() => {
   let headers = [
-    { title: "PLACEHOLDER", key: "data-tabl  -select" },
+    { title: "PLACEHOLDER", key: "data-table-select" },
     { title: "Name", key: "name" },
     { title: "Public IPv4", key: "ipv4", sortable: false },
     { title: "Public IPv6", key: "ipv6", sortable: false },

From 5716525651aa6d89025782ba904e784926c1363a Mon Sep 17 00:00:00 2001
From: mohamedamer453 <amerm@incubaid.com>
Date: Sun, 5 Nov 2023 11:41:48 +0200
Subject: [PATCH 3/5] fix details and add worker dialogs

---
 packages/playground/src/components/k8s_deployment_table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 8c7fe1455f..6d8feaefc9 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -15,7 +15,7 @@
         { title: 'Public IPv4', key: 'ipv4', sortable: false },
         { title: 'Public IPv6', key: 'ipv6', sortable: false },
         { title: 'Planetary Network IP', key: 'planetary', sortable: false },
-        { title: 'Workers', key: 'workers' },
+        { title: 'Workers', key: 'workersLength' },
         { title: 'Billing Rate', key: 'billing' },
         { title: 'Actions', key: 'actions', sortable: false },
       ]"
@@ -83,7 +83,7 @@ async function loadDeployments() {
     item.ipv4 = item.masters[0].publicIP?.ip?.split("/")?.[0] || item.masters[0].publicIP?.ip || "None";
     item.ipv6 = item.masters[0].publicIP?.ip6 || "None";
     item.planetary = item.masters[0].planetary || "None";
-    item.workers = item.workers.length;
+    item.workersLength = item.workers.length;
     item.billing = item.masters[0].billing;
     return item;
   });

From c0895f9b223dbfbde7a5a0a9932572e6d6cee518 Mon Sep 17 00:00:00 2001
From: mohamedamer453 <amerm@incubaid.com>
Date: Sun, 5 Nov 2023 11:55:21 +0200
Subject: [PATCH 4/5] fix gateway dialog

---
 packages/playground/src/components/manage_gateway_dialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 4c49dd5879..e13cd93ed5 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -204,8 +204,8 @@ export default {
     const passThrough = ref(false);
     const valid = ref(false);
 
-    const ip = props.vm[0].interfaces[0].ip as string;
-    const networkName = props.vm[0].interfaces[0].network as string;
+    const ip = props.vm.interfaces[0].ip as string;
+    const networkName = props.vm.interfaces[0].network as string;
 
     onMounted(async () => {
       const grid = await getGrid(profileManager.profile!);

From ddc68bce03c75df18e292ddc89296d65ab9a9380 Mon Sep 17 00:00:00 2001
From: mohamedamer453 <amerm@incubaid.com>
Date: Tue, 7 Nov 2023 13:46:43 +0200
Subject: [PATCH 5/5] add sorting arrow next to sortable columns

---
 .../playground/src/components/k8s_deployment_table.vue | 10 ++++++++++
 .../playground/src/components/vm_deployment_table.vue  | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index d7a4394482..86811363cc 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -57,6 +57,7 @@
       @update:model-value="$emit('update:model-value', $event)"
       :no-data-text="`No Kubernetes deployments found on this account.`"
       @click:row="$attrs['onClick:row']"
+      :sort-by="sortBy"
     >
       <template #[`item.actions`]="{ item }">
         <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
@@ -134,5 +135,14 @@ export default {
   components: {
     ListTable,
   },
+  data() {
+    return {
+      sortBy: [
+        { key: "name", order: "asc" },
+        { key: "workersLength", order: "asc" },
+        { key: "billing", order: "asc" },
+      ],
+    };
+  },
 };
 </script>
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 5145d10700..088740e7a9 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -38,6 +38,7 @@
       @update:model-value="$emit('update:model-value', $event)"
       :no-data-text="`No ${projectName} deployments found on this account.`"
       @click:row="$attrs['onClick:row']"
+      :sort-by="sortBy"
     >
       <template #[`item.name`]="{ item }">
         {{ item.value.name }}
@@ -248,6 +249,15 @@ export default {
   components: {
     ListTable,
   },
+  data() {
+    return {
+      sortBy: [
+        { key: "name", order: "asc" },
+        { key: "flist", order: "asc" },
+        { key: "billing", order: "asc" },
+      ],
+    };
+  },
 };
 </script>