From 55e356e40c490fd5b8a1e280a9736696916551ae Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 21 Jun 2023 14:51:42 +0300
Subject: [PATCH 1/9] support has_gpu filter

---
 .../dashboard/src/explorer/graphql/api.ts     |  2 ++
 .../dashboard/src/explorer/store/actions.ts   |  1 +
 .../dashboard/src/explorer/store/getters.ts   |  1 +
 .../dashboard/src/explorer/store/mutations.ts |  5 +++++
 .../dashboard/src/explorer/store/state.ts     |  3 ++-
 .../dashboard/src/explorer/views/Nodes.vue    | 20 ++++++++++++-------
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/src/explorer/graphql/api.ts b/packages/dashboard/src/explorer/graphql/api.ts
index 4b94a00ee5..cf499bd0c0 100644
--- a/packages/dashboard/src/explorer/graphql/api.ts
+++ b/packages/dashboard/src/explorer/graphql/api.ts
@@ -94,6 +94,8 @@ export interface INode {
   certificationType: "Diy" | "Certified";
   farmingPolicyName: string;
   countryFullName: string;
+  has_gpu?: boolean;
+  extra_fee?: number;
 }
 
 export interface INodeStatisticsUser {
diff --git a/packages/dashboard/src/explorer/store/actions.ts b/packages/dashboard/src/explorer/store/actions.ts
index e987cf06d8..69aebc6cf4 100644
--- a/packages/dashboard/src/explorer/store/actions.ts
+++ b/packages/dashboard/src/explorer/store/actions.ts
@@ -33,6 +33,7 @@ export default {
 
     if (state.nodesUpFilter) url += "&status=up";
     if (state.nodesGatewayFilter) url += "&ipv4=true&domain=true";
+    if (state.nodesGPUFilter) url += "&has_gpu=true";
 
     for (const key in state.nodesFilter) {
       let value = state.nodesFilter[key];
diff --git a/packages/dashboard/src/explorer/store/getters.ts b/packages/dashboard/src/explorer/store/getters.ts
index 6b7c4864c3..bc62c91a04 100644
--- a/packages/dashboard/src/explorer/store/getters.ts
+++ b/packages/dashboard/src/explorer/store/getters.ts
@@ -182,6 +182,7 @@ export default {
   getNodesTablePageSize: state => state.nodesTablePageSize,
   getNodesUpFilter: state => state.nodesUpFilter,
   getNodesGatewayFilter: state => state.nodesGatewayFilter,
+  getNodesGPUFilter: state => state.nodesGPUFilter,
 
   getNodesFilter: state => state.nodesFilter,
 } as GetterTree<IState, IState>;
diff --git a/packages/dashboard/src/explorer/store/mutations.ts b/packages/dashboard/src/explorer/store/mutations.ts
index a07f13e61f..6b4100719a 100644
--- a/packages/dashboard/src/explorer/store/mutations.ts
+++ b/packages/dashboard/src/explorer/store/mutations.ts
@@ -18,6 +18,7 @@ export enum MutationTypes {
   SET_NODES_TABLE_PAGE_SIZE = "setNodesTablePageSize",
   SET_GATEWAY_FILTER = "setGatewayFilter",
   SET_UP_FILTER = "setUpFilter",
+  SET_GPU_FILTER = "setGPUFilter",
   SET_NODES = "setNodes",
   SET_NODES_FILTER = "setNodesFilter",
   CLEAR_NODES_FILTER = "clearNodesFilter",
@@ -62,6 +63,7 @@ function fillNodesFields(state: IState, node: any, farms: any): INode {
     location: node.location,
     country: node.country,
     city: node.city,
+    has_gpu: node.has_gpu,
     interfaces: [
       {
         name: "",
@@ -123,6 +125,9 @@ export default {
   setGatewayFilter(state: IState, payload: boolean) {
     state.nodesGatewayFilter = payload;
   },
+  setGPUFilter(state: IState, payload: boolean) {
+    state.nodesGPUFilter = payload;
+  },
   setUpFilter(state: IState, payload: boolean) {
     state.nodesUpFilter = payload;
   },
diff --git a/packages/dashboard/src/explorer/store/state.ts b/packages/dashboard/src/explorer/store/state.ts
index 4541c1c67b..0a3bfad7d3 100644
--- a/packages/dashboard/src/explorer/store/state.ts
+++ b/packages/dashboard/src/explorer/store/state.ts
@@ -93,6 +93,7 @@ export interface IState {
   nodesTablePageSize: number;
   nodesGatewayFilter: boolean;
   nodesUpFilter: boolean;
+  nodesGPUFilter: boolean;
 
   /* Refactored Data */
   farms: IPaginationData<IFarm>;
@@ -160,7 +161,7 @@ export default {
   nodesTablePageSize: 10,
   nodesUpFilter: true,
   nodesGatewayFilter: false,
-
+  nodesGPUFilter: false,
   /* Refactored data */
   farms: createPaginationData(),
 } as IState;
diff --git a/packages/dashboard/src/explorer/views/Nodes.vue b/packages/dashboard/src/explorer/views/Nodes.vue
index ebb3f96d58..b200eb9cc1 100644
--- a/packages/dashboard/src/explorer/views/Nodes.vue
+++ b/packages/dashboard/src/explorer/views/Nodes.vue
@@ -13,16 +13,12 @@
     <template v-slot:table>
       <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: center">
         <div>
-          <v-switch
-            label="Gateways (Only)"
-            style="margin-bottom: -30px"
-            v-model="gatewayFilter"
-            @change="requestNodes"
-          />
+          <v-switch label="Gateways (Only)" hide-details v-model="gatewayFilter" @change="requestNodes" />
+          <v-switch label="GPU Node (Only)" hide-details v-model="gpuFilter" @change="requestNodes" />
           <v-tooltip bottom>
             <template v-slot:activator="{ on, attrs }">
               <div v-bind="attrs" v-on="on">
-                <v-switch label="Online (Only)" v-model="onlineFilter" @change="requestNodes" />
+                <v-switch label="Online (Only)" hide-details v-model="onlineFilter" @change="requestNodes" />
               </div>
             </template>
             <span>Does not include Standby nodes</span>
@@ -152,6 +148,7 @@ export default class Nodes extends Vue {
     { text: "MRU", value: "mru", align: "center", customAlign: "text-center", description: "Total Memory" },
     { text: "SRU", value: "sru", align: "center", customAlign: "text-center", description: "Total SSD" },
     { text: "HRU", value: "hru", align: "center", customAlign: "text-center", description: "Total HDD" },
+    { text: "GPU", value: "has_gpu", align: "center", customAlign: "text-center", description: "Has GPU" },
     { text: "Up Time", value: "uptime", align: "center", customAlign: "text-center" },
     { text: "Status", value: "status", align: "center", customAlign: "text-center" },
   ];
@@ -246,6 +243,15 @@ export default class Nodes extends Vue {
     this.$store.commit("explorer/" + MutationTypes.SET_GATEWAY_FILTER, value);
   }
 
+  get gpuFilter() {
+    return this.$store.getters["explorer/getNodesGPUFilter"];
+  }
+
+  set gpuFilter(value) {
+    console.log("set gpuFilter");
+    this.$store.commit("explorer/" + MutationTypes.SET_GPU_FILTER, value);
+  }
+
   get onlineFilter() {
     return this.$store.getters["explorer/getNodesUpFilter"];
   }

From d73ae4f2a4071cc1e13e9dc784581bd588e1c62c Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 21 Jun 2023 16:03:07 +0300
Subject: [PATCH 2/9] support num_gpu

---
 .../src/explorer/components/DetailsV2.vue      | 18 +++++++++++++++++-
 packages/dashboard/src/explorer/graphql/api.ts |  2 +-
 .../dashboard/src/explorer/store/mutations.ts  |  2 +-
 .../dashboard/src/explorer/views/Nodes.vue     |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/explorer/components/DetailsV2.vue b/packages/dashboard/src/explorer/components/DetailsV2.vue
index a8904c53b4..30a3014fe9 100644
--- a/packages/dashboard/src/explorer/components/DetailsV2.vue
+++ b/packages/dashboard/src/explorer/components/DetailsV2.vue
@@ -39,6 +39,10 @@
           <v-col :cols="screen_max_700.matches ? 12 : screen_max_1200.matches ? 6 : 4" v-if="node && interfaces">
             <InterfacesDetails :interfaces="interfaces" />
           </v-col>
+
+          <!-- <v-col :cols="screen_max_700.matches ? 12 : screen_max_1200.matches ? 6 : 4">
+              <InterfacesDetails :interfaces="interfaces" />
+            </v-col> -->
         </v-row>
       </div>
       <div v-if="loading" class="pt-10">
@@ -107,7 +111,6 @@ export default class Details extends Vue {
   @Watch("open", { immediate: true })
   onOpenChange() {
     if (!this.open) return;
-
     this.loading = true;
     const { query, variables } = this;
     this.$apollo
@@ -123,6 +126,19 @@ export default class Details extends Vue {
           this.data.node = await fetch(`${window.configs.APP_GRIDPROXY_URL}/nodes/${this.nodeId}`).then(res =>
             res.json(),
           );
+
+          if (this.data.node.num_gpu) {
+            try {
+              this.data.nodeGPU = await (
+                await axios.get(`${window.configs.APP_GRIDPROXY_URL}/nodes/${this.nodeId}/gpu`, {
+                  timeout: 5000,
+                })
+              ).data;
+            } catch (error) {
+              console.log(error);
+            }
+          }
+
           try {
             this.data.nodeStatistics = await (
               await axios.get(`${window.configs.APP_GRIDPROXY_URL}/nodes/${this.nodeId}/statistics`, {
diff --git a/packages/dashboard/src/explorer/graphql/api.ts b/packages/dashboard/src/explorer/graphql/api.ts
index cf499bd0c0..1c8e760c4b 100644
--- a/packages/dashboard/src/explorer/graphql/api.ts
+++ b/packages/dashboard/src/explorer/graphql/api.ts
@@ -94,7 +94,7 @@ export interface INode {
   certificationType: "Diy" | "Certified";
   farmingPolicyName: string;
   countryFullName: string;
-  has_gpu?: boolean;
+  num_gpu?: number;
   extra_fee?: number;
 }
 
diff --git a/packages/dashboard/src/explorer/store/mutations.ts b/packages/dashboard/src/explorer/store/mutations.ts
index 6b4100719a..33a87cab4d 100644
--- a/packages/dashboard/src/explorer/store/mutations.ts
+++ b/packages/dashboard/src/explorer/store/mutations.ts
@@ -63,7 +63,7 @@ function fillNodesFields(state: IState, node: any, farms: any): INode {
     location: node.location,
     country: node.country,
     city: node.city,
-    has_gpu: node.has_gpu,
+    num_gpu: node.num_gpu,
     interfaces: [
       {
         name: "",
diff --git a/packages/dashboard/src/explorer/views/Nodes.vue b/packages/dashboard/src/explorer/views/Nodes.vue
index b200eb9cc1..23575b4f23 100644
--- a/packages/dashboard/src/explorer/views/Nodes.vue
+++ b/packages/dashboard/src/explorer/views/Nodes.vue
@@ -148,7 +148,7 @@ export default class Nodes extends Vue {
     { text: "MRU", value: "mru", align: "center", customAlign: "text-center", description: "Total Memory" },
     { text: "SRU", value: "sru", align: "center", customAlign: "text-center", description: "Total SSD" },
     { text: "HRU", value: "hru", align: "center", customAlign: "text-center", description: "Total HDD" },
-    { text: "GPU", value: "has_gpu", align: "center", customAlign: "text-center", description: "Has GPU" },
+    { text: "GPU", value: "num_gpu", align: "center", customAlign: "text-center", description: "GPU card" },
     { text: "Up Time", value: "uptime", align: "center", customAlign: "text-center" },
     { text: "Status", value: "status", align: "center", customAlign: "text-center" },
   ];

From fa0b006044c1ab7e94105eb9d0caf11396c1435e Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Wed, 21 Jun 2023 18:17:29 +0300
Subject: [PATCH 3/9] support gpu details

---
 .../src/explorer/components/DetailsV2.vue     | 11 ++-
 .../src/explorer/components/GPUDetails.vue    | 98 +++++++++++++++++++
 .../dashboard/src/explorer/graphql/api.ts     | 10 +-
 .../dashboard/src/explorer/store/mutations.ts |  1 +
 4 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 packages/dashboard/src/explorer/components/GPUDetails.vue

diff --git a/packages/dashboard/src/explorer/components/DetailsV2.vue b/packages/dashboard/src/explorer/components/DetailsV2.vue
index 30a3014fe9..19d0c74244 100644
--- a/packages/dashboard/src/explorer/components/DetailsV2.vue
+++ b/packages/dashboard/src/explorer/components/DetailsV2.vue
@@ -40,9 +40,9 @@
             <InterfacesDetails :interfaces="interfaces" />
           </v-col>
 
-          <!-- <v-col :cols="screen_max_700.matches ? 12 : screen_max_1200.matches ? 6 : 4">
-              <InterfacesDetails :interfaces="interfaces" />
-            </v-col> -->
+          <v-col :cols="screen_max_700.matches ? 12 : screen_max_1200.matches ? 6 : 4" v-if="node && nodeGPU">
+            <GPUDetails :nodeGPU="nodeGPU" />
+          </v-col>
         </v-row>
       </div>
       <div v-if="loading" class="pt-10">
@@ -62,6 +62,7 @@ import { GrafanaStatistics } from "../utils/getMetricsUrl";
 import mediaMatcher from "../utils/mediaMatcher";
 import CountryDetails from "./CountryDetails.vue";
 import FarmDetails from "./FarmDetails.vue";
+import GPUDetails from "./GPUDetails.vue";
 import InterfacesDetails from "./InterfacesDetails.vue";
 import LocationDetails from "./LocationDetails.vue";
 import NodeDetails from "./NodeDetails.vue";
@@ -78,6 +79,7 @@ import TwinDetails from "./TwinDetails.vue";
     TwinDetails,
     PublicConfigDetails,
     InterfacesDetails,
+    GPUDetails,
     NodeUsedResources,
   },
 })
@@ -90,6 +92,7 @@ export default class Details extends Vue {
   loading = false;
   grafanaUrl = "";
   interfaces = undefined;
+  nodeGPU = undefined;
 
   data: any = {};
 
@@ -129,7 +132,7 @@ export default class Details extends Vue {
 
           if (this.data.node.num_gpu) {
             try {
-              this.data.nodeGPU = await (
+              this.nodeGPU = await (
                 await axios.get(`${window.configs.APP_GRIDPROXY_URL}/nodes/${this.nodeId}/gpu`, {
                   timeout: 5000,
                 })
diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
new file mode 100644
index 0000000000..2687699e29
--- /dev/null
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -0,0 +1,98 @@
+<template>
+  <v-container>
+    <v-list-item>
+      <v-list-item-icon>
+        <v-icon size="40" class="mr-2">mdi-boom-gate-outline</v-icon>
+      </v-list-item-icon>
+      <v-list-item-content>
+        <v-list-item-title style="font-size: 30px"> GPU Details </v-list-item-title>
+      </v-list-item-content>
+    </v-list-item>
+    <v-card max-width="400px" max-height="100px">
+      <v-data-table
+        fixed-header
+        class="elevation-1"
+        align
+        :headers="headers"
+        :items="nodeGPU1"
+        hide-default-footer
+        :expanded="[expandedItem]"
+        @click:row="toggleExpanded"
+      >
+        <template v-slot:expanded-item="{ item }">
+          <v-list-item three-line>
+            <v-list-item-content>
+              <v-list-item-title>Vendor</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ item.vendor }}
+              </v-list-item-subtitle>
+
+              <v-list-item-title>Device</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ item.device }}
+              </v-list-item-subtitle>
+
+              <v-list-item-title>Rented by</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ item.contract }}
+              </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+          <v-divider />
+        </template>
+      </v-data-table>
+    </v-card>
+  </v-container>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+import { INodeGPU } from "../graphql/api";
+
+@Component({})
+export default class GPUDetails extends Vue {
+  @Prop({ required: true }) nodeGPU!: INodeGPU[];
+  headers = [{ text: "Card ID", value: "id" }];
+  nodeGPU1 = [
+    {
+      id: "0000:0e:00.0/1002/744c",
+      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
+      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
+      contract: 31540,
+    },
+    {
+      id: "0000:0e:00.0/100d2/744c",
+      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
+      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
+      contract: 31540,
+    },
+    {
+      id: "0000:0e:00.0/1002s/744c",
+      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
+      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
+      contract: 31540,
+    },
+    {
+      id: "0000:0e:00.0/100sa2/744c",
+      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
+      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
+      contract: 31540,
+    },
+  ];
+  expandedItem: INodeGPU | null = null;
+  toggleExpanded(item: INodeGPU) {
+    console.log([item, item, item]);
+    if (this.expandedItem === item) {
+      this.expandedItem = null;
+    } else {
+      this.expandedItem = item;
+    }
+  }
+}
+</script>
+
+<style>
+.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
+  box-shadow: none;
+}
+</style>
diff --git a/packages/dashboard/src/explorer/graphql/api.ts b/packages/dashboard/src/explorer/graphql/api.ts
index 1c8e760c4b..79a7e76152 100644
--- a/packages/dashboard/src/explorer/graphql/api.ts
+++ b/packages/dashboard/src/explorer/graphql/api.ts
@@ -94,10 +94,16 @@ export interface INode {
   certificationType: "Diy" | "Certified";
   farmingPolicyName: string;
   countryFullName: string;
-  num_gpu?: number;
-  extra_fee?: number;
+  num_gpu: number;
+  extra_fee: number;
 }
 
+export interface INodeGPU {
+  id: string;
+  vendor: string;
+  device: string;
+  contract: number;
+}
 export interface INodeStatisticsUser {
   deployments: number;
   workloads: number;
diff --git a/packages/dashboard/src/explorer/store/mutations.ts b/packages/dashboard/src/explorer/store/mutations.ts
index 33a87cab4d..65166e7227 100644
--- a/packages/dashboard/src/explorer/store/mutations.ts
+++ b/packages/dashboard/src/explorer/store/mutations.ts
@@ -64,6 +64,7 @@ function fillNodesFields(state: IState, node: any, farms: any): INode {
     country: node.country,
     city: node.city,
     num_gpu: node.num_gpu,
+    extra_fee: node.extra_fee,
     interfaces: [
       {
         name: "",

From a02489bb5060759990b241b1dfa7a59dfc882199 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Thu, 22 Jun 2023 15:13:52 +0300
Subject: [PATCH 4/9] update gpu details ui

---
 .../src/explorer/components/GPUDetails.vue    | 158 ++++++++++--------
 1 file changed, 92 insertions(+), 66 deletions(-)

diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
index 2687699e29..7b58754538 100644
--- a/packages/dashboard/src/explorer/components/GPUDetails.vue
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -1,48 +1,93 @@
 <template>
-  <v-container>
+  <v-card flat color="transparent" tag="div">
     <v-list-item>
       <v-list-item-icon>
-        <v-icon size="40" class="mr-2">mdi-boom-gate-outline</v-icon>
+        <v-icon size="40" class="mr-2">mdi-expansion-card-variant</v-icon>
       </v-list-item-icon>
       <v-list-item-content>
         <v-list-item-title style="font-size: 30px"> GPU Details </v-list-item-title>
       </v-list-item-content>
     </v-list-item>
-    <v-card max-width="400px" max-height="100px">
-      <v-data-table
-        fixed-header
-        class="elevation-1"
-        align
-        :headers="headers"
-        :items="nodeGPU1"
-        hide-default-footer
-        :expanded="[expandedItem]"
-        @click:row="toggleExpanded"
-      >
-        <template v-slot:expanded-item="{ item }">
-          <v-list-item three-line>
+    <!-- Details -->
+    <v-row>
+      <v-col cols="12" class="pt-0">
+        <!-- :cols="screen_max_800.matches ? 12 : screen_max_1000.matches ? 6 : 4" -->
+        <v-list>
+          <v-list-item v-if="gpuItem">
             <v-list-item-content>
-              <v-list-item-title>Vendor</v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.vendor }}
-              </v-list-item-subtitle>
+              <v-row class="d-flex justify-space-between">
+                <v-tooltip top nudge-bottom="30">
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-col v-bind="attrs" v-on="on" cols="3">
+                      <v-list-item-title class="pt-3"
+                        >Card ID
+                        <v-chip
+                          lose-icon="mdi-delete"
+                          :color="gpuItem.contract ? 'warning' : 'success'"
+                          small
+                          class="mb-1 ml-2"
+                          >{{ gpuItem.contract ? "Reserved" : "Available" }}</v-chip
+                        >
+                      </v-list-item-title>
+                    </v-col>
+                  </template>
+                  <span>Card id that's used in a deployment</span>
+                </v-tooltip>
 
-              <v-list-item-title>Device</v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.device }}
-              </v-list-item-subtitle>
+                <v-col cols="6" class="mr-2">
+                  <v-select
+                    v-if="nodeGPUitems.length > 1"
+                    append-outer-icon="mdi-content-copy"
+                    hide-details
+                    solo
+                    v-model="gpuItem"
+                    :items="nodeGPUitems"
+                    @input.native="gpuItem = $event.srcElement.value.value"
+                    @click:append-outer="copy(gpuItem.id)"
+                  />
+                  <v-text-field
+                    v-else
+                    :value="gpuItem.id"
+                    readonly
+                    hide-details
+                    append-outer-icon="mdi-content-copy"
+                    @click:append-outer="copy(gpuItem.id)"
+                    solo
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-list-item-content>
+          </v-list-item>
+          <v-divider />
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title> Vendor </v-list-item-title>
+            </v-list-item-content>
+            {{ gpuItem?.vendor }}
+          </v-list-item>
+          <v-divider />
 
-              <v-list-item-title>Rented by</v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.contract }}
-              </v-list-item-subtitle>
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title> Device </v-list-item-title>
             </v-list-item-content>
+            {{ gpuItem?.device }}
           </v-list-item>
           <v-divider />
-        </template>
-      </v-data-table>
-    </v-card>
-  </v-container>
+          <v-list-item v-if="gpuItem.contract !== undefined">
+            <v-tooltip top nudge-bottom="30">
+              <template v-slot:activator="{ on, attrs }">
+                <v-list-item-content v-bind="attrs" v-on="on">
+                  <v-list-item-title> Contract ID</v-list-item-title>
+                </v-list-item-content>
+              </template>
+              <span>The contract id that reserve this GPU card</span>
+            </v-tooltip>
+            {{ gpuItem?.contract }}
+          </v-list-item>
+          <v-divider /> </v-list></v-col
+    ></v-row>
+  </v-card>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -52,41 +97,22 @@ import { INodeGPU } from "../graphql/api";
 @Component({})
 export default class GPUDetails extends Vue {
   @Prop({ required: true }) nodeGPU!: INodeGPU[];
-  headers = [{ text: "Card ID", value: "id" }];
-  nodeGPU1 = [
-    {
-      id: "0000:0e:00.0/1002/744c",
-      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
-      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
-      contract: 31540,
-    },
-    {
-      id: "0000:0e:00.0/100d2/744c",
-      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
-      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
-      contract: 31540,
-    },
-    {
-      id: "0000:0e:00.0/1002s/744c",
-      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
-      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
-      contract: 31540,
-    },
-    {
-      id: "0000:0e:00.0/100sa2/744c",
-      vendor: "Advanced Micro Devices, Inc. [AMD/ATI]",
-      device: "Navi 31 [Radeon RX 7900 XT/7900 XTX]",
-      contract: 31540,
-    },
-  ];
-  expandedItem: INodeGPU | null = null;
-  toggleExpanded(item: INodeGPU) {
-    console.log([item, item, item]);
-    if (this.expandedItem === item) {
-      this.expandedItem = null;
-    } else {
-      this.expandedItem = item;
-    }
+  nodeGPUitems: {
+    text: string;
+    value: INodeGPU;
+
+    disabled: false;
+  }[] = this.$props.nodeGPU.map((item: INodeGPU) => {
+    return {
+      text: item.id,
+      value: item,
+      disabled: false,
+    };
+  });
+
+  gpuItem = this.$props.nodeGPU[0];
+  copy(id: string) {
+    navigator.clipboard.writeText(id);
   }
 }
 </script>

From d2fe6248ee56f96a24da181609b21a3c3e524d0a Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Thu, 22 Jun 2023 15:14:26 +0300
Subject: [PATCH 5/9] make contracts optional

---
 packages/dashboard/src/explorer/graphql/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/explorer/graphql/api.ts b/packages/dashboard/src/explorer/graphql/api.ts
index 79a7e76152..b153987c63 100644
--- a/packages/dashboard/src/explorer/graphql/api.ts
+++ b/packages/dashboard/src/explorer/graphql/api.ts
@@ -102,7 +102,7 @@ export interface INodeGPU {
   id: string;
   vendor: string;
   device: string;
-  contract: number;
+  contract?: number;
 }
 export interface INodeStatisticsUser {
   deployments: number;

From 5ca04d194960a747e62d1f266cf463249726a2e4 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Thu, 22 Jun 2023 16:06:05 +0300
Subject: [PATCH 6/9] add error snakebar

---
 .../dashboard/src/explorer/components/DetailsV2.vue | 13 +++++++++----
 .../src/explorer/components/GPUDetails.vue          |  7 ++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/dashboard/src/explorer/components/DetailsV2.vue b/packages/dashboard/src/explorer/components/DetailsV2.vue
index 19d0c74244..3188f2138a 100644
--- a/packages/dashboard/src/explorer/components/DetailsV2.vue
+++ b/packages/dashboard/src/explorer/components/DetailsV2.vue
@@ -43,6 +43,9 @@
           <v-col :cols="screen_max_700.matches ? 12 : screen_max_1200.matches ? 6 : 4" v-if="node && nodeGPU">
             <GPUDetails :nodeGPU="nodeGPU" />
           </v-col>
+          <v-snackbar :timeout="2000" :value="gpuError" color="transparent" text>
+            <v-alert class="ma-2" dense outlined type="error"> Failed to receive node GPUs information </v-alert>
+          </v-snackbar>
         </v-row>
       </div>
       <div v-if="loading" class="pt-10">
@@ -57,7 +60,7 @@ import axios from "axios";
 import { DocumentNode } from "graphql";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
-import { ICountry, INode, INodeStatistics } from "../graphql/api";
+import { ICountry, INode, INodeGPU, INodeStatistics } from "../graphql/api";
 import { GrafanaStatistics } from "../utils/getMetricsUrl";
 import mediaMatcher from "../utils/mediaMatcher";
 import CountryDetails from "./CountryDetails.vue";
@@ -92,8 +95,8 @@ export default class Details extends Vue {
   loading = false;
   grafanaUrl = "";
   interfaces = undefined;
-  nodeGPU = undefined;
-
+  nodeGPU: INodeGPU[] | undefined;
+  gpuError = false;
   data: any = {};
 
   get node(): INode {
@@ -137,8 +140,10 @@ export default class Details extends Vue {
                   timeout: 5000,
                 })
               ).data;
+              this.gpuError = false;
             } catch (error) {
-              console.log(error);
+              this.gpuError = true;
+              this.nodeGPU = undefined;
             }
           }
 
diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
index 7b58754538..184b7a70ee 100644
--- a/packages/dashboard/src/explorer/components/GPUDetails.vue
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -12,8 +12,8 @@
     <v-row>
       <v-col cols="12" class="pt-0">
         <!-- :cols="screen_max_800.matches ? 12 : screen_max_1000.matches ? 6 : 4" -->
-        <v-list>
-          <v-list-item v-if="gpuItem">
+        <v-list v-if="gpuItem">
+          <v-list-item>
             <v-list-item-content>
               <v-row class="d-flex justify-space-between">
                 <v-tooltip top nudge-bottom="30">
@@ -85,7 +85,8 @@
             </v-tooltip>
             {{ gpuItem?.contract }}
           </v-list-item>
-          <v-divider /> </v-list></v-col
+          <v-divider />
+        </v-list> </v-col
     ></v-row>
   </v-card>
 </template>

From 57279378e63ecbee1c4035e0e45e63cdcced1ed0 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Thu, 22 Jun 2023 16:49:55 +0300
Subject: [PATCH 7/9] fix typo

---
 packages/dashboard/src/explorer/components/GPUDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
index 184b7a70ee..9cd3317234 100644
--- a/packages/dashboard/src/explorer/components/GPUDetails.vue
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -81,7 +81,7 @@
                   <v-list-item-title> Contract ID</v-list-item-title>
                 </v-list-item-content>
               </template>
-              <span>The contract id that reserve this GPU card</span>
+              <span>The contract id that reserves this GPU card</span>
             </v-tooltip>
             {{ gpuItem?.contract }}
           </v-list-item>

From 37ab0dd7232d5d6747940f39186e091ddedb4f7e Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Fri, 23 Jun 2023 01:00:48 +0300
Subject: [PATCH 8/9] enhance code

---
 .../src/explorer/components/GPUDetails.vue    | 77 +++++++++----------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
index 9cd3317234..1fab3a9465 100644
--- a/packages/dashboard/src/explorer/components/GPUDetails.vue
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -15,48 +15,43 @@
         <v-list v-if="gpuItem">
           <v-list-item>
             <v-list-item-content>
-              <v-row class="d-flex justify-space-between">
-                <v-tooltip top nudge-bottom="30">
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-col v-bind="attrs" v-on="on" cols="3">
-                      <v-list-item-title class="pt-3"
-                        >Card ID
-                        <v-chip
-                          lose-icon="mdi-delete"
-                          :color="gpuItem.contract ? 'warning' : 'success'"
-                          small
-                          class="mb-1 ml-2"
-                          >{{ gpuItem.contract ? "Reserved" : "Available" }}</v-chip
-                        >
-                      </v-list-item-title>
-                    </v-col>
-                  </template>
-                  <span>Card id that's used in a deployment</span>
-                </v-tooltip>
-
-                <v-col cols="6" class="mr-2">
-                  <v-select
-                    v-if="nodeGPUitems.length > 1"
-                    append-outer-icon="mdi-content-copy"
-                    hide-details
-                    solo
-                    v-model="gpuItem"
-                    :items="nodeGPUitems"
-                    @input.native="gpuItem = $event.srcElement.value.value"
-                    @click:append-outer="copy(gpuItem.id)"
-                  />
-                  <v-text-field
-                    v-else
-                    :value="gpuItem.id"
-                    readonly
-                    hide-details
-                    append-outer-icon="mdi-content-copy"
-                    @click:append-outer="copy(gpuItem.id)"
-                    solo
-                  ></v-text-field>
-                </v-col>
-              </v-row>
+              <v-tooltip top nudge-bottom="30">
+                <template v-slot:activator="{ on, attrs }">
+                  <v-list-item-title class="pt-3" v-bind="attrs" v-on="on"
+                    >Card ID
+                    <v-chip
+                      lose-icon="mdi-delete"
+                      :color="gpuItem.contract ? 'warning' : 'success'"
+                      small
+                      class="mb-1 ml-2"
+                      >{{ gpuItem.contract ? "Reserved" : "Available" }}</v-chip
+                    >
+                  </v-list-item-title>
+                </template>
+                <span>Card id that's used in a deployment</span>
+              </v-tooltip>
             </v-list-item-content>
+            <v-col class="mr-2">
+              <v-select
+                v-if="nodeGPUitems.length > 1"
+                append-outer-icon="mdi-content-copy"
+                hide-details
+                solo
+                v-model="gpuItem"
+                :items="nodeGPUitems"
+                @input.native="gpuItem = $event.srcElement.value.value"
+                @click:append-outer="copy(gpuItem.id)"
+              />
+              <v-text-field
+                v-else
+                :value="gpuItem.id"
+                readonly
+                hide-details
+                append-outer-icon="mdi-content-copy"
+                @click:append-outer="copy(gpuItem.id)"
+                solo
+              ></v-text-field>
+            </v-col>
           </v-list-item>
           <v-divider />
           <v-list-item>

From 09d4033018b6c467846e056ca00212035b22c9f1 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Fri, 23 Jun 2023 01:03:00 +0300
Subject: [PATCH 9/9] enhance ui

---
 packages/dashboard/src/explorer/components/GPUDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/explorer/components/GPUDetails.vue b/packages/dashboard/src/explorer/components/GPUDetails.vue
index 1fab3a9465..b93fd4e65d 100644
--- a/packages/dashboard/src/explorer/components/GPUDetails.vue
+++ b/packages/dashboard/src/explorer/components/GPUDetails.vue
@@ -31,7 +31,7 @@
                 <span>Card id that's used in a deployment</span>
               </v-tooltip>
             </v-list-item-content>
-            <v-col class="mr-2">
+            <v-col class="mr-n4">
               <v-select
                 v-if="nodeGPUitems.length > 1"
                 append-outer-icon="mdi-content-copy"