From 50966f942c021d0ba2661e3355d2fbf24a4eadc9 Mon Sep 17 00:00:00 2001
From: Safouene Turki <tsafouen@gmail.com>
Date: Fri, 26 Apr 2024 11:00:39 +0100
Subject: [PATCH] refactor : ockerize and update fallback

---
 .dockerignore                    |  2 ++
 .github/workflows/main-ci.yml    |  4 ++++
 Dockerfile                       | 16 ++++++++++++++++
 package.json                     |  8 ++++++--
 src/Router.tsx                   |  4 ++++
 src/components/logo.tsx          |  4 ++--
 src/modules/fallback/NoMatch.tsx | 30 ++++++++++++------------------
 7 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..651665b
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+.git
diff --git a/.github/workflows/main-ci.yml b/.github/workflows/main-ci.yml
index b16c32c..c7547bf 100644
--- a/.github/workflows/main-ci.yml
+++ b/.github/workflows/main-ci.yml
@@ -28,3 +28,7 @@ jobs:
 
       - name: Build
         run: npm run build
+
+      - name: Build Docker image
+        run: |
+            docker build -t sveltos-dashboard-ui:latest .
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..31190bd
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,16 @@
+FROM node:14
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Command to run the application
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/package.json b/package.json
index 77bd14a..cb42a69 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,13 @@
 {
   "name": "sveltos-dashboard",
   "private": true,
-  "version": "0.1",
+  "version": "0.1.0",
   "type": "module",
-  "description": "Sveltos User interface d ashboard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/projectsveltos/dashboard"
+  },
+  "description": "Sveltos User interface dashboard",
   "scripts": {
     "lint": "npx prettier . --write",
     "dev": "tsc &&  npx prettier . --write && vite",
diff --git a/src/Router.tsx b/src/Router.tsx
index 6d29a30..9c180b3 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -30,6 +30,10 @@ export const router = createBrowserRouter(
           path: "/clusters/:clusterId",
           element: <ClusterInfo />,
         },
+        {
+          path: "*",
+          element: <NoMatch />,
+        },
       ],
     },
     {
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 86a1fe9..7536f3f 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -1,10 +1,10 @@
 import { appConfig } from "@/config/app";
 
-export function Logo() {
+export function Logo({className="h-6 w-6"}: {className?: string}) {
   return (
     <>
       <svg
-        className={"h-6 w-6"}
+        className={className}
         viewBox="0 0 44 46"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/modules/fallback/NoMatch.tsx b/src/modules/fallback/NoMatch.tsx
index 16de452..386cb2b 100644
--- a/src/modules/fallback/NoMatch.tsx
+++ b/src/modules/fallback/NoMatch.tsx
@@ -1,26 +1,20 @@
 import { useNavigate } from "react-router-dom";
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft } from "lucide-react";
 
 export default function NoMatch() {
   const navigate = useNavigate();
   return (
-    <div>
-      <div className="h-screen w-screen  flex items-center">
-        <div className="container flex flex-col md:flex-row items-center justify-center px-5 ">
-          <div className="max-w-md">
-            <div className="text-5xl font-dark font-bold">404</div>
-            <p className="text-2xl md:text-3xl font-light leading-normal">
-              Sorry, we couldn’t find the page you’re looking for.
-            </p>
-
-            <button
-              onClick={() => navigate(-1)}
-              className="px-4 mt-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 active:bg-blue-600 hover:bg-blue-700"
-            >
-              Back
-            </button>
-          </div>
-        </div>
-      </div>
+    <div className="flex flex-col items-center justify-center mt-12 h-1/2">
+      <div
+        className="  px-4 md:px-8 lg:px-24 py-8 ">
+      <p className="text-6xl md:text-7xl lg:text-9xl font-bold tracking-wider text-gray-300">404</p>
+      <p className="text-2xl md:text-3xl lg:text-5xl font-bold tracking-wider text-gray-500 mt-4">Page Not Found</p>
+      <p className="text-gray-500 mt-4 pb-4 border-b-2 text-center">Sorry, the page you are looking for could not be
+        found.</p>
+      <Button onClick={() => navigate(-1)} className="mt-4 w-full"><ChevronLeft className={"animate-pulse"}/> Go Back</Button>
+    </div>
     </div>
   );
 }