Cleanup unused code, lazy load jspdf & sentry, optimize lodash imports to enable tree shaking, use dynamic routes, configure vite optimizeDeps, remove duplicate project name (#4432)

zaelgohary · web-flow · commit 13ba9599e1a7 · 2025-12-03T12:20:55.000+02:00
diff --git a/packages/playground/src/calculator/pricing_calculator.vue b/packages/playground/src/calculator/pricing_calculator.vue
@@ -235,7 +235,7 @@
 <script lang="ts">
 import { QueryClient } from "@threefold/tfchain_client";
 import { computed, ref, watch } from "vue";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Used in template
 import type { VForm } from "vuetify/components/VForm";
 
 import { manual } from "@/utils/manual";
diff --git a/packages/playground/src/components/filter.vue b/packages/playground/src/components/filter.vue
@@ -78,7 +78,8 @@
 
 <script lang="ts" setup>
 import type { NodeStatus } from "@threefold/gridproxy_client";
-import { cloneDeep, isEmpty } from "lodash";
+import cloneDeep from "lodash/cloneDeep.js";
+import isEmpty from "lodash/isEmpty.js";
 import equals from "lodash/fp/equals.js";
 import { computed, defineComponent, nextTick, onMounted, type PropType, ref, watch } from "vue";
 import { type LocationQueryRaw, useRoute } from "vue-router";
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { noop } from "lodash";
+import noop from "lodash/fp/noop.js";
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
diff --git a/packages/playground/src/components/node_selector/TfDomainName.vue b/packages/playground/src/components/node_selector/TfDomainName.vue
@@ -104,7 +104,7 @@
 
 <script lang="ts">
 import { type FarmInfo, Features, type FilterOptions, type NodeInfo } from "@threefold/grid_client";
-import { noop } from "lodash";
+import noop from "lodash/fp/noop.js";
 import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { type InputValidatorService, useInputRef } from "@/hooks/input_validator";
@@ -114,7 +114,7 @@ import { useForm, useFormRef, ValidatorStatus } from "../../hooks/form_validator
 import { useWatchDeep } from "../../hooks/useWatchDeep";
 import { useGrid } from "../../stores";
 import type { DomainInfo, NetworkFeatures, SelectionDetailsFilters } from "../../types/nodeSelector";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Used in template
 import type { INode } from "../../utils/filter_nodes";
 import { getNodePageCount, loadNodes } from "../../utils/nodeSelector";
 
diff --git a/packages/playground/src/components/node_selector/TfSelectGpu.vue b/packages/playground/src/components/node_selector/TfSelectGpu.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import type { GPUCardInfo, NodeInfo } from "@threefold/grid_client";
-import { noop } from "lodash";
+import noop from "lodash/fp/noop.js";
 import { getCurrentInstance, onMounted, onUnmounted, type PropType, ref } from "vue";
 
 import type { InputValidatorService } from "@/hooks/input_validator";
diff --git a/packages/playground/src/components/simulator.vue b/packages/playground/src/components/simulator.vue
@@ -139,9 +139,7 @@
           <v-row v-if="!isAdvanced" class="mt-1 px-4">
             <div class="d-flex align-center">
               <label class="label mr-2 mb-0">Net Profit</label>
-              <!-- <v-switch hide-details color="primary" v-model="isProfit" inset disabled /> -->
               <span class="slider" />
-              <!-- <label class="label ml-2">Return On Investment</label> -->
             </div>
           </v-row>
           <v-row v-show="!isAdvanced">
@@ -167,7 +165,6 @@
                 />
               </input-validator>
 
-              <!-- <v-text-field disabled label="Return On Investment" v-model.number="ROI" /> -->
               <v-text-field v-model.number="netProfit" disabled label="Net Profit" type="number" />
               <v-text-field v-model.number="grossProfit" disabled label="Gross Profit" type="number" />
               <v-text-field v-model.number="totalCosts" disabled label="Total Costs" type="number" />
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -10,9 +10,7 @@
         <v-alert v-if="selectedKeys.length === 0" type="warning" class="mt-2">
           Attention: It appears that no SSH keys have been selected. In order to access your deployment, you must send
           at least one SSH key. You can manage your SSH keys from the
-          <router-link :to="DashboardRoutes.Deploy.SSHKey">
-            SSH keys management page
-          </router-link>
+          <router-link :to="DashboardRoutes.Deploy.SSHKey"> SSH keys management page </router-link>
           and add more as needed.
         </v-alert>
         <v-alert type="info" class="mt-3">
@@ -52,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { noop } from "lodash";
+import noop from "lodash/fp/noop.js";
 import { capitalize, defineComponent, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 import { useTheme } from "vuetify";
 
@@ -92,11 +90,10 @@ export default defineComponent({
 
     function chipClass(key: SSHKeyData) {
       if (isKeySelected(key)) return ["bg-primary", "v-chip--selected"];
-      
+
       const keys = document.querySelectorAll(".keys .v-chip");
       keys.forEach(key => key.classList.remove("v-chip--selected"));
       return "anchor";
-      
     }
 
     function selectKey(key: SSHKeyData) {
diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -93,8 +93,6 @@
       </v-data-table>
     </v-card-text>
 
-    <!-- <v-divider /> -->
-
     <v-card-actions class="justify-end my-1 mr-2">
       <v-tooltip location="bottom" text="Export all selected keys.">
         <template #activator="{ props }">
diff --git a/packages/playground/src/dashboard/components/NodeMintingDetails.vue b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
@@ -59,9 +59,7 @@
                       </v-row>
                       <v-row class="row-style">
                         <v-col class="py-1" cols="1" sm="2" style="min-width: fit-content">
-                          <v-list-item style="text-transform: uppercase">
-                            CU :
-                          </v-list-item>
+                          <v-list-item style="text-transform: uppercase"> CU : </v-list-item>
                         </v-col>
                         <v-col class="py-1">
                           <v-list-item>
@@ -79,9 +77,7 @@
                       </v-row>
                       <v-row class="row-style">
                         <v-col class="py-1" cols="1" sm="2" style="min-width: fit-content">
-                          <v-list-item style="text-transform: uppercase">
-                            SU :
-                          </v-list-item>
+                          <v-list-item style="text-transform: uppercase"> SU : </v-list-item>
                         </v-col>
                         <v-col class="py-1">
                           <v-list-item>
@@ -99,9 +95,7 @@
                       </v-row>
                       <v-row class="row-style">
                         <v-col class="py-1" cols="1" sm="2" style="min-width: fit-content">
-                          <v-list-item style="text-transform: uppercase">
-                            NU :
-                          </v-list-item>
+                          <v-list-item style="text-transform: uppercase"> NU : </v-list-item>
                         </v-col>
                         <v-col class="py-1">
                           <v-list-item>
@@ -126,22 +120,17 @@
         </v-row>
       </div>
       <div v-else>
-        <v-card-text class="font-weight-bold">
-          No receipts found for this month
-        </v-card-text>
+        <v-card-text class="font-weight-bold"> No receipts found for this month </v-card-text>
       </div>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="secondary" :disabled="!node.receipts" @click="downloadNodeReceipt">
-          Download Node Receipt
-        </v-btn>
+        <v-btn color="secondary" :disabled="!node.receipts" @click="downloadNodeReceipt"> Download Node Receipt </v-btn>
       </v-card-actions>
     </v-card>
   </v-container>
 </template>
 
 <script lang="ts">
-import { jsPDF } from "jspdf";
 import moment from "moment";
 import { computed, type PropType, ref } from "vue";
 
@@ -174,6 +163,9 @@ export default {
     const selectedData = computed(() => [selectedMonth.value, selectedYear.value].filter(Boolean).join(", "));
 
     async function downloadNodeReceipt() {
+      // Lazy load jspdf and jspdf-autotable only when PDF download is requested
+      await import("jspdf-autotable");
+      const { jsPDF } = await import("jspdf");
       let doc = new jsPDF();
       doc = await generateReceipt(doc, props.node);
       doc.save(`node_${props.node.nodeId}_receipts.pdf`);
diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
@@ -160,11 +160,11 @@
 import type { PublicConfig } from "@threefold/grid_client";
 import { ValidationError } from "@threefold/types";
 import CidrTools from "cidr-tools";
-import { isEqual } from "lodash";
+import isEqual from "lodash/isEqual.js";
 import { default as PrivateIp } from "private-ip";
 import { onMounted, ref, watch } from "vue";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Used in template
 import type { RuleReturn } from "@/components/input_validator.vue";
 import { useFormRef } from "@/hooks/form_validator";
 import { useGrid } from "@/stores";
diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
@@ -46,9 +46,7 @@
     >
       <template #top>
         <v-toolbar flat color="primary">
-          <v-toolbar-title class="mb-6 text-subtitle-1 text-center">
-            Your Farms
-          </v-toolbar-title>
+          <v-toolbar-title class="mb-6 text-subtitle-1 text-center"> Your Farms </v-toolbar-title>
         </v-toolbar>
       </template>
       <template #expanded-row="{ columns, item }">
@@ -92,9 +90,7 @@
           <v-dialog v-model="showDialogue" max-width="600" attach="#modals" @update:model-value="closeDialog">
             <v-card>
               <v-toolbar color="primary" dark>
-                <v-toolbar-title class="custom-toolbar_title mb-6">
-                  Add/Edit Stellar V2 Address
-                </v-toolbar-title>
+                <v-toolbar-title class="custom-toolbar_title mb-6"> Add/Edit Stellar V2 Address </v-toolbar-title>
               </v-toolbar>
               <div class="pt-6 px-6">
                 <form-validator v-model="valid">
@@ -119,9 +115,7 @@
                 </form-validator>
               </div>
               <v-card-actions class="justify-end px-5 pb-5 pt-0">
-                <v-btn color="anchor" @click="closeDialog">
-                  Close
-                </v-btn>
+                <v-btn color="anchor" @click="closeDialog"> Close </v-btn>
                 <v-btn
                   color="secondary"
                   :loading="isAdding"
@@ -142,8 +136,7 @@
 <script lang="ts">
 import { StrKey } from "@stellar/stellar-sdk";
 import { type Farm, SortBy, SortOrder } from "@threefold/gridproxy_client";
-import { jsPDF } from "jspdf";
-import { debounce } from "lodash";
+import debounce from "lodash/debounce.js";
 import { ref, watch } from "vue";
 
 import { gridProxyClient } from "@/clients";
@@ -312,6 +305,9 @@ export default {
     }
 
     async function downloadFarmReceipts(farmId: number) {
+      // Lazy load jspdf and jspdf-autotable only when PDF download is requested
+      await import("jspdf-autotable");
+      const { jsPDF } = await import("jspdf");
       // farm summary receipt
       const docSum = new jsPDF();
       const { data, count } = await gridProxyClient.nodes.list({
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -1,7 +1,6 @@
 import "mosha-vue-toastify/dist/style.css";
 import "./global.scss";
 
-import * as Sentry from "@sentry/vue";
 import { createPinia } from "pinia";
 import { type ComponentPublicInstance, createApp } from "vue";
 
@@ -34,19 +33,22 @@ if (import.meta.env.DEV) {
   };
 }
 
+// Lazy load Sentry only when telemetry is enabled
 if (window.env.ENABLE_TELEMETRY) {
-  Sentry.init({
-    app,
-    dsn: window.env.SENTRY_DSN,
-    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
-    release: process.env.VERSION,
-    // Performance Monitoring
-    tracesSampleRate: 1.0, //  Capture 100% of the transactions
-    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
-    // Session Replay
-    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  import("@sentry/vue").then(Sentry => {
+    Sentry.init({
+      app,
+      dsn: window.env.SENTRY_DSN,
+      integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+      release: process.env.VERSION,
+      // Performance Monitoring
+      tracesSampleRate: 1.0, //  Capture 100% of the transactions
+      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+      // Session Replay
+      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+    });
   });
 }
 
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
-import LoggedInLanding from "@/components/logged_in_landing.vue";
 import { DashboardRoutes } from "@/router/routes";
 
 export interface InfoMeta {
@@ -898,7 +897,7 @@ const mainRoutes: RouteRecordRaw[] = [
   {
     name: "landing",
     path: DashboardRoutes.Other.HomePage,
-    component: LoggedInLanding,
+    component: () => import("@/components/logged_in_landing.vue"),
     meta: { title: "Landing Page" },
   },
   // TFGrid Routes
diff --git a/packages/playground/src/utils/delete_deployment.ts b/packages/playground/src/utils/delete_deployment.ts
@@ -101,7 +101,6 @@ export function solutionHasGateway(projectName: ProjectName) {
     ProjectName.Nostr,
     ProjectName.StaticWebsite,
     ProjectName.NodePilot,
-    ProjectName.Openwebui,
   ];
 
   for (const solution of solutions) {
diff --git a/packages/playground/src/utils/get_metrics_url.ts b/packages/playground/src/utils/get_metrics_url.ts
@@ -3,12 +3,6 @@ import type { GridNode, TwinsQuery } from "@threefold/gridproxy_client";
 
 import { gridProxyClient } from "@/clients";
 
-export interface IGrafanaArgs {
-  farmID: number;
-  twinID: number;
-  accountID: string;
-}
-
 export class GrafanaStatistics {
   private client: GridProxyClient;
   private network: string;
diff --git a/packages/playground/src/utils/get_nodes.ts b/packages/playground/src/utils/get_nodes.ts
@@ -54,7 +54,6 @@ export async function getAllNodes(grid: GridClient | null, options?: NodeFilters
   } else {
     const offNodes: NodeInfo[] = await grid!.nodes.filter({
       ...options,
-      // status: NodeStatus.down,
       page: requestPageNumber.value,
     });
 
@@ -192,11 +191,11 @@ export async function getNode(nodeId: number, config?: NodesExtractOptions): Pro
  * @param {number} resource - The resource in GB.
  * @returns {number} - The resource in Bytes.
  */
-export const toBytes = (resource: number | undefined): number => {
+const toBytes = (resource: number | undefined): number => {
   return resource ? resource * 1024 * 1024 * 1024 : 0;
 };
 
-export function convert(value: string | undefined) {
+function convert(value: string | undefined) {
   return value ? Math.ceil(toBytes(+value)) : undefined;
 }
 
diff --git a/packages/playground/src/utils/helpers.ts b/packages/playground/src/utils/helpers.ts
@@ -64,17 +64,6 @@ export function normalizeBalance(num: number | string | undefined, floor = false
   return (+num).toFixed(3).replace(/\.0+$/g, "");
 }
 
-export function isEnoughBalance(balance: any, min = 0.001): boolean {
-  return balance?.free > min ? true : false;
-}
-
-export function getDashboardURL(network: string) {
-  if (network === "main") {
-    return "https://dashboard.grid.tf";
-  }
-  return `https://dashboard.${network}.grid.tf`;
-}
-
 export function getCardName(card: NodeGPUCardType): string {
   return card.vendor + " - " + card.device;
 }
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
@@ -2,10 +2,6 @@ export enum IPType {
   single = "Single",
   range = "Range",
 }
-export enum Selection {
-  AUTOMATED = "automated",
-  MANUAL = "manual",
-}
 
 export interface IPublicConfig {
   ipv4: string;
diff --git a/packages/playground/src/views/nodes.vue b/packages/playground/src/views/nodes.vue
@@ -479,7 +479,7 @@
 
 <script lang="ts">
 import { type GridNode, SortBy, SortOrder, UnifiedNodeStatus } from "@threefold/gridproxy_client";
-import { sortBy } from "lodash";
+import sortBy from "lodash/sortBy.js";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
@@ -143,7 +143,6 @@
           </v-col>
         </v-row>
       </template>
-      <!-- <v-divider horizontal></v-divider> -->
       <div class="d-flex justify-end mt-4 mb-2">
         <VBtn v-if="profileManager.profile" color="anchor" @click="$emit('update:modelValue', false)"> Close </VBtn>
         <VBtn
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
