feat(frontend/desktop):support modify team limit (#4221)

frontend/desktop/README.md

@@ -243,4 +243,10 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
   GOOGLE_ENABLED="true"
   GOOGLE_CLIENT_ID=
   GOOGLE_CLIENT_SECRET=
+  ```
+  - team
+
+  ```
+  // default is '50'
+    TEAM_LIMIT="50"
   ```

frontend/desktop/src/__tests__/api/e2e/namespace/create.test.ts

@@ -5,6 +5,7 @@ import { _setAuth, cleanDb, cleanK8s } from '@/__tests__/api/tools';
 import { _createRequest } from '@/api/namespace';
 import request from '@/__tests__/api/request';
 import { Db, MongoClient } from 'mongodb';
+import { getTeamLimit } from '@/services/enable';
 describe('Login create', () => {
   let session: Session;
   const createRequest = _createRequest(request);
@@ -55,14 +56,7 @@ describe('Login create', () => {
     const res = await createRequest({ teamName: 'hello' });
     expect(res.code).toBe(409);
   });
-  it.each([
-    ['team1', 0],
-    ['team2', 1],
-    ['team3', 2],
-    ['team4', 3],
-    ['team5', 4],
-    ['team6', 5]
-  ])(
+  it.each(new Array(getTeamLimit() + 2).map((_, idx) => [`team${idx}`, idx]))(
     'limit 4 team',
     async (teamName: string, idx: number) => {
       if (idx === 0) {
@@ -76,7 +70,7 @@ describe('Login create', () => {
       }
       const res = await createRequest({ teamName });
       console.log('curIdx', idx, 'code', res.code);
-      if (idx > 3) expect(res.code).toBe(403);
+      if (idx >= getTeamLimit()) expect(res.code).toBe(403);
       else expect(res.code).toBe(200);
     },
     10000

frontend/desktop/src/pages/api/auth/namespace/create.ts

@@ -6,9 +6,10 @@ import { getTeamKubeconfig } from '@/services/backend/kubernetes/admin';
 import { GetUserDefaultNameSpace } from '@/services/backend/kubernetes/user';
 import { jsonRes } from '@/services/backend/response';
 import { bindingRole, modifyTeamRole } from '@/services/backend/team';
+import { getTeamLimit } from '@/services/enable';
 import { NSType, NamespaceDto, UserRole } from '@/types/team';
 import { NextApiRequest, NextApiResponse } from 'next';
-const TEAM_LIMIT = 5;
+const TEAM_LIMIT = getTeamLimit();
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
     const payload = await authSession(req.headers);

frontend/desktop/src/services/enable.ts

@@ -30,3 +30,4 @@ export const enableWechatRecharge = () => process.env['WECHAT_ENABLED'] === 'tru
 export const enableLicense = () => {
   return process.env.LICENSE_ENABLED === 'true';
 };
+export const getTeamLimit = () => parseInt(process.env['TEAM_LIMIT'] || '') || 50;

frontend/plugins/monitor/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};

frontend/plugins/monitor/src/components/chart/pie-chart.tsx

@@ -52,4 +52,4 @@ export const PieChart = ({ title, data, color }: PieChartProps) => {
     }
   };
   return <DynamicPie {...config} animation={false} />;
-};
+};

frontend/plugins/monitor/src/components/kube/kube-accordion.tsx

@@ -3,9 +3,9 @@ import {
   AccordionButton,
   AccordionIcon,
   AccordionItem,
-  AccordionPanel,
-} from "@chakra-ui/react";
-import { Key } from "react";
+  AccordionPanel
+} from '@chakra-ui/react';
+import { Key } from 'react';
 
 export type KubeAccordionItem = {
   key?: Key | null;

frontend/plugins/monitor/src/components/kube/kube-drawer.tsx

@@ -5,9 +5,9 @@ import {
   DrawerHeader,
   DrawerOverlay,
   DrawerContent,
-  DrawerCloseButton,
-} from "@chakra-ui/react";
-import { MutableRefObject } from "react";
+  DrawerCloseButton
+} from '@chakra-ui/react';
+import { MutableRefObject } from 'react';
 
 export type KubeDrawerProps = {
   header: React.ReactNode;
@@ -19,7 +19,7 @@ export type KubeDrawerProps = {
 
 export const KubeDrawer = ({
   props,
-  children,
+  children
 }: {
   props: KubeDrawerProps;
   children: React.ReactNode;
@@ -31,7 +31,7 @@ export const KubeDrawer = ({
       placement="right"
       onClose={onClose}
       finalFocusRef={finalFocusRef}
-      size={"sm"}
+      size={'sm'}
     >
       <DrawerOverlay />
       <DrawerContent>

frontend/plugins/monitor/src/components/kube/kube-table.tsx

@@ -1,13 +1,4 @@
-import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
-  TableCaption,
-} from "@chakra-ui/react";
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, TableCaption } from '@chakra-ui/react';
 
 export type Row = {
   idx: string | number;
@@ -21,18 +12,11 @@ export type KubeTableParams = {
 };
 
 export const KubeTable = ({ columnNames, rows }: KubeTableParams) => {
-  const columnNamesTags = columnNames.map((name, idx) => (
-    <Th key={idx}>{name}</Th>
-  ));
+  const columnNamesTags = columnNames.map((name, idx) => <Th key={idx}>{name}</Th>);
   return (
-    <TableContainer overflowX="scroll" maxW={"100vw"}>
+    <TableContainer overflowX="scroll" maxW={'100vw'}>
       <Table variant="simple">
-        <Thead
-          bgColor={"gray.100"}
-          borderRadius={"4px"}
-          padding={"2px"}
-          mb={"10px"}
-        >
+        <Thead bgColor={'gray.100'} borderRadius={'4px'} padding={'2px'} mb={'10px'}>
           <Tr>{columnNamesTags}</Tr>
         </Thead>
         <Tbody>
@@ -43,7 +27,7 @@ export const KubeTable = ({ columnNames, rows }: KubeTableParams) => {
                 row.onClickRow && row.onClickRow(row.idx);
               }}
               key={row.idx}
-              cursor={row.onClickRow ? "pointer" : "initial"}
+              cursor={row.onClickRow ? 'pointer' : 'initial'}
             >
               {row.tds.map((td, idx) => (
                 <Td key={idx}>{td}</Td>

frontend/plugins/monitor/src/components/kube/loading.tsx

@@ -1,16 +1,10 @@
-import { Box, Flex, Spinner } from "@chakra-ui/react";
+import { Box, Flex, Spinner } from '@chakra-ui/react';
 
 export const LoadingPage = () => {
   return (
-    <Flex flexFlow="column wrap" justify={"center"} align={"center"} h="100vh">
+    <Flex flexFlow="column wrap" justify={'center'} align={'center'} h="100vh">
       <Box>Loading...</Box>
-      <Spinner
-        thickness="4px"
-        speed="0.65s"
-        emptyColor="gray.200"
-        color="blue.500"
-        size="xl"
-      />
+      <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
     </Flex>
   );
 };

frontend/plugins/monitor/src/components/kube/local-date.tsx

@@ -1,13 +1,11 @@
-import { observer } from "mobx-react";
-import moment from "moment-timezone";
+import { observer } from 'mobx-react';
+import moment from 'moment-timezone';
 
 export type LocaleDateProps = {
   date: string;
   localeTimezone: string;
 };
 
-export const LocaleDate = observer(
-  ({ date, localeTimezone }: LocaleDateProps) => (
-    <>{`${moment.tz(date, localeTimezone).format()}`}</>
-  )
-);
+export const LocaleDate = observer(({ date, localeTimezone }: LocaleDateProps) => (
+  <>{`${moment.tz(date, localeTimezone).format()}`}</>
+));

frontend/plugins/monitor/src/pages/monitor/components/config/config-map/config-map-detail.tsx

@@ -34,7 +34,13 @@ const ConfigMapDetail = ({ configMap, open, onClose }: Props) => {
           {data.map(([name, value = '']) => (
             <div key={name} className="mb-2">
               <div className="text-zinc-300 font-bold pb-0.5">{name}</div>
-              <Input.TextArea classNames={{textarea: 'font-mono'}} wrap="off" rows={6} disabled value={value} />
+              <Input.TextArea
+                classNames={{ textarea: 'font-mono' }}
+                wrap="off"
+                rows={6}
+                disabled
+                value={value}
+              />
             </div>
           ))}
         </>

frontend/plugins/monitor/src/pages/monitor/components/sidebar/sidebar.tsx

@@ -35,7 +35,9 @@ const items: MenuProps['items'] = [
     getItem('Deployment', SideNavItemKey.Deployment),
     getItem('StatefulSet', SideNavItemKey.StatefulSet)
   ]),
-  getItem('Config', 'config', <SettingOutlined rev={undefined}/>, [getItem('ConfigMap', SideNavItemKey.ConfigMap)]),
+  getItem('Config', 'config', <SettingOutlined rev={undefined} />, [
+    getItem('ConfigMap', SideNavItemKey.ConfigMap)
+  ]),
   getItem('Storage', 'storage', <DatabaseOutlined rev={undefined} />, [
     getItem('Persistent Volume Claim', SideNavItemKey.PersistentVolumeClaim)
   ])

frontend/plugins/monitor/src/store/k8s/configmap.store.ts

@@ -6,4 +6,4 @@ export class ConfigMapStore extends ItemStore<ConfigMap> {
   constructor() {
     super(Resources.ConfigMaps);
   }
-}
+}

frontend/plugins/monitor/src/utils/kube-object-info.ts

@@ -1,13 +1,9 @@
-import {
-  KubeObject,
-  KubeObjectMetadata,
-  KubeObjectScope,
-} from "@/k8slens/kube-object";
+import { KubeObject, KubeObjectMetadata, KubeObjectScope } from '@/k8slens/kube-object';
 
 export type OwnerRef<
   Metadata extends KubeObjectMetadata<KubeObjectScope> = KubeObjectMetadata<KubeObjectScope>
 > = {
-  namespace: Metadata["namespace"];
+  namespace: Metadata['namespace'];
   apiVersion: string;
   kind: string;
   name: string;
@@ -28,9 +24,7 @@ export type KubeObjectInfo = {
   ownerRefs: Array<OwnerRef>;
 };
 
-export const getKubeObjectInfo = <K extends KubeObject = KubeObject>(
-  obj: K
-): KubeObjectInfo => {
+export const getKubeObjectInfo = <K extends KubeObject = KubeObject>(obj: K): KubeObjectInfo => {
   return {
     creationTimestamp: obj.metadata.creationTimestamp,
     name: obj.metadata.name,
@@ -39,6 +33,6 @@ export const getKubeObjectInfo = <K extends KubeObject = KubeObject>(
     labels: obj.getLabels(),
     annotations: obj.getAnnotations(),
     finalizers: obj.getFinalizers(),
-    ownerRefs: obj.getOwnerRefs(),
+    ownerRefs: obj.getOwnerRefs()
   };
 };

frontend/plugins/monitor/src/utils/request-controller.ts

@@ -1,4 +1,4 @@
-import { range } from "lodash";
+import { range } from 'lodash';
 
 export type RequestControllerProps = {
   timeoutDuration: number;
@@ -23,7 +23,7 @@ export class RequestController {
   private static timeout(ms: number) {
     return new Promise((reject) =>
       setTimeout(() => {
-        reject(new Error("Timeout Error"));
+        reject(new Error('Timeout Error'));
       }, ms)
     );
   }
@@ -34,10 +34,7 @@ export class RequestController {
     if (!task) return;
     this.index++;
     try {
-      const res = await Promise.race([
-        task(),
-        RequestController.timeout(this.timeoutDuration),
-      ]);
+      const res = await Promise.race([task(), RequestController.timeout(this.timeoutDuration)]);
       this.results[this.index] = res ?? null;
     } catch (err: any) {
       this.results[this.index] = err;
@@ -55,9 +52,7 @@ export class RequestController {
     this.tasks = tasks;
     this.results = [];
 
-    await Promise.allSettled(
-      range(this.limit).map((index) => this.executeTask(index))
-    );
+    await Promise.allSettled(range(this.limit).map((index) => this.executeTask(index)));
 
     return this.results;
   }

frontend/plugins/monitor/src/utils/status-color.ts

@@ -1,18 +1,18 @@
-import { snakeCase } from "lodash";
+import { snakeCase } from 'lodash';
 
 const statusBackgroundColorMapping = {
-  running: "color-ok",
-  pending: "color-warning",
-  evicted: "color-error",
-  waiting: "color-warning",
-  succeeded: "color-success",
-  failed: "color-error",
-  terminated: "color-terminated",
-  terminating: "color-terminated",
-  completed: "color-success",
-  crash_loop_back_off: "color-error",
-  error: "color-error",
-  container_creating: "color-info",
+  running: 'color-ok',
+  pending: 'color-warning',
+  evicted: 'color-error',
+  waiting: 'color-warning',
+  succeeded: 'color-success',
+  failed: 'color-error',
+  terminated: 'color-terminated',
+  terminating: 'color-terminated',
+  completed: 'color-success',
+  crash_loop_back_off: 'color-error',
+  error: 'color-error',
+  container_creating: 'color-info'
 } as { [key: string]: string };
 
 export const getStatusColor = (status: string): string | undefined => {

frontend/plugins/monitor/tsconfig.json

@@ -3,11 +3,7 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": true,
     "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,18 +16,10 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "forceConsistentCasingInFileNames": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

frontend/providers/dbprovider/src/pages/dbs/index.tsx

@@ -39,4 +39,4 @@ export async function getServerSideProps(content: any) {
   };
 }
 
-export default Home;
+export default Home;