add workflow , update router config , update Layout , Update cluster …

…Info page with boilerplate code to showcase only.
projectsveltos · Apr 25, 2024 · 18752c0 · 18752c0
1 parent f078986
commit 18752c0
Show file tree

Hide file tree

Showing 28 changed files with 967 additions and 85 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+VITE_BACKEND_PORT=9000
+VITE_SVELTOS_API_BASE_URL=http://localhost:${BACKEND_PORT}
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,19 @@
+<!-- Thank you for contributing a pull request to Sveltos! -->
+
+#### Summary
+
+<!--
+A description of what this pull request does.
+-->
+
+#### Related Issue
+
+<!--
+If this pull request is related to an issue, please link to the issue here.
+-->
+
+#### Screenshots
+
+<!--
+If the PR includes UI changes, include screenshots/GIFs.
+-->
diff --git a/.github/workflows/main-ci.yml b/.github/workflows/main-ci.yml
@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linting
+        run: npm run lint
+
+# Will be added later on
+#      - name: Run tests
+#        run: npm test -- --coverage
+
+      - name: Build
+        run: npm run build
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+18.16
diff --git a/index.html b/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="referrer" content="no-referrer" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -10,6 +13,7 @@
     <title>Sveltos Dashboard</title>
   </head>
   <body class="min-h-screen">
+    <noscript> To use SveltosUI, please enable JavaScript. </noscript>
     <div id="root" class="relative flex min-h-screen flex-col"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1",
   "type": "module",
+  "description": "Sveltos User interface d ashboard",
   "scripts": {
     "lint": "npx prettier . --write",
     "dev": " npx prettier . --write && vite",
@@ -20,7 +21,10 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,14 @@
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { router } from "./Router";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 export default function App() {
   return (
     <ThemeProvider>
-      <RouterProvider router={router} />
+      <TooltipProvider>
+        <RouterProvider router={router} />
+      </TooltipProvider>
     </ThemeProvider>
   );
 }
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -2,9 +2,10 @@ import { createBrowserRouter, Navigate } from "react-router-dom";
 
 import { Applayout } from "./components/layouts/AppLayout";
 
-import NoMatch from "./pages/errors/NoMatch";
-import ClustersPage from "./pages/clusters-list/ClustersPage";
+import NoMatch from "./modules/fallback/NoMatch";
+import ClustersPage from "@/modules/clusters/clusters-list/ClustersPage";
 import { appConfig } from "@/config/app";
+import { ClusterInfo } from "@/modules/clusters/cluster-information/ClusterInfo";
 const defaultTab = appConfig.sveltosType;
 const defaultPage = appConfig.defaultPage;
 export const router = createBrowserRouter(
@@ -25,6 +26,10 @@ export const router = createBrowserRouter(
           path: "/clusters/:tab/:pageNumber",
           element: <ClustersPage />,
         },
+        {
+          path: "/clusters/:clusterId",
+          element: <ClusterInfo />,
+        },
       ],
     },
     {

diff --git a/src/api-client/apiClient.ts b/src/api-client/apiClient.ts
@@ -0,0 +1,6 @@
+import axios from "axios";
+
+const client = axios.create({
+  baseURL: import.meta.env.VITE_SVELTOS_API_BASE_URL,
+  timeout: 1000,
+});
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -74,5 +74,4 @@ export const Icons = {
       </defs>
     </svg>
   ),
-  boxes: (props: IconProps) => <Boxes {...props} />,
 };
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
@@ -1,12 +1,14 @@
 import { appConfig } from "@/config/app";
 import { ModeToggle } from "../mode-toggle";
+import { Icons } from "@/components/icons";
 
 export function Footer() {
   return (
     <footer className="flex flex-col items-center justify-between gap-4 min-h-[3rem] md:h-20 py-2 md:flex-row">
       <div className="container mx-auto text-sm text-center">
         <p>
-          Built by <a href={appConfig.github.url}>{appConfig.name}</a>
+          Built by
+          <a href={appConfig.github.url}> {appConfig.name}</a>
         </p>
       </div>
     </footer>