feat: Create a demo plugin Monitor (#4184)

* feat: lens demo of web version

* chore: add & remove some packages

* fix: connect to desktop bug and change icon

* init: plugin Monitor init

* style: restore frontend/pnpm-workspace.yaml & pnpm-lock.yaml and create new ones in plugins/monitor

* restore: frontend/Makefile

* restore: frontend/pnpm-workspace.yaml

* restore

frontend/Makefile

@@ -68,4 +68,4 @@ image-push-providers/%: image-build-providers/%
 	docker push $(imageOwner)sealos-$*:$(imageTag) 
 image-push-%: image-build-%
 	docker push $(imageOwner)sealos-$*:$(imageTag)
-# Default target to run all builds.
+# Default target to run all builds.

frontend/plugins/monitor/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["next", "next/core-web-vitals"],
+  "plugins": ["xss"],
+  "rules": {
+    "react-hooks/rules-of-hooks": 0,
+    "xss/no-mixed-html": "error",
+    "import/no-commonjs": 0
+  }
+}

frontend/plugins/monitor/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/public/trainData/
+/.vscode/
+platform.json
+.yalc/
+yalc.lock
+data/*.local

frontend/plugins/monitor/.prettierignore

@@ -0,0 +1,4 @@
+dist
+.vscode
+**/.DS_Store
+node_modules

frontend/plugins/monitor/.prettierrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'always',
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf'
+};

frontend/plugins/monitor/dockerfile

@@ -0,0 +1,58 @@
+# Install dependencies only when needed
+FROM node:current-alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat && npm install -g pnpm
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json pnpm-lock.yaml* ./
+RUN \
+  [ -f pnpm-lock.yaml ] && pnpm install || \
+  (echo "Lockfile not found." && exit 1)
+
+# Rebuild the source code only when needed
+FROM node:current-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_PUBLIC_MOCK_USER ''
+
+RUN npm install -g pnpm && pnpm run build
+
+# Production image, copy all the files and run next
+FROM node:current-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN sed -i 's/https/http/' /etc/apk/repositories
+RUN apk add curl \
+  && apk add ca-certificates \
+  && update-ca-certificates
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+# COPY --from=builder /app/.env* .
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+CMD ["pnpm", "run", "start"]

frontend/plugins/monitor/next.config.js

@@ -0,0 +1,23 @@
+/** @type {import('next').NextConfig} */
+const path = require('path');
+const nextConfig = {
+  output: 'standalone',
+  reactStrictMode: false,
+  compress: true,
+  webpack: (config) => {
+    config.module.rules = config.module.rules.concat([
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack']
+      }
+    ]);
+    config.plugins = [...config.plugins];
+    return config;
+  },
+  experimental: {
+    outputFileTracingRoot: path.join(__dirname, '../../')
+  }
+};
+
+module.exports = nextConfig;

frontend/plugins/monitor/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "monitor",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "link-sdk": "rm -rf node_modules/sealos-desktop-sdk && yalc link sealos-desktop-sdk",
+    "unlink-sdk": "yalc remove --all && pnpm install sealos-desktop-sdk"
+  },
+  "dependencies": {
+    "@ant-design/charts": "^1.4.2",
+    "@ant-design/colors": "^7.0.0",
+    "@ant-design/cssinjs": "^1.17.2",
+    "@ant-design/icons": "^5.2.6",
+    "@ant-design/plots": "^1.2.5",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@kubernetes/client-node": "^0.19.0",
+    "@tanstack/react-query": "^4.29.25",
+    "antd": "^5.10.2",
+    "auto-bind": "^5.0.1",
+    "axios": "^1.5.1",
+    "framer-motion": "^10.16.4",
+    "immer": "^10.0.3",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.10.2",
+    "mobx-react": "^9.0.1",
+    "mobx-utils": "^6.0.8",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "next": "13.5.4",
+    "nprogress": "^0.2.0",
+    "prettier": "^2.8.8",
+    "react": "^18",
+    "react-dom": "^18",
+    "request": "^2.88.2",
+    "rfc6902": "^5.0.1",
+    "type-fest": "^4.4.0",
+    "typed-regex": "^0.0.8",
+    "zustand": "^4.3.9",
+    "sealos-desktop-sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.8",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^20",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/request": "^2.48.10",
+    "autoprefixer": "^10.4.16",
+    "csstype": "^3.1.2",
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^13.5.4",
+    "eslint-plugin-xss": "^0.1.12",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4",
+    "typescript": "^5"
+  }
+}