Merge pull request #2 from Leioy/main

chore: migrate metrics-server

.github/workflows/build-frontend.yaml

@@ -0,0 +1,66 @@
+name: Build Frontend
+
+on:
+  push:
+    branches:
+      - '**'
+    paths:
+      - modules/web/**
+    tags:
+      - '*'
+  workflow_dispatch:
+
+env:
+  EXTENSION_NAME: metrics-server
+  FRONTEND_PATH: modules/web
+
+  IMAGE_REGISTRY: docker.io
+  IMAGE_NAMESPACE: kubesphere
+  IMAGE_NAME: metrics-server-frontend
+
+jobs:
+  build-extension:
+    runs-on: self-runner-extensions
+    steps:
+      - name: Set FRONTEND_EXTENSION_PATH
+        run: echo "FRONTEND_EXTENSION_PATH=${{ env.FRONTEND_PATH }}/extensions/${{ env.EXTENSION_NAME }}" >> $GITHUB_ENV
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16
+
+      - name: Install Yarn
+        run: npm install -g yarn
+
+      - name: Install Dependencies
+        run: yarn install
+        working-directory: ${{ env.FRONTEND_PATH }}
+
+      - name: Build
+        run: yarn run build:ext ${{ env.EXTENSION_NAME }}
+        working-directory: ${{ env.FRONTEND_PATH }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.IMAGE_REGISTRY }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and Push
+        uses: docker/build-push-action@v6
+        with:
+          context: ${{ env.FRONTEND_EXTENSION_PATH }}
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ env.IMAGE_REGISTRY }}/${{ env.IMAGE_NAMESPACE }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+          push: true

modules/web/OWNERS

@@ -0,0 +1,12 @@
+approvers:
+  - zheng1
+  - donniean
+
+reviewers:
+  - zheng1
+  - donniean
+  - miaqiang
+  - 51wangping
+  - fuchunlan
+  - yazhouio
+  - Leioy

modules/web/READEME.md

@@ -0,0 +1 @@
+# Metrics Server Frontend

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/configs/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+const resolve = absolutePath => path.resolve(process.cwd(), absolutePath);
+
+const webpackBaseConfig = {
+  resolve: {
+    alias: {
+      '@': resolve('extensions/metrics-server/src'),
+    },
+  },
+};
+
+module.exports = webpackBaseConfig;

modules/web/extensions/metrics-server/Dockerfile

@@ -0,0 +1,8 @@
+FROM nginx:stable-alpine
+
+ARG EXTENSION_NAME=metrics-server
+
+ARG PATH_PREFIX=/usr/share/nginx/html
+
+COPY dist/ ${PATH_PREFIX}/dist/${EXTENSION_NAME}/
+COPY v3dist/ ${PATH_PREFIX}/extensions-static/${EXTENSION_NAME}/dist/v3dist/

modules/web/extensions/metrics-server/README.md

@@ -0,0 +1 @@
+# Metrics Server

modules/web/extensions/metrics-server/package.json

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

modules/web/extensions/metrics-server/src/components/Empty/Empty.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { EmptyAction, EmptyIcon, EmptyTitle, EmptyWrapper } from './styles';
+import { Warning } from '@kubed/icons';
+
+interface EmptyProps {
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  desc?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const Empty: React.FC<EmptyProps> = props => {
+  const { icon, title, desc, actions } = props;
+  return (
+    <EmptyWrapper>
+      <EmptyIcon>{icon ?? <Warning size={48} />}</EmptyIcon>
+      <EmptyTitle>
+        <div>{title ?? t('NO_DATA')}</div>
+        {desc && <div>{desc}</div>}
+      </EmptyTitle>
+      {actions && <EmptyAction>{actions}</EmptyAction>}
+    </EmptyWrapper>
+  );
+};

modules/web/extensions/metrics-server/src/components/Empty/styles.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+export const EmptyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+`;
+
+export const EmptyIcon = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+
+  width: 60px;
+  height: 60px;
+
+  background: ${({ theme }) => theme.palette.accents_1};
+  border-radius: 100px 0px 100px 100px;
+`;
+
+export const EmptyTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  & div:first-child {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: ${({ theme }) => theme.palette.accents_8};
+  }
+  & div:nth-of-type(2) {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    color: ${({ theme }) => theme.palette.colors.dark[0]};
+  }
+`;
+
+export const EmptyAction = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+`;