From 0117cd5faa44fa78bb013ad1332b7c15123c7e2d Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 11:11:50 +0300
Subject: [PATCH 1/6] - feat: Support children in table headers type - feat:
 Add public IP header in farms page

---
 packages/playground/src/types/index.ts  |  8 +++++++-
 packages/playground/src/views/farms.vue | 15 ++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
index 2532729dd1..fb5ae86cce 100644
--- a/packages/playground/src/types/index.ts
+++ b/packages/playground/src/types/index.ts
@@ -87,7 +87,13 @@ export interface Flist {
   entryPoint: string;
 }
 
-export type VDataTableHeader = { title: string; key: string; sortable?: boolean; [key: string]: any }[];
+export type VDataTableHeader = {
+  title: string;
+  key: string;
+  sortable?: boolean;
+  children?: VDataTableHeader;
+  [key: string]: any;
+}[];
 
 export enum ProjectName {
   Kubernetes = "Kubernetes",
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
index d7afa9b96f..bdede63628 100644
--- a/packages/playground/src/views/farms.vue
+++ b/packages/playground/src/views/farms.vue
@@ -206,16 +206,13 @@ const headers: VDataTableHeader = [
   { title: "ID", key: "farmId", sortable: false },
   { title: "Name", key: "name", sortable: false },
   {
-    title: "Total Public IPs",
-    key: "totalPublicIp",
-    align: "start",
-    sortable: false,
-  },
-  {
-    title: "Available Public IPs",
-    key: "freePublicIp",
-    align: "start",
+    title: "Public IPs",
+    key: "publicIps",
     sortable: false,
+    children: [
+      { title: "Total", key: "totalPublicIp", sortable: false },
+      { title: "Available", key: "freePublicIp", sortable: false },
+    ],
   },
   {
     title: "Certification Type",

From be6f0d9668882f614ac2a74b198b702b7e6f132d Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 12:13:06 +0300
Subject: [PATCH 2/6] - chore: rename global.css into global.scss to avoid
 multi nested css conditions - style: add borders to vuetify tables to improve
 it's readablility

---
 .../src/{global.css => global.scss}           | 37 +++++++++++++++++++
 packages/playground/src/main.ts               |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)
 rename packages/playground/src/{global.css => global.scss} (74%)

diff --git a/packages/playground/src/global.css b/packages/playground/src/global.scss
similarity index 74%
rename from packages/playground/src/global.css
rename to packages/playground/src/global.scss
index b8529a0527..c006f4beca 100644
--- a/packages/playground/src/global.css
+++ b/packages/playground/src/global.scss
@@ -148,3 +148,40 @@ a {
   border-radius: 4px;
   border-left: 5px solid #1c81dd;
 }
+
+/* Update tables styles */
+table {
+  thead {
+    tr {
+      th {
+        border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+        &:not(.v-data-table__th--sorted) i {
+          opacity: 0.1 !important;
+        }
+      }
+
+      &:first-of-type th {
+        &:first-of-type {
+          border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+        }
+
+        border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+      }
+    }
+  }
+
+  tbody tr {
+    td {
+      border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+      &:first-of-type {
+        border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+      }
+    }
+
+    &:last-of-type td {
+      border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+}
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index 3356896402..ac76b55e4d 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -1,5 +1,5 @@
 import "mosha-vue-toastify/dist/style.css";
-import "./global.css";
+import "./global.scss";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";

From 9b02a63b2e3ec69f42caf9c044400f1a8a5aec67 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 12:24:32 +0300
Subject: [PATCH 3/6] - style: improve how table looks when no items found -
 style: add mb-5 to loader and no data message

---
 .../playground/src/components/list_table.vue  |  4 ++--
 packages/playground/src/global.scss           | 22 ++++++-------------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/playground/src/components/list_table.vue b/packages/playground/src/components/list_table.vue
index fdc08adc0f..aa57732f04 100644
--- a/packages/playground/src/components/list_table.vue
+++ b/packages/playground/src/components/list_table.vue
@@ -55,7 +55,7 @@
     </template>
 
     <template #bottom>
-      <v-row class="mt-5" v-if="loading && items.length === 0">
+      <v-row class="my-5" v-if="loading && items.length === 0">
         <v-spacer />
         <div class="d-flex my-6 align-center justify-center">
           <v-progress-circular indeterminate :width="3" :size="30" />
@@ -64,7 +64,7 @@
       </v-row>
       <template v-else-if="!loading && items.length === 0 && (noDataText || $slots['no-data-text'])">
         <VContainer>
-          <VRow justify="center" align="center" class="mt-5">
+          <VRow justify="center" align="center" class="my-5">
             <slot name="no-data-text" v-if="$slots['no-data-text']" />
             <p v-else v-text="noDataText" />
           </VRow>
diff --git a/packages/playground/src/global.scss b/packages/playground/src/global.scss
index c006f4beca..cc88885b7c 100644
--- a/packages/playground/src/global.scss
+++ b/packages/playground/src/global.scss
@@ -150,6 +150,10 @@ a {
 }
 
 /* Update tables styles */
+.v-table {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
 table {
   thead {
     tr {
@@ -161,27 +165,15 @@ table {
         }
       }
 
-      &:first-of-type th {
-        &:first-of-type {
-          border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-        }
-
-        border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+      &:first-of-type th:last-of-type {
+        border-right: none;
       }
     }
   }
 
   tbody tr {
-    td {
+    td:not(:last-of-type) {
       border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-
-      &:first-of-type {
-        border-left: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-      }
-    }
-
-    &:last-of-type td {
-      border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
     }
   }
 }

From 5790ef0230359c69978955eb382176b78d3b0e61 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 12:28:35 +0300
Subject: [PATCH 4/6] - chore: add to important table styles - style:
 refactor/update contracts page styles

---
 packages/playground/src/global.scss           |  2 +-
 .../src/weblets/tf_contracts_list.vue         | 33 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/global.scss b/packages/playground/src/global.scss
index cc88885b7c..88970c4526 100644
--- a/packages/playground/src/global.scss
+++ b/packages/playground/src/global.scss
@@ -151,7 +151,7 @@ a {
 
 /* Update tables styles */
 .v-table {
-  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
 }
 
 table {
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 4068e9dce0..d1f7adc66d 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -195,13 +195,27 @@ const baseTableHeaders: VDataTableHeader = [
 // Define specific table headers for each contract type
 const nodeTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
-  { title: "Solution Type", key: "solutionType" },
-  { title: "Solution Name", key: "solutionName" },
+  {
+    title: "Solution",
+    key: "solution",
+    sortable: false,
+    children: [
+      { title: "Type", key: "solutionType" },
+      { title: "Name", key: "solutionName" },
+    ],
+  },
   { title: "Type", key: "deploymentType" },
   { title: "Expiration", key: "expiration" },
-  { title: "Node ID", key: "nodeId" },
   { title: "Farm ID", key: "farmId" },
-  { title: "Node Status", key: "nodeStatus", sortable: false },
+  {
+    title: "Node",
+    key: "node",
+    sortable: false,
+    children: [
+      { title: "ID", key: "nodeId" },
+      { title: "Status", key: "nodeStatus", sortable: false },
+    ],
+  },
   { title: "Details", key: "actions", sortable: false },
 ];
 
@@ -214,9 +228,16 @@ const nameTableHeaders: VDataTableHeader = [
 
 const RentTableHeaders: VDataTableHeader = [
   ...baseTableHeaders,
-  { title: "Node ID", key: "nodeId" },
   { title: "Farm ID", key: "farmId" },
-  { title: "Node Status", key: "nodeStatus", sortable: false },
+  {
+    title: "Node",
+    key: "node",
+    sortable: false,
+    children: [
+      { title: "ID", key: "nodeId" },
+      { title: "Status", key: "nodeStatus", sortable: false },
+    ],
+  },
   { title: "Details", key: "actions", sortable: false },
 ];
 

From 80c92837f19245a24fc4454fe34e21b9fce304a3 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 12:40:26 +0300
Subject: [PATCH 5/6] - feat: group network in vm tables - feat: group network
 in k8s tables

---
 .../src/components/k8s_deployment_table.vue   | 15 +++++--
 .../src/components/vm_deployment_table.vue    | 43 +++++++++++--------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 6326e7d34b..db595ae2d9 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -72,10 +72,17 @@
       :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: 'Mycelium Network IP', key: 'mycelium', sortable: false },
+        {
+          title: 'Networks',
+          key: 'networks',
+          sortable: false,
+          children: [
+            { title: 'Public IPv4', key: 'ipv4', sortable: false },
+            { title: 'Public IPv6', key: 'ipv6', sortable: false },
+            { title: 'Planetary IP', key: 'planetary', sortable: false },
+            { title: 'Mycelium IP', key: 'mycelium', sortable: false },
+          ],
+        },
         { title: 'Workers', key: 'workersLength' },
         { title: 'Billing Rate', key: 'billing' },
         { title: 'Created At', key: 'created' },
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index cb1739910e..3a420b38a0 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -237,14 +237,21 @@ async function loadDeployments() {
 }
 
 const filteredHeaders = computed(() => {
-  let headers = [
+  const 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: "Mycelium Network IP", key: "mycelium", sortable: false },
-    { title: "WireGuard", key: "wireguard", sortable: false },
+    {
+      title: "Networks",
+      key: "networks",
+      sortable: false,
+      children: [
+        { title: "Public IPv4", key: "ipv4", sortable: false },
+        { title: "Public IPv6", key: "ipv6", sortable: false },
+        { title: "Planetary IP", key: "planetary", sortable: false },
+        { title: "Mycelium IP", key: "mycelium", sortable: false },
+        { title: "WireGuard", key: "wireguard", sortable: false },
+      ],
+    },
     { title: "Flist", key: "flist" },
     { title: "Cost", key: "billing" },
     { title: "Created At", key: "created" },
@@ -270,20 +277,22 @@ const filteredHeaders = computed(() => {
 
   const flistSolutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
 
-  if (!IPV6Solutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "ipv6");
-  }
+  if (headers[2].children) {
+    if (!IPV6Solutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "ipv6");
+    }
 
-  if (!IPV4Solutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "ipv4");
-  }
+    if (!IPV4Solutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "ipv4");
+    }
 
-  if (!WireguardSolutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "wireguard");
-  }
+    if (!WireguardSolutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "wireguard");
+    }
 
-  if (!flistSolutions.includes(props.projectName)) {
-    headers = headers.filter(h => h.key !== "flist");
+    if (!flistSolutions.includes(props.projectName)) {
+      headers[2].children = headers[2].children.filter(h => h.key !== "flist");
+    }
   }
 
   return headers;

From d2773c8c49b79bd814f7669f75a1f66214437038 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 15 May 2024 12:50:28 +0300
Subject: [PATCH 6/6] - style: refactor ssh table

---
 .../src/components/ssh_keys/SshTable.vue      | 45 +++++++------------
 1 file changed, 16 insertions(+), 29 deletions(-)

diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
index 5607c58de4..ed062411f3 100644
--- a/packages/playground/src/components/ssh_keys/SshTable.vue
+++ b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -1,17 +1,16 @@
 <template>
-  <v-card class="pt-6 pl-6 pr-6 mb-4">
-    <div class="head">
-      <h3 class="text-light text-subtitle-1">
-        <v-icon>mdi-key-chain</v-icon>
-        SSH Keys
-      </h3>
-    </div>
-
-    <div class="table mt-3">
+  <v-card>
+    <v-card-title>
+      <v-icon icon="mdi-key-chain" />
+      SSH Keys
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text>
       <v-data-table
         show-select
         :no-data-text="capitalize(`No keys found.`)"
-        class="pa-5"
         v-model="selectedKeys"
         :loading="loading"
         :headers="headers"
@@ -20,7 +19,7 @@
         @click:row="(_: any, { item }: any) => $emit('view', item)"
       >
         <template #loading>
-          <div class="w-100 text-center" v-if="loading && loadingMessage">
+          <div class="text-center" v-if="loading && loadingMessage">
             <small>{{ loadingMessage }}</small>
           </div>
         </template>
@@ -92,9 +91,12 @@
 
         <template #bottom></template>
       </v-data-table>
-    </div>
+    </v-card-text>
 
-    <div class="bottom mt-3 d-flex justify-end">
+    <v-divider />
+
+    <v-card-actions>
+      <v-spacer />
       <v-tooltip location="bottom" text="Export all selected keys.">
         <template #activator="{ props }">
           <v-btn
@@ -127,7 +129,7 @@
           </v-btn>
         </template>
       </v-tooltip>
-    </div>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -220,22 +222,7 @@ export default defineComponent({
 </script>
 
 <style>
-.head {
-  border-bottom: 1px solid #8d848d;
-  padding-bottom: 15px;
-}
-
-.bottom {
-  width: 100%;
-  border-top: 1px solid #8d848d;
-  padding: 15px;
-}
 .activation {
   cursor: pointer;
 }
-.v-data-table-rows-loading td {
-  padding: 0 !important;
-  margin: 0 !important;
-  height: 25px !important;
-}
 </style>