Merge pull request #3137 from threefoldtech/development_nodes_card

Show the node price if the node is rentable or rented by the logged-in user
threefoldtech · Jul 22, 2024 · fc61e87 · fc61e87
2 parents 8882aad + 4fb1019
commit fc61e87
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -68,7 +68,8 @@
         <span class="font-weight-bold" v-text="toReadableDate(node.uptime)" />
       </span>
       <span class="ml-2" v-if="node"
-        >Last Deployment Time: {{ lastDeploymentTime === 0 ? "N/A" : toHumanDate(lastDeploymentTime) }}
+        >Last Deployment Time:
+        {{ lastDeploymentTime === 0 ? "N/A" : toHumanDate(lastDeploymentTime) }}
       </span>
     </template>
 
@@ -175,7 +176,7 @@
       </VRow>
 
       <VRow>
-        <VCol class="tf-node-resource">
+        <VCol class="tf-node-resource mb-5">
           <ResourceDetails
             name="SSD Disks"
             :used="(node?.used_resources.sru ?? 0) + selectedMachines.reduce((r, m) => r + m.disk * 1e9, 0)"
@@ -192,7 +193,7 @@
           />
         </VCol>
       </VRow>
-      <div class="mt-5 ml-auto text-right">
+      <div class="ml-auto text-right" v-if="node && (rentedByUser || (node.status !== 'down' && node.rentable))">
         <v-tooltip bottom color="primary" close-delay="100" :disabled="!(node && node.dedicated)">
           <template v-slot:activator="{ isActive, props }">
             <span v-bind="props" v-on="isActive" class="font-weight-bold"
@@ -210,9 +211,24 @@
               hover
               :loading="loadingdiscountTableItems"
               :headers="[
-                { title: 'Packages', align: 'center', key: 'name', sortable: false },
-                { title: 'Discount', align: 'center', key: 'discount', sortable: false },
-                { title: 'TFTs Required', align: 'center', key: 'tfts', sortable: false },
+                {
+                  title: 'Packages',
+                  align: 'center',
+                  key: 'name',
+                  sortable: false,
+                },
+                {
+                  title: 'Discount',
+                  align: 'center',
+                  key: 'discount',
+                  sortable: false,
+                },
+                {
+                  title: 'TFTs Required',
+                  align: 'center',
+                  key: 'tfts',
+                  sortable: false,
+                },
               ]"
               :items="discountTableItems"
               disable-sort="true"
@@ -278,8 +294,7 @@ import type { GridClient, NodeInfo, NodeResources } from "@threefold/grid_client
 import { discountPackages } from "@threefold/grid_client";
 import { CertificationType, type GridNode } from "@threefold/gridproxy_client";
 import { QueryClient } from "@threefold/tfchain_client";
-import { computed, onMounted, ref, watch } from "vue";
-import { capitalize, type PropType } from "vue";
+import { capitalize, computed, onMounted, type PropType, ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import ReserveBtn from "@/dashboard/components/reserve_action_btn.vue";