add karmada dashboard extension module

Signed-off-by: ROOMrepair <[email protected]>

modules/web/.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

modules/web/.eslintignore

@@ -0,0 +1,10 @@
+dist/
+build/
+cypress/
+jest/
+scripts/
+node_modules/
+jest.config.js
+babel.config.js
+.eslintrc.js
+locales/

modules/web/.eslintrc.js

@@ -0,0 +1,20 @@
+// http://eslint.org/docs/user-guide/configuring
+
+const path = require('path');
+
+const resolve = dir => path.resolve(__dirname, dir);
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    project: ['./tsconfig.json'],
+  },
+  extends: ['kubesphere'],
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: resolve('node_modules/@ks-console/bootstrap/webpack/webpack.base.conf.js'),
+      },
+    },
+  },
+};

modules/web/.gitignore

@@ -0,0 +1,50 @@
+# macOS
+.DS_Store
+
+# JetBrains
+.idea/
+
+# Visual Studio Code
+.vscode/*
+## Local History for Visual Studio Code
+.history/
+
+# Node.js
+**/node_modules/
+.yalc/
+yalc.lock
+
+# Yarn
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Config
+configs/local_config.yaml
+
+# TypeScript
+*.tsbuildinfo
+
+# Testing
+coverage/
+
+# Production
+**/dist/
+**/cjs/
+**/esm/
+
+# Cache
+*.rdb
+.cache-loader

modules/web/.nvmrc

@@ -0,0 +1 @@
+16

modules/web/.prettierignore

@@ -0,0 +1,8 @@
+.git/
+.history/
+**/node_modules/
+**/dist/
+**/v3dist/
+**/*.tsbuildinfo
+yarn.lock
+package-lock.json

modules/web/babel.config.js

@@ -0,0 +1,69 @@
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    // 'lodash',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    '@babel/plugin-proposal-json-strings',
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-numeric-separator',
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-logical-assignment-operators',
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      '@babel/plugin-proposal-pipeline-operator',
+      {
+        proposal: 'minimal',
+      },
+    ],
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-do-expressions',
+    'babel-plugin-styled-components',
+  ],
+  env: {
+    production: {
+      plugins: [
+        [
+          'transform-react-remove-prop-types',
+          {
+            removeImport: true,
+            ignoreFilenames: ['node_modules'],
+          },
+        ],
+      ],
+    },
+    publish: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              browsers: ['> 1%', 'last 2 versions', 'not ie <= 8'],
+            },
+          },
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: ['@babel/plugin-proposal-object-rest-spread'],
+    },
+    test: {
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+    },
+  },
+};

modules/web/extensions/karmada-dashboard-ui/Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:alpine
+
+COPY dist /usr/share/nginx/html/dist/karmada-dashboard-ui-frontend

modules/web/extensions/karmada-dashboard-ui/README.md

@@ -0,0 +1,5 @@
+# karmada-dashboard-ui
+
+Hello karmada-dashboard-ui
+
+> TODO: README

modules/web/extensions/karmada-dashboard-ui/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "karmada-dashboard-ui",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Hello karmada-dashboard-ui",
+  "homepage": "",
+  "author": "",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ]
+}

modules/web/extensions/karmada-dashboard-ui/src/App.tsx

@@ -0,0 +1,86 @@
+import React, { useRef, useEffect, useState } from 'react';
+// import styled from 'styled-components';
+import { Loading } from '@kubed/components';
+import { useCheckWindows, CustomEventData } from './utils/iframe';
+import { karmadaServiceUrl } from './utils/constants';
+import { useFetchToken } from './utils/request';
+import { tokenUrl } from './utils/constants';
+import { notify } from '@kubed/components';
+// import { useWinState } from './utils/winState';
+
+export default function App() {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  // const [newWindow, setNewWindow] = useState<Window | null>(null);
+  // const [newWindow] = useWinState();
+
+  const [loading, setLoading] = useState(true);
+  const { isIframeReady, postMessageToIframe } = useCheckWindows(iframeRef);
+  const { token, fetchLoading, error } = useFetchToken(tokenUrl, '');
+
+  // const openNewWindow = () => {
+  //   const win = window.open(karmadaServiceUrl, '_blank');
+  //   if (win) {
+  //     setNewWindow(win);
+  //     setTimeout(() => {
+  //     }, 300);
+  //   } else {
+  //     notify.error("Failed to open new window");
+  //   }
+  // };
+
+  // useEffect(() => {
+  //   openNewWindow();
+  // }, [])
+
+  const onIframeLoad = () => {
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (!isIframeReady || fetchLoading || loading) return;
+    if (error || !token) {
+      notify.error('fetch token failed for iframe');
+      return;
+    }
+    const tokenMessage: CustomEventData = {
+      action: 'token',
+      payload: {
+        token,
+      },
+    };
+    postMessageToIframe(tokenMessage);
+  }, [isIframeReady, loading, token, fetchLoading, error]);
+
+  // useEffect(() => {
+  //   if (!isWindowReady || fetchLoading || !newWindow) return;
+  //   if (error || !token) {
+  //     notify.error('fetch token failed for new window');
+  //     return;
+  //   }
+  //   const tokenMessage: CustomEventData = {
+  //     action: 'token',
+  //     payload: {
+  //       token,
+  //     },
+  //   };
+  //   newWindow.postMessage(tokenMessage, karmadaServiceUrl);
+  // }, [isWindowReady, token, fetchLoading, error, newWindow]);
+
+  return (
+    <>
+      {loading && <Loading className="page-loading" />}
+      <iframe
+        ref={iframeRef}
+        src={karmadaServiceUrl}
+        width="100%"
+        height="100%"
+        style={{
+          border: 'none',
+          height: 'calc(100vh - 68px)',
+          display: loading ? 'none' : 'block',
+        }}
+        onLoad={onIframeLoad}
+      />
+    </>
+  );
+}

modules/web/extensions/karmada-dashboard-ui/src/index.ts

@@ -0,0 +1,22 @@
+import routes from './routes';
+import locales from './locales';
+
+const menus = [
+  {
+    parent: 'topbar',
+    name: 'karmada-dashboard-ui',
+    title: 'Karmada Dashboard',
+    icon: 'cluster',
+    order: 0,
+    desc: 'Hello karmada-dashboard-ui',
+    skipAuth: true,
+  },
+];
+
+const extensionConfig = {
+  routes,
+  menus,
+  locales,
+};
+
+export default extensionConfig;

modules/web/extensions/karmada-dashboard-ui/src/locales/en/base.json

@@ -0,0 +1,3 @@
+{
+  "name": "Name"
+}

modules/web/extensions/karmada-dashboard-ui/src/locales/en/index.js

@@ -0,0 +1,14 @@
+// Use require.context to require reducers automatically
+// Ref: https://webpack.github.io/docs/context.html
+const context = require.context('./', false, /\.json$/);
+const keys = context.keys().filter(item => item !== './index.ts');
+
+// let models: Record<string, string> = {};
+let models = {};
+for (let i = 0; i < keys.length; i += 1) {
+  if (keys[i].startsWith('.')) {
+    models = { ...models, ...context(keys[i]) };
+  }
+}
+
+export default models;

modules/web/extensions/karmada-dashboard-ui/src/locales/index.js

@@ -0,0 +1,7 @@
+import zh from './zh';
+import en from './en';
+
+export default {
+  zh,
+  en,
+};

modules/web/extensions/karmada-dashboard-ui/src/locales/zh/base.json

@@ -0,0 +1,3 @@
+{
+  "name": "名称"
+}

modules/web/extensions/karmada-dashboard-ui/src/locales/zh/index.js

@@ -0,0 +1,14 @@
+// Use require.context to require reducers automatically
+// Ref: https://webpack.github.io/docs/context.html
+const context = require.context('./', false, /\.json$/);
+const keys = context.keys().filter(item => item !== './index.ts');
+
+// let models: Record<string, string> = {};
+let models = {};
+for (let i = 0; i < keys.length; i += 1) {
+  if (keys[i].startsWith('.')) {
+    models = { ...models, ...context(keys[i]) };
+  }
+}
+
+export default models;

modules/web/extensions/karmada-dashboard-ui/src/routes/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from '../App';
+
+export default [
+  {
+    path: '/karmada-dashboard-ui',
+    element: <App />,
+  },
+];

modules/web/extensions/karmada-dashboard-ui/src/utils/constants.ts

@@ -0,0 +1,4 @@
+export const karmadaServiceUrl = 'http://karmada-dashboard.www.ks.com:30888';
+// export const karmadaServiceUrl = 'http://localhost:5173';
+export const tokenUrl =
+  '/proxy/karmada.kubesphere.io/api/v1/namespaces/karmada-system/secrets/karmada-dashboard-secret';