fix(object-storage): switch kc (#4355)

.github/workflows/frontend.yml

@@ -64,7 +64,7 @@ jobs:
             providers/terminal,
             providers/dbprovider,
             providers/costcenter,
-            #            providers/objectstorage,
+            providers/objectstorage,
             desktop,
           ]
     steps:

frontend/Dockerfile

@@ -31,6 +31,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
 COPY ./tsconfig.json ./tsconfig.json
 COPY ./tsconfig.deps.json ./tsconfig.deps.json
 COPY ./tsconfig.base.json ./tsconfig.base.json
+COPY ./tsconfig.web.json ./tsconfig.web.json
 COPY ./packages ./packages
 
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
@@ -51,12 +52,11 @@ ENV NEXT_TELEMETRY_DISABLED 1
 
 # COPY --from=deps /app/packages ./packages
 
-COPY . .
-
-
 ARG name
 ARG path
 
+COPY ${path} ${path}
+
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --offline --filter=$name install && pnpm --filter=$name run build
 
 # Production image, copy all the files and run next

frontend/providers/objectstorage/next.config.js

@@ -16,6 +16,35 @@ module.exports = (phase, { defaultConfig }) => {
       experimental: {
         outputFileTracingRoot: path.join(__dirname, '../../')
       },
+      webpack(config, { isServer }) {
+        if (!isServer) {
+          config.resolve = {
+            ...config.resolve,
+            fallback: {
+              ...config.resolve.fallback,
+              fs: false
+            }
+          };
+        }
+        Object.assign(config.resolve.alias, {
+          'utf-8-validate': false,
+          bufferutil: false
+        });
+        config.module = {
+          ...config.module,
+          rules: config.module.rules.concat([
+            {
+              test: /\.svg$/i,
+              issuer: /\.[jt]sx?$/,
+              use: ['@svgr/webpack']
+            }
+          ]),
+          exprContextCritical: false,
+          unknownContextCritical: false
+        };
+
+        return config;
+      },
       async headers() {
         return [
           {

frontend/providers/objectstorage/package.json

@@ -27,6 +27,7 @@
     "framer-motion": "^10.16.4",
     "fuse.js": "^7.0.0",
     "i18next": "^22.5.1",
+    "immer": "^10.0.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",

frontend/providers/objectstorage/public/locales/en/common.json

@@ -14,5 +14,6 @@
   "totalSpace": "Total Space",
   "s3ServiceParams": "Access Key",
   "refresh": "Refresh",
+  "dailyEstimate": "Daily Estimate",
   "deleteWarning": "Delete Warning"
-}
+}

frontend/providers/objectstorage/public/locales/zh/common.json

@@ -12,6 +12,7 @@
   "totalSpace": "总空间用量",
   "s3ServiceParams": "访问密钥",
   "refresh": "刷新",
+  "dailyEstimate": "每日估价",
   "config": "基础配置",
   "deleteWarning": "删除警告"
 }

frontend/providers/objectstorage/src/api/monitor.ts

@@ -6,5 +6,5 @@ import { AxiosInstance } from 'axios';
  * @ bucket : bucketName(ns-bucketCRName)
  */
 export const _monitor = (request: AxiosInstance) => (data: { bucket: string }) =>
-  request.post<any, MonitorData['result'][]>('/api/monitor', data);
+  request.post<any, (MonitorData['result'] & { name: string })[]>('/api/monitor', data);
 export const monitor = _monitor(request);

frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx

@@ -1,10 +1,6 @@
-import { Authority, QueryKey, TBucket, bucketConfigQueryParam } from '@/consts';
+import { bucketConfigQueryParam } from '@/consts';
 import { Text, HStack, StackProps, ButtonGroup, Button } from '@chakra-ui/react';
-import AuthorityTips from '@/components/common/AuthorityTip';
-import DeleteIcon from '@/components/Icons/DeleteIcon';
 import { useOssStore } from '@/store/ossStore';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { deleteBucket } from '@/api/bucket';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import EditIcon from '../Icons/EditIcon';
@@ -21,7 +17,6 @@ export default function BucketHeader({ ...styles }: StackProps) {
         <Text fontSize={'24px'} fontWeight={'500'}>
           {bucket.name}
         </Text>
-        <AuthorityTips authority={Authority.private} />
       </HStack>
       <ButtonGroup variant={'secondary'} spacing={'16px'}>
         <Button

frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx

@@ -52,6 +52,7 @@ import { format } from 'date-fns';
 import DeleteFileModal from '../common/modal/DeleteFileModal';
 import DeleteSingleFileModal from '../common/modal/DeleteSingleFileModal';
 import StorageIcon from '../Icons/StorageIcon';
+import useSessionStore from '@/store/session';
 
 type EntryType = {
   LastModified?: Date;
@@ -67,6 +68,7 @@ export default function FileManager({ ...styles }: FlexProps) {
   const { t: toolsT } = useTranslation('tools');
   const bucket = useOssStore((s) => s.currentBucket);
   const s3client = useOssStore((s) => s.client);
+  const session = useSessionStore((s) => s.session);
   const Bucket = bucket?.name || '';
   const prefix = useOssStore((s) => s.prefix);
   const Prefix = prefix.length === 0 ? '' : [...prefix, ''].join('/');
@@ -81,27 +83,33 @@ export default function FileManager({ ...styles }: FlexProps) {
     setpageStack([]);
     setContinuationToken(undefined);
   };
+
   const { copyData } = useCopyData();
   const objectsQuery = useQuery({
-    queryKey: [QueryKey.minioFileList, { Bucket, Prefix, MaxKeys, ContinuationToken }],
+    queryKey: [
+      QueryKey.minioFileList,
+      { Bucket, Prefix, MaxKeys, ContinuationToken, s3client, session }
+    ],
     queryFn: () =>
       listObjects(s3client!)({ Bucket, Prefix, Delimiter: '/', ContinuationToken, MaxKeys }),
     select(data) {
       return data;
     },
     enabled: !!s3client && !!Bucket
   });
-
   useEffect(() => {
-    if (objectsQuery.data?.IsTruncated) {
+    if (objectsQuery.isError) {
+      // @ts-ignore
+      toast({ title: objectsQuery.failureReason?.message, status: 'error' });
+    } else if (objectsQuery.data?.IsTruncated) {
       const data = objectsQuery.data;
       const token = data.NextContinuationToken;
       if (!!token && !pageStack.includes(token)) {
         // set new page
         setpageStack((pageStack) => [...pageStack, token]);
       }
     }
-  }, [objectsQuery.data]);
+  }, [objectsQuery.data, objectsQuery.isError]);
   // clear delete items
   useEffect(() => {
     deleteCheckBoxGroupState.setValue([]);
@@ -265,6 +273,7 @@ export default function FileManager({ ...styles }: FlexProps) {
           gap={['0', null, null, null, '16px']}
           ml="auto"
           mr="12px"
+          isDisabled={objectsQuery.isError}
           color="grayModern.500"
         >
           <UploadModal />
@@ -465,18 +474,6 @@ export default function FileManager({ ...styles }: FlexProps) {
         </TableContainer>
       )}
       <HStack justifyContent={'flex-end'} minH={'max-content'} mt="auto" mb="0">
-        {
-          // <HStack>
-          //   <HStack gap="8px">
-          //     <Circle size={'8px'} bg={'blue.600'} />
-          //     <Text> 对象数 : 132</Text>
-          //   </HStack>
-          //   <HStack gap="8px">
-          //     <Circle size={'8px'} bg="adora.600" />
-          //     <Text> 已使用 13KB</Text>
-          //   </HStack>
-          // </HStack>
-        }
         <ButtonGroup variant={'white-bg-icon'}>
           <Button
             isDisabled={

frontend/providers/objectstorage/src/components/BucketContainer/Monitor.tsx

@@ -62,29 +62,28 @@ export default function DataMonitor({ ...styles }: BoxProps) {
     if (monitorQuery.isSuccess && monitorQuery.data) {
       const _data = monitorQuery.data;
       for (let i = 0; i < 4; i++) {
-        const curdata = _data?.[i]?.reduce<[number, string][]>(
-          (pre, cur) => [
-            ...pre,
-            ...cur.values
-              .map<[number, string]>(([time, v]) => [time * 1000, v])
-              // clean data
-              .filter(([time, v], idx, arr) => {
-                if (
-                  !['minio_bucket_usage_object_total', 'minio_bucket_usage_total_bytes'].includes(
-                    cur.metric.__name__
-                  )
-                ) {
-                  if (idx > 0 && BigInt(arr[idx - 1][1]) > BigInt(v)) {
-                    console.log(time, v);
-                    return false;
-                  } else return true;
-                } else {
-                  return true;
-                }
-              })
-          ],
-          []
-        );
+        // sort slice
+        _data[i].sort((a, b) => a.values[0][0] - b.values[0][0]);
+        const curdata = _data?.[i]?.reduce<[number, string][]>((pre, cur) => {
+          let maxVal = BigInt(0);
+          const column = cur.values
+            .map<[number, string]>(([time, v]) => [time * 1000, v])
+            // clean data
+            .filter(([_time, v]) => {
+              if (
+                !['minio_bucket_usage_object_total', 'minio_bucket_usage_total_bytes'].includes(
+                  cur.metric.__name__
+                ) &&
+                maxVal > BigInt(v)
+              ) {
+                return false;
+              }
+              maxVal = BigInt(v);
+              return true;
+            });
+
+          return [...pre, ...column];
+        }, []);
         data[i].push(...curdata);
       }
     }

frontend/providers/objectstorage/src/components/BucketContainer/lineChart.tsx

@@ -86,6 +86,7 @@ export default function TrendChart({
           width: 0.5
         }
       },
+      minInterval: 1,
       nameTextStyle: {
         padding: [10, 10, 10, 10]
       }

frontend/providers/objectstorage/src/components/SideBar/index.tsx

@@ -16,7 +16,7 @@ import {
 import RefreshIcon from '@/components/Icons/RefreshIcon';
 import BucketIcon from '@/components/Icons/BucketIcon';
 import MoreIcon from '@/components/Icons/MoreIcon';
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useMemo } from 'react';
 import ParamterModal from '@/components/common/modal/ParamterModal';
 import CreateBucketModal from '@/components/common/modal/CreateBucketModal';
 import EditIcon from '../Icons/EditIcon';
@@ -27,9 +27,15 @@ import { getQuota, listBucket } from '@/api/bucket';
 import { useRouter } from 'next/router';
 import { useOssStore } from '@/store/ossStore';
 import { useToast } from '@/hooks/useToast';
-import { formatBytes } from '@/utils/tools';
+import { displayMoney, formatBytes, formatMoney } from '@/utils/tools';
 import { useTranslation } from 'next-i18next';
 import DeleteBucketModal from '../common/modal/DeleteBucketModal';
+import useBillingData from '@/hooks/useBillingData';
+import { endOfDay, formatISO, startOfDay, startOfHour } from 'date-fns';
+import { BillingData, BillingSpec, BillingType } from '@/types/billing';
+import request from '@/services/request';
+import { ApiResp } from '@/services/kubernet';
+import useSessionStore from '@/store/session';
 
 function MoreMenu({ bucket }: { bucket: TBucket }) {
   const router = useRouter();
@@ -145,26 +151,52 @@ function QuotaProgress({
   );
 }
 function BucketOverview({ ...styles }: StackProps) {
+  const session = useSessionStore((s) => s.session);
   const quotaQuery = useQuery({
-    queryKey: [QueryKey.bucketInfo],
+    queryKey: [QueryKey.bucketInfo, session],
     queryFn: getQuota
   });
   const { t } = useTranslation('common');
   const limit = quotaQuery.data?.quota.total || 0;
   const used = quotaQuery.data?.quota.used || 0;
   const count = quotaQuery.data?.quota.count || 0;
+  // const end = startOfHour(new Date());
+  // const leastCost = useQuery({
+  //   queryKey: ['billing', { end }],
+  //   queryFn: () => {
+  //     const spec: BillingSpec = {
+  //       appType: 'OBJECT-STORAGE',
+  //       startTime: formatISO(startOfDay(end), { representation: 'complete' }),
+  //       endTime: formatISO(endOfDay(end), { representation: 'complete' }),
+  //       page: 1,
+  //       pageSize: 1,
+  //       type: BillingType.CONSUME,
+  //       orderID: ''
+  //     };
+  //     return request<any, BillingData, { spec: BillingSpec }>('/api/billing', {
+  //       method: 'POST',
+  //       data: {
+  //         spec
+  //       }
+  //     });
+  //   },
+  //   select(data) {
+  //     console.log(data?.status.item);
+  //     return data?.status.item?.[0].amount || 0;
+  //   }
+  // });
   return (
     <Stack fontSize={'12px'} {...styles}>
       {
         // <Flex justifyContent={'space-between'}>
-        //   <Text>price:</Text>
-        //   <Text w="160px">123</Text>
+        //   <Text>{t('dailyEstimate')}:</Text>
+        //   <Text w="160px">{displayMoney(formatMoney((leastCost.data ?? 0) * 24))}</Text>
         // </Flex>
-        <Flex justifyContent={'space-between'}>
-          <Text>{t('totalObjects')}：</Text>
-          <Text w="160px">{count}</Text>
-        </Flex>
       }
+      <Flex justifyContent={'space-between'}>
+        <Text>{t('totalObjects')}：</Text>
+        <Text w="160px">{count}</Text>
+      </Flex>
       {!quotaQuery.isLoading && (
         <QuotaProgress
           name={'storage'}
@@ -194,12 +226,13 @@ function BucketOverview({ ...styles }: StackProps) {
 }
 
 export default function SideBar() {
-  const ossStore = useOssStore();
+  const s3client = useOssStore((s) => s.client);
+  const session = useSessionStore((s) => s.session);
   const { t } = useTranslation('bucket');
   const listBucketQuery = useQuery({
-    queryKey: [QueryKey.bucketList],
+    queryKey: [QueryKey.bucketList, session],
     queryFn: listBucket,
-    enabled: !!ossStore.client
+    enabled: !!s3client
   });
   const bucketList = listBucketQuery.data?.list || [];
   const currentBucket = useOssStore((s) => s.currentBucket);