fix(dcellar-web-ui): unavailable sp not placed last, dev startup port…

… auto-increment issue

apps/dcellar-web-ui/.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['react', '@typescript-eslint'],
-  ignorePatterns: ['next.config.js', 'public/wasm/**.js'],
+  ignorePatterns: ['next.config.js', 'public/wasm/**.js', 'scripts/**.js'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-unused-vars': 'off',

apps/dcellar-web-ui/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.0",
   "private": false,
   "scripts": {
-    "dev": "next dev -p 3101",
+    "dev": "node ./scripts/dev.js -p 3200",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

apps/dcellar-web-ui/scripts/dev.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+
+const args = process.argv.slice(2);
+
+let port = 3200; // Default port is 3200
+
+// Parsing command line arguments
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+  if (arg === '-p' || arg === '--port') {
+    const nextArg = args[i + 1];
+    if (nextArg && !isNaN(nextArg)) {
+      port = parseInt(nextArg, 10);
+    } else {
+      console.error('Invalid port number. Please provide a valid port number.');
+      process.exit(1);
+    }
+  }
+}
+
+function getNextAvailablePort(port) {
+  const command = `lsof -ti:${port}`;
+  try {
+    execSync(command);
+    return getNextAvailablePort(port + 1);
+  } catch (error) {
+    return port;
+  }
+}
+
+function startNextServer(port) {
+  const command = `next dev -p ${port}`;
+  console.log(`Starting Next.js server on port ${port}`);
+  execSync(command, { stdio: 'inherit' });
+}
+
+const availablePort = getNextAvailablePort(port);
+startNextServer(availablePort);

apps/dcellar-web-ui/src/modules/bucket/components/SPSelector/index.tsx

@@ -58,17 +58,17 @@ export const SPSelector = memo<SPSelectorProps>(function SPSelector({ onChange }
     return tmpValue.includes(tmpKeyword) || tmpName.includes(tmpKeyword);
   };
 
-  // Sort SPs with unavailable HTTP services or unavailable statuses last, and the rest by ascending latency.
+  // Sort: Based on the recommended system's sp data, ascending order of latency values for sps -> No sp data from the recommended system -> Unavailable sps
   const options: MenuOption[] = useMemo(
     () =>
       sort(allSpList, (sp) => {
         const meta = spMetaRecords[sp.endpoint];
-        if (!meta) {
-          return Number.MAX_SAFE_INTEGER;
-        }
         if (unAvailableSps.includes(sp.operatorAddress) || sp.status !== 0) {
           return Infinity;
         }
+        if (!meta) {
+          return Number.MAX_SAFE_INTEGER;
+        }
 
         return meta.Latency;
       }).map((item) => {