Merge pull request #193 from yohamta/feat/webui-improvement

feat: simplify web UI

admin/.eslintignore

@@ -0,0 +1,3 @@
+node_modules/*
+./node_modules/**
+**/node_modules/**

admin/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-non-null-assertion": "off"
+  }
+}

admin/.prettierignore

@@ -0,0 +1,4 @@
+.yarn
+.next
+dist
+node_modules

admin/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

admin/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --config webpack.dev.js"
+    "start": "webpack-dev-server --config webpack.dev.js",
+    "lint": "eslint --fix --ext .ts,.tsx .",
+    "prettier": "prettier --write src/**/*.ts[x]"
   },
   "repository": {
     "type": "git",
@@ -25,15 +27,19 @@
     "@types/mermaid": "^8.2.9",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "esbuild-loader": "^2.19.0",
+    "eslint": "^8.19.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.7.1",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.0",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",

admin/src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import DashboardLayout from "./DashboardLayout";
+import Layout from "./components/layouts/Layout";
 import Dashboard from "./pages/Dashboard";
 import DAGDetails from "./pages/DAGDetails";
-import DAGs from "./pages/DAGs";
+import DAGList from "./pages/DAGList";
 
-type Config = {
+export type Config = {
   title: string;
   navbarColor: string;
 };
@@ -17,14 +17,14 @@ type Props = {
 function App({ config }: Props) {
   return (
     <BrowserRouter>
-      <DashboardLayout {...config}>
+      <Layout {...config}>
         <Routes>
           <Route path="/" element={<Dashboard />} />
-          <Route path="" element={<DAGs />} />
-          <Route path="/dags/" element={<DAGs />} />
+          <Route path="" element={<DAGList />} />
+          <Route path="/dags/" element={<DAGList />} />
           <Route path="/dags/:name" element={<DAGDetails />} />
         </Routes>
-      </DashboardLayout>
+      </Layout>
     </BrowserRouter>
   );
 }

admin/src/api/DAG.tsx

@@ -1,6 +1,6 @@
-import { DAG } from "../models/DAGData";
-import { Node, NodeStatus } from "../models/Node";
-import { StatusFile } from "../models/StatusFile";
+import { DAG } from '../models/DAGData';
+import { Node, NodeStatus } from '../models/Node';
+import { StatusFile } from '../models/StatusFile';
 
 export type GetDAGResponse = {
   Title: string;

admin/src/api/DAGs.tsx

@@ -1,5 +1,5 @@
-import { DAG } from "../models/DAGData";
-import { Group } from "../models/Group";
+import { DAG } from '../models/DAGData';
+import { Group } from '../models/Group';
 
 export type GetDAGsResponse = {
   Title: string;

admin/src/components/BorderedBox.tsx

@@ -0,0 +1,25 @@
+import { Box, BoxProps } from '@mui/material';
+import React from 'react';
+
+interface BorderedBoxProps extends BoxProps {
+  children?: React.ReactNode;
+}
+export default function BorderedBox({
+  children,
+  sx,
+  ...props
+}: BorderedBoxProps) {
+  return (
+    <Box
+      sx={{
+        border: 1,
+        borderColor: 'grey.300',
+        borderRadius: '6px',
+        ...sx,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}