3420 storyboard for nodestable

.tool-versions

@@ -5,3 +5,4 @@ golang 1.21.8
 pre-commit 3.6.0
 golangci-lint 1.55.2
 earthly 0.8.3
+pnpm 9.0.6

webui/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

webui/.eslintrc.json

@@ -7,8 +7,14 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "extends": ["wesbos/typescript"],
-  "plugins": ["prettier", "import"],
+  "extends": [
+    "wesbos/typescript",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "prettier",
+    "import"
+  ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
@@ -33,7 +39,10 @@
     "endOfLine": 0,
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
-    "quotes": ["error", "double"],
+    "quotes": [
+      "error",
+      "double"
+    ],
     "import/no-extraneous-dependencies": [
       "error",
       {
@@ -45,7 +54,9 @@
   },
   "overrides": [
     {
-      "files": ["**/*.tsx"],
+      "files": [
+        "**/*.tsx"
+      ],
       "rules": {
         "react/prop-types": "off"
       }
@@ -57,11 +68,19 @@
     },
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
       }
     },
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     }
   },
   "ignorePatterns": [

webui/.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

webui/.storybook/main.ts

@@ -1,6 +1,7 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-import { config as baseConfig } from '../webpack.config';
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+import type { StorybookConfig } from "@storybook/react-vite"
+import { mergeConfig } from "vite"
+import path from "path"
 
 const config: StorybookConfig = {
   stories: [
@@ -12,46 +13,39 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
-    '@storybook/addon-storysource',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
-    '@storybook/addon-viewport',
-    '@storybook/addon-a11y',
-    '@storybook/react',
-    {
-      name: '@storybook/addon-coverage',
-      options: {
-        istanbul: {
-          exclude: ['**/components/**/index.ts'],
-        },
-      },
-    },
-    'storybook-addon-module-mock',
-    'storybook-addon-react-router-v6',
   ],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+    name: "@storybook/react-vite",
+    options: {},
   },
   docs: {
     autodocs: "tag",
   },
-  typescript: {
-    reactDocgen: 'react-docgen',
-  },
-  webpackFinal: async (config) => {
-    const webpackConfig = config;
-    return {
-      ...webpackConfig,
-      module: {
-        ...webpackConfig.module,
-        rules: [...(webpackConfig.module?.rules ?? []), ...(baseConfig.module?.rules ?? [])]
+  staticDirs: ['../public'],
+
+  core: {},
+  async viteFinal(config, { configType }) {
+    if (!config.resolve) {
+      config.resolve = {}
+    }
+    if (!config.resolve.alias) {
+      config.resolve.alias = {}
+    }
+    if (configType === "DEVELOPMENT") {
+      config.resolve.alias["./cryptoFunctions"] = path.resolve(
+        __dirname,
+        "../tests/mocks/__mocks__/cryptoFunctions.ts"
+      )
+
+    }
+    if (configType === "PRODUCTION") {
+      // Prodcution Specific Config
+    }
+    return mergeConfig(config, {
+      optimizeDeps: {
+        include: ["storybook-dark-mode"],
       },
-    };
+    })
   },
 }
 

webui/.storybook/preview.ts

@@ -1,27 +0,0 @@
-import type { Preview } from "@storybook/react";
-import { reactRouterParameters, withRouter } from 'storybook-addon-react-router-v6';
-import '../src/index.scss';
-
-export const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-if (typeof global.process === 'undefined') {
-  const { worker } = require('../tests/mocks/browser')
-  worker.start()
-}
-
-export default {
-  decorators: [withRouter],
-  parameters: {
-    reactRouter: reactRouterParameters({}),
-  }
-} satisfies Preview;

webui/.storybook/storybookHandlers.tsx

@@ -0,0 +1,38 @@
+/* tslint:disable */
+/* eslint-disable */
+import { http, HttpResponse, RequestHandler, RequestHandlerOptions } from "msw";
+import { Job, JobsResponse } from "../src/helpers/jobInterfaces";
+import { Node, NodesResponse } from "../src/helpers/nodeInterfaces";
+
+export const JOBS_RETURN_LIMIT = 10
+export const NODES_RETURN_LIMIT = 10
+const BASE_URL = "https://localhost:1234"
+const storyDataPath = '../src/stories/storyData';
+
+console.log("storyDataPath", storyDataPath)
+
+import * as internalJobs from '../src/stories/storyData/jobsTable/100-jobs.json'
+import * as internalNodes from '../src/stories/storyData/nodesTable/100-nodes.json'
+
+export function getJobs() : Job[] {
+    return internalJobs
+}
+export function getNodes(): Node[] {
+    return internalNodes
+}
+
+export const jobsResponse = http.get('/api/v1/orchestrator/jobs', ({ request }) => {
+    console.log("jobsResponse request", request)
+    const limitedJobs = getJobs().slice(0, JOBS_RETURN_LIMIT)
+    const jobsListResponse: JobsResponse = { Jobs: limitedJobs, NextToken: "" }
+    return HttpResponse.json(jobsListResponse)
+})
+
+export const nodesResponse = http.get('/api/v1/orchestrator/nodes', ({ request }) => {
+    // return number of nodes based on limit
+    const limitedNodes = getNodes().slice(0, NODES_RETURN_LIMIT)
+    const nodesListResponse: NodesResponse = { Nodes: limitedNodes, NextToken: "" }
+    return HttpResponse.json(nodesListResponse)
+})
+
+export const handlers: RequestHandler<any, any, any, RequestHandlerOptions>[] = [jobsResponse, nodesResponse]

webui/.yarnrc.yml

@@ -1,3 +1 @@
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.1.1.cjs

webui/README.md

@@ -1,54 +1,22 @@
 # Bacalhau WebUI
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). To help develop the WebUI we have built to interact with the Bacalhau network follow the directions below:
-
-## Getting Started
-
-First, install dependencies:
-
-```bash
-yarn install
-```
-
-Next, run the development server. The page will reload if you make edits:
-
-```bash
-yarn start
-```
-
-Before committing new code, you will need to lint it by running:
-
+## Dependencies
+You will need to install all the dependencies in the `.tool-versions` file.
 ```bash
-yarn run lint
+asdf install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
+Then install corepack which you'll need for the latest yarn version.
 ```bash
-yarn run build
+npm install -g corepack
+corepack prepare yarn@latest --activate
 ```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
+## Install all yarn dependencies
 ```bash
-yarn run eject
+yarn install
 ```
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
 ## Spinning up the Dashboard for Development: