Refactor Dashboard to use grid store instead of initializing grid mul…

…tiple times

packages/playground/src/components/contracts_list/contracts_table.vue

@@ -172,7 +172,7 @@ const props = defineProps({
     required: true,
   },
   grid: {
-    type: Object as PropType<Ref<GridClient | undefined>>,
+    type: Object as PropType<GridClient>,
     required: true,
   },
   loading: {
@@ -232,7 +232,7 @@ async function showDetails(value: any) {
   loadingContractId.value = contractId;
 
   try {
-    const deployment = await props.grid.value?.zos.getDeployment({ contractId });
+    const deployment = await props.grid?.zos.getDeployment({ contractId });
     return layout.value.openDialog(deployment, false, true);
   } catch (e) {
     failedContractId.value = contractId;
@@ -248,12 +248,12 @@ async function contractLockDetails(item: any) {
   contractStateDialog.value = true;
   loadingShowDetails.value = true;
   selectedItem.value = item;
-  await props.grid.value?.contracts
+  await props.grid?.contracts
     .contractLock({ id: item.contractId })
     .then((data: ContractLock) => {
       contractLocked.value = data;
     })
-    .catch(err => {
+    .catch((err: any) => {
       layout.value.setStatus(
         "failed",
         normalizeError(err, `Failed to fetch the contract ${item.contractId} lock details.`),
@@ -279,7 +279,7 @@ async function onDelete() {
   deleting.value = true;
 
   try {
-    await props.grid.value?.contracts.batchCancelContracts({
+    await props.grid?.contracts.batchCancelContracts({
       ids: selectedContracts.value.map(c => c.contractId),
     });
     contracts.value = contracts.value.filter(c => !selectedContracts.value.includes(c));

packages/playground/src/components/deployment_data_dialog.vue

@@ -164,6 +164,8 @@ const contract = computed(() => contracts.value?.[activeTab.value] ?? {});
 const code = computed(() => JSON.stringify(props.data || {}, undefined, 2));
 const html = computed(() => hljs.highlight(code.value, { language: "json" }).value);
 const profileManager = useProfileManager();
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function copy() {
   navigator.clipboard.writeText(code.value);
@@ -196,7 +198,6 @@ function getValue(key: string) {
 
 async function getGrafanaUrl() {
   isLoading.value = true;
-  const grid = await getGrid(profileManager.profile!);
   if (grid) {
     if (contract.value.type !== ContractType.NAME) {
       const nodeId = await grid.capacity.getNodeIdFromContractId({
@@ -213,8 +214,6 @@ getGrafanaUrl();
 
 async function getGPUInfo() {
   loadingCard.value = true;
-
-  const grid = await getGrid(profileManager.profile!);
   if (grid) {
     const nodeId = await grid.capacity.getNodeIdFromContractId({
       contractId: contract.value.contractId,
@@ -302,13 +301,14 @@ function getTooltipText(contract: any, index: number) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import { useProfileManager } from "@/stores/profile_manager";
 import { ContractType } from "@/utils/contracts";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
 import { GrafanaStatistics } from "@/utils/get_metrics_url";
-import { getGrid } from "@/utils/grid";
 
-import type { NodeInfo } from "../../../grid_client/dist/es6";
+import { useGrid } from "../stores";
 import type { Disk } from "../utils/deploy_vm";
 import CopyReadonlyInput from "./copy_readonly_input.vue";
 import { HighlightDark, HighlightLight } from "./highlight_themes";

packages/playground/src/components/deposit_dialog.vue

@@ -83,9 +83,8 @@ import { manual } from "@/utils/manual";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import QrcodeGenerator from "../components/qrcode_generator.vue";
-import { useProfileManager } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import { createCustomToast, ToastType } from "../utils/custom_toast";
-import { getGrid } from "../utils/grid";
 import CopyReadonlyInput from "./copy_readonly_input.vue";
 const depositDialog = ref(false);
 const emits = defineEmits(["close"]);
@@ -95,6 +94,8 @@ const loading = ref(false);
 const dots = ref(".");
 const interval = ref<number | null>(null);
 const ProfileManagerController = useProfileManagerController();
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 const apps = [
   {
@@ -141,7 +142,7 @@ onMounted(async () => {
   interval.value = window.setInterval(loadingDots, 500);
   try {
     loading.value = true;
-    const grid = await getGrid(profileManager.profile!);
+    updateGrid(grid, { projectName: "" });
     const address = profileManager.profile?.address as string;
     const receivedDeposit = await grid!.bridge.listenToMintCompleted({
       address: address,
@@ -171,8 +172,11 @@ onBeforeUnmount(() => {
 });
 </script>
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { defineComponent } from "vue";
 
+import { updateGrid } from "../utils/grid";
+
 export default defineComponent({
   name: "DepositDialog",
 });

packages/playground/src/components/funds_card.vue

@@ -25,28 +25,31 @@
 </template>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { createCustomToast, ToastType } from "../utils/custom_toast";
-import { getGrid } from "../utils/grid";
+import { updateGrid } from "../utils/grid";
 
 export default {
   name: "FundsCard",
   setup() {
     const loadingAddTFT = ref(false);
-    const profileManager = useProfileManager();
     const ProfileManagerController = useProfileManagerController();
+    const gridStore = useGrid();
+    const grid = gridStore.client as GridClient;
+
     const addTFT = async () => {
       if (window.env.NETWORK !== "dev" && window.env.NETWORK !== "qa") {
         window.open("https://gettft.com/gettft/", "_blank");
       } else {
         loadingAddTFT.value = true;
         try {
-          const grid = await getGrid(profileManager.profile!);
+          updateGrid(grid, { projectName: "" });
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;

packages/playground/src/components/manage_caprover_worker_dialog.vue

@@ -81,19 +81,18 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { addMachine, deleteMachine, loadVM } from "../utils/deploy_vm";
-import { getGrid } from "../utils/grid";
 import rootFs from "../utils/root_fs";
 
 const props = defineProps<{ master: any; data: any[]; projectName: string }>();
 const emits = defineEmits<{ (event: "close"): void; (event: "update:caprover", data: any): void }>();
 
-const profileManager = useProfileManager();
-
 const selectedWorkers = ref<any[]>([]);
 const deleting = ref(false);
 const deployedDialog = ref(false);
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 const worker = ref(createWorker());
 
@@ -112,8 +111,8 @@ async function deploy(layout: any) {
   layout.setStatus("deploy");
 
   try {
+    updateGrid(grid, { projectName: props.projectName });
     layout.value?.validateSSH();
-    const grid = await getGrid(profileManager.profile!, props.projectName);
 
     await layout.validateBalance(grid);
 
@@ -158,7 +157,6 @@ async function deploy(layout: any) {
 
 async function onDelete(cb: (workers: any[]) => void) {
   deleting.value = true;
-  const grid = await getGrid(profileManager.profile!, props.projectName);
   for (const worker of selectedWorkers.value) {
     console.log(props.master.name, worker.name);
 
@@ -184,8 +182,11 @@ async function onDelete(cb: (workers: any[]) => void) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import CaproverWorker, { createWorker } from "../components/caprover_worker.vue";
 import ListTable from "../components/list_table.vue";
+import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import ManageWorkerDialog from "./manage_worker_dialog.vue";
 

packages/playground/src/components/manage_gateway_dialog.vue

@@ -227,13 +227,13 @@
 </template>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
 import { onMounted, type PropType, ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { ProjectName } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { deployGatewayName, type GridGateway, loadDeploymentGateways } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 import IconActionBtn from "./icon_action_btn.vue";
@@ -247,7 +247,6 @@ export default {
     vm: { type: Array as PropType<any>, required: true },
   },
   setup(props) {
-    const profileManager = useProfileManager();
     const layout = useLayout();
     const gatewayTab = ref(0);
 
@@ -261,9 +260,10 @@ export default {
 
     const ip = props.vm.interfaces[0].ip as string;
     const networkName = props.vm.interfaces[0].network as string;
+    const gridStore = useGrid();
+    const grid = gridStore.client as GridClient;
 
     onMounted(async () => {
-      const grid = await getGrid(profileManager.profile!);
       oldPrefix.value =
         (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
         grid!.config.twinId;
@@ -281,7 +281,6 @@ export default {
         gateways.value = [];
         gatewaysToDelete.value = [];
         loadingGateways.value = true;
-        const grid = await getGrid(profileManager.profile!, props.vm.projectName);
         const { gateways: gws, failedToList } = await loadDeploymentGateways(grid!);
         gateways.value = gws;
         failedToListGws.value = failedToList;
@@ -297,7 +296,6 @@ export default {
 
       try {
         const [x, y] = ip.split(".");
-        const grid = await getGrid(profileManager.profile!, props.vm.projectName);
 
         const data = {
           name: networkName,
@@ -330,7 +328,6 @@ export default {
     const deleting = ref(false);
     async function deleteSelectedGateways() {
       deleting.value = true;
-      const grid = await getGrid(profileManager.profile!, props.vm.projectName);
       const deletedGateways = new Set<GridGateway>();
       for (const gw of gatewaysToDelete.value) {
         await grid!.gateway
@@ -347,8 +344,6 @@ export default {
     }
 
     return {
-      profileManager,
-
       oldPrefix,
       prefix,
       layout,

packages/playground/src/components/manage_k8s_worker_dialog.vue

@@ -48,26 +48,24 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { deleteWorker, deployWorker, loadK8S } from "../utils/deploy_k8s";
-import { getGrid } from "../utils/grid";
 
 const props = defineProps<{ data: K8S }>();
 const emits = defineEmits<{ (event: "close"): void; (event: "update:k8s", data: any): void }>();
 
-const profileManager = useProfileManager();
-
 const worker = ref(createWorker());
 const selectedWorkers = ref<any[]>([]);
 const deleting = ref(false);
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 function calcDiskSize(disks: { size: number }[]) {
   return disks.reduce((t, d) => t + d.size, 0) / 1024 ** 3;
 }
 
 async function deploy(layout: any) {
   layout.setStatus("deploy");
-  const grid = await getGrid(profileManager.profile!, props.data.projectName);
 
   deployWorker(grid!, {
     ...worker.value,
@@ -86,7 +84,6 @@ async function deploy(layout: any) {
 
 async function onDelete(cb: (workers: any[]) => void) {
   deleting.value = true;
-  const grid = await getGrid(profileManager.profile!, props.data.projectName);
 
   for (const worker of selectedWorkers.value) {
     try {
@@ -108,6 +105,8 @@ async function onDelete(cb: (workers: any[]) => void) {
 </script>
 
 <script lang="ts">
+import type { GridClient } from "@threefold/grid_client";
+
 import ListTable from "../components/list_table.vue";
 import type { K8S } from "../utils/load_deployment";
 import K8SWorker, { createWorker } from "./k8s_worker.vue";

packages/playground/src/components/select_gateway_node.vue

@@ -45,16 +45,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { FilterOptions } from "@threefold/grid_client";
+import type { FilterOptions, GridClient } from "@threefold/grid_client";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { ValidatorStatus } from "@/hooks/form_validator";
 
-import { useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { GatewayNode } from "../types";
 import type { FarmInterface } from "../types";
 import { loadGatewayNodes } from "../utils/gateway";
-import { getGrid } from "../utils/grid";
 
 const props = defineProps<{
   modelValue?: GatewayNode;
@@ -64,14 +63,14 @@ const props = defineProps<{
 }>();
 const emits = defineEmits<{ (event: "update:model-value", value: GatewayNode | undefined): void }>();
 
-const profileManager = useProfileManager();
-
 const loading = ref(false);
 const items = ref<any[]>([]);
 const page = ref(1);
 const size = 50;
 const validator = ref();
 const gatewayOption = ref("");
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
 
 onMounted(loadNextPage);
 onUnmounted(() => emits("update:model-value", undefined));
@@ -88,7 +87,6 @@ watch(
 async function loadNextPage() {
   loading.value = true;
   validator.value?.setStatus(ValidatorStatus.Init);
-  const grid = await getGrid(profileManager.profile!);
   let nodes = [];
   gatewayOption.value = "farm";
   const options: gatewayFilters = {

packages/playground/src/components/tf_notification.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ContractStates, type GqlContracts, type GqlNodeContract, type GqlRentContract } from "@threefold/grid_client";
-import type { GridNode } from "@threefold/gridproxy_client";
 import uniq from "lodash/fp/uniq.js";
 import { onMounted, ref } from "vue";