Contract view: add node details (#1288)

* init get node status logic

* change gridproxy client version

* add node status chips

* make node id column sortable

packages/playground/package.json

@@ -24,7 +24,7 @@
     "mosha-vue-toastify": "^1.0.23",
     "pinia": "^2.0.32",
     "qrcode": "^1.5.1",
-    "tf_gridproxy_client": "^1.0.2",
+    "@threefold/gridproxy_client": "^2.1.1-rc1",
     "tfgrid-gql": "^1.0.1",
     "validator": "^13.9.0",
     "vue": "^3.2.47",

packages/playground/src/clients/index.ts

@@ -1,4 +1,4 @@
-import GridProxyClient, { Network } from "tf_gridproxy_client";
+import GridProxyClient, { Network } from "@threefold/gridproxy_client";
 import TFGridGqlClient, { Networks } from "tfgrid-gql";
 
 const network = process.env.NETWORK || window.env.NETWORK;

packages/playground/src/components/select_country.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NodeStatus } from "tf_gridproxy_client";
+import { NodeStatus } from "@threefold/gridproxy_client";
 import { onMounted, ref, watch } from "vue";
 
 import { gridProxyClient } from "../clients";

packages/playground/src/weblets/tf_contracts_list.vue

@@ -49,6 +49,16 @@
       <template #[`item.solutionType`]="{ item }">
         {{ solutionType[item.value.solutionType] ?? item.value.solutionType }}
       </template>
+      <template #[`item.nodeStatus`]="{ item }">
+        <v-chip
+          v-if="item.value.nodeId !== '-' && !loading"
+          :color="getNodeStateColor(nodeStatus[item.value.nodeId])"
+          class="text-capitalize"
+        >
+          {{ nodeStatus[item.value.nodeId] }}
+        </v-chip>
+        <p v-else>-</p>
+      </template>
       <template #[`item.actions`]="{ item }">
         <v-tooltip text="Show Details">
           <template #activator="{ props }">
@@ -91,8 +101,8 @@
     <v-card>
       <v-card-title class="text-h5 mt-2"> Are you sure you want to delete the following contracts? </v-card-title>
       <v-alert class="ma-4" type="warning" variant="tonal"
-        >It is advisable to remove the contract from its solution page, especially
-        when multiple contracts may be linked to the same instance.</v-alert
+        >It is advisable to remove the contract from its solution page, especially when multiple contracts may be linked
+        to the same instance.</v-alert
       >
       <v-alert class="mx-4" type="warning" variant="tonal">Deleting contracts may take a while to complete.</v-alert>
       <v-card-text>
@@ -138,7 +148,7 @@
 
 <script lang="ts" setup>
 import { ContractStates, type GridClient } from "@threefold/grid_client";
-import { ref } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { useProfileManager } from "../stores";
 import type { VDataTableHeader } from "../types";
@@ -152,6 +162,7 @@ const loading = ref(false);
 const isExporting = ref(false);
 const grid = ref<GridClient | null>();
 const selectedContracts = ref<NormalizedContract[]>([]);
+const nodeStatus = ref() as Ref<{ [x: number]: NodeStatus }>;
 const headers: VDataTableHeader = [
   { title: "PLACEHOLDER", key: "data-table-select" },
   { title: "ID", key: "contractId" },
@@ -162,6 +173,8 @@ const headers: VDataTableHeader = [
   { title: "Solution Name", key: "solutionName" },
   { title: "Created At", key: "createdAt" },
   { title: "Expiration", key: "expiration" },
+  { title: "Node ID", key: "nodeId" },
+  { title: "Node Status", key: "nodeStatus", sortable: false },
   { title: "Details", key: "actions", sortable: false },
 ];
 
@@ -170,9 +183,15 @@ async function onMount() {
   contracts.value = [];
   grid.value = await getGrid(profileManager.profile!);
   contracts.value = await getUserContracts(grid.value!);
+  nodeStatus.value = await getNodeStatus(nodeIDs.value);
   loading.value = false;
 }
 
+const nodeIDs = computed(() => {
+  const allNodes = contracts.value.map(contract => contract.nodeId);
+  return [...new Set(allNodes)];
+});
+
 const loadingContractId = ref<number>();
 const contractLocked = ref<ContractLock>();
 
@@ -260,11 +279,35 @@ async function onDelete() {
   }
   deleting.value = false;
 }
+
+async function getNodeStatus(nodeIDs: (number | undefined)[]) {
+  const resultPromises = nodeIDs.map(async nodeId => {
+    if (typeof nodeId !== "number") return {};
+    const status = (await gridProxyClient.nodes.byId(nodeId)).status;
+    return { [nodeId]: status };
+  });
+
+  const resultsArray = await Promise.all(resultPromises);
+
+  return resultsArray.reduce((acc, obj) => Object.assign(acc, obj), {});
+}
+function getNodeStateColor(state: NodeStatus): string {
+  switch (state) {
+    case NodeStatus.Up:
+      return "success";
+    case NodeStatus.Down:
+      return "error";
+    case NodeStatus.Standby:
+      return "warning";
+  }
+}
 </script>
 
 <script lang="ts">
+import { NodeStatus } from "@threefold/gridproxy_client";
 import type { ContractLock } from "@threefold/tfchain_client";
 
+import { gridProxyClient } from "../clients";
 import ListTable from "../components/list_table.vue";
 import { solutionType } from "../types/index";
 import { downloadAsJson, normalizeError } from "../utils/helpers";

yarn.lock

@@ -3912,6 +3912,11 @@
   resolved "https://registry.yarnpkg.com/@threefold/extension_api/-/extension_api-0.0.1-rc6.tgz#9271ac014f8cfc5b0351f75bc7bee6f9e5e744a2"
   integrity sha512-rICTgNT7NuAlJCi9PcQ4l5q4jh0aQ/9nilXu9SHHo4toSYd9NxeI4HxF+Vmk1vR8O7iA101SoRhJrJCAqjtROw==
 
+"@threefold/gridproxy_client@^2.1.1-rc1":
+  version "2.1.1-rc1"
+  resolved "https://registry.yarnpkg.com/@threefold/gridproxy_client/-/gridproxy_client-2.1.1-rc1.tgz#3e79b375d8bb5bcd598d2248308cce2841f78913"
+  integrity sha512-IPT3irRQ4MzBUK1BRBCMeagU8JO5RhpIjt+TzgrQJMYfgTzoo597uirfdsnzXoAiHK/oJhokQx9wr5mBOcFgRQ==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
@@ -18319,11 +18324,6 @@ tf-svelte-rx-forms@^1.0.3:
     "@types/validator" "^13.7.7"
     validator "^13.7.0"
 
-tf_gridproxy_client@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/tf_gridproxy_client/-/tf_gridproxy_client-1.0.2.tgz#058f6020f68e9ace27406ae4a2af61efce3ad840"
-  integrity sha512-uV0Id9qJLAf4C/7gRdCa3x2bYKJAfWg/EhW6z3XFVXSaV+Mv8BjQKSeH18OBJXpvfdTeIkIhbR8I/WZbXFycrg==
-
 tfgrid-gql@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tfgrid-gql/-/tfgrid-gql-1.0.1.tgz#9c93c2d409badac2cec417e3719b78665617fea7"