Bugfix for Access module (#516)

oceanbase · Aug 15, 2024 · e5e7622 · e5e7622
1 parent 524787f
commit e5e7622
Show file tree

Hide file tree

Showing 29 changed files with 373 additions and 209 deletions.
diff --git a/ui/src/api/errorHandling.ts b/ui/src/api/errorHandling.ts
@@ -6,7 +6,7 @@ export const errorHandling = (error: any) => {
     message.warning(
       intl.formatMessage({
         id: 'src.api.2CA64FC6',
-        defaultMessage: '登陆已过期',
+        defaultMessage: '登录已过期',
       }),
     );
     location.href = '/#/login';
@@ -18,6 +18,8 @@ export const errorHandling = (error: any) => {
       response?.data?.message === 'Error BadRequest: password is incorrect'
     ) {
       message.error('原密码输入不正确');
+    } else if (response?.status === 403) {
+      message.warning('无权限访问');
     } else {
       message.error(error?.response?.data?.message || error.message);
     }

diff --git a/ui/src/components/MonitorDetail/index.tsx b/ui/src/components/MonitorDetail/index.tsx
@@ -1,3 +1,4 @@
+import { useAccess } from '@umijs/max';
 import { useUpdateEffect } from 'ahooks';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
@@ -34,6 +35,7 @@ export default function MonitorDetail({
 }: MonitorDetailProps) {
   const [isRefresh, setIsRefresh] = useState<boolean>(false);
   const [realTime, setRealTime] = useState<string>(getDate());
+  const access = useAccess();
   const timerRef = useRef<NodeJS.Timeout>();
   const updateTimer = useRef<NodeJS.Timer>();
   const [queryRange, setQueryRange] =
@@ -79,17 +81,19 @@ export default function MonitorDetail({
   return (
     <div style={{ marginTop: 12 }}>
       {basicInfo}
-      <DataFilter
-        realTime={realTime}
-        isRefresh={isRefresh}
-        setIsRefresh={setIsRefresh}
-        filterLabel={filterLabel}
-        setFilterLabel={setFilterLabel}
-        filterData={filterData}
-        setFilterData={setFilterData}
-        queryRange={queryRange}
-        setQueryRange={setQueryRange}
-      />
+      {access.obclusterwrite ? (
+        <DataFilter
+          realTime={realTime}
+          isRefresh={isRefresh}
+          setIsRefresh={setIsRefresh}
+          filterLabel={filterLabel}
+          setFilterLabel={setFilterLabel}
+          filterData={filterData}
+          setFilterData={setFilterData}
+          queryRange={queryRange}
+          setQueryRange={setQueryRange}
+        />
+      ) : null}
       <MonitorComp
         isRefresh={isRefresh}
         queryRange={queryRange}

diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -199,14 +199,13 @@ export default function TopoComponent({
     const height = container?.scrollHeight || 500;
 
     graph.current = new G6.TreeGraph(config(width, height));
-    const writable = tenantReplicas ? true : access.obclusterwrite;
     G6.registerNode(
       'cluster',
-      createNodeFromReact(ReactNode(handleClick, writable)),
+      createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)),
     );
     G6.registerNode(
       'zone',
-      createNodeFromReact(ReactNode(handleClick, writable)),
+      createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)),
     );
     G6.registerNode('server', createNodeFromReact(ReactNode()));
     G6.registerEdge('flow-line', {

diff --git a/ui/src/components/customModal/HandleAccountModal.tsx b/ui/src/components/customModal/HandleAccountModal.tsx
@@ -48,8 +48,8 @@ export default function HandleAccountModal({
       type === Type.CREATE
         ? await access.createAccount(omit(formData, ['confirmPassword']))
         : await access.patchAccount(
-            formData.username,
-            omit(formData, ['confirmPassword', 'username']),
+            editValue!.username,
+            omit(formData, ['confirmPassword', 'username', 'password']),
           );
     if (res.successful) {
       message.success('操作成功！');

diff --git a/ui/src/components/customModal/HandleRoleModal.tsx b/ui/src/components/customModal/HandleRoleModal.tsx
@@ -38,16 +38,16 @@ function PermissionSelect({
   const [checkedList, setCheckedList] = useState<CheckedList>([]);
   const checkAll = !checkedList.some(
     (item) =>
-      !(item.checked.includes('READ') && item.checked.includes('WRITE')),
+      !(item.checked.includes('read') && item.checked.includes('write')),
   );
   const options = [
-    { label: '读', value: 'READ' },
-    { label: '写', value: 'WRITE' },
+    { label: '读', value: 'read' },
+    { label: '写', value: 'write' },
   ];
   const onCheckAllChange: CheckboxProps['onChange'] = (e) => {
     if (e.target.checked) {
       setCheckedList((preCheckedList) =>
-        preCheckedList.map((item) => ({ ...item, checked: ['READ', 'WRITE'] })),
+        preCheckedList.map((item) => ({ ...item, checked: ['read', 'write'] })),
       );
     } else {
       setCheckedList((preCheckedList) =>
@@ -72,19 +72,20 @@ function PermissionSelect({
       for (const item of defaultValue) {
         newCheckedList.push({
           domain: item.domain,
-          checked: item.action === 'WRITE' ? ['WRITE', 'READ'] : [item.action],
+          checked: item.action === 'write' ? ['write', 'read'] : [item.action],
         });
       }
       setCheckedList(newCheckedList);
     }
-  }, []);
+  }, [defaultValue]);
 
   useEffect(() => {
     const newValue = [];
     for (const item of checkedList) {
-      if (!item.checked.length) continue;
+      if (!item.checked.includes('write') && !item.checked.includes('read'))
+        continue;
       newValue.push({
-        action: item.checked.includes('WRITE') ? 'WRITE' : 'READ',
+        action: item.checked.includes('write') ? 'write' : 'read',
         domain: item.domain,
         object: '*',
       });
@@ -144,7 +145,7 @@ export default function HandleRoleModal({
       return { ...item, action: '' };
     } else {
       const editItem = editValue?.policies.find(
-        (item) => item.domain === item.domain,
+        (policy) => policy.domain === item.domain,
       );
       return editItem ? { ...editItem } : { ...item, action: '' };
     }
@@ -154,25 +155,24 @@ export default function HandleRoleModal({
       type === Type.CREATE
         ? await access.createRole(formData)
         : await access.patchRole(
-            formData.name,
+            editValue!.name,
             pick(formData, ['description', 'permissions']),
           );
     if (res.successful) {
       message.success('操作成功！');
       if (successCallback) successCallback();
-      form.resetFields();
       setVisible(false);
     }
   };
 
   useEffect(() => {
-    if (type === Type.EDIT) {
+    if (type === Type.EDIT && visible) {
       form.setFieldsValue({
         description: editValue?.description,
         permissions: editValue?.policies,
       });
     }
-  }, [type, editValue]);
+  }, [type, editValue, visible]);
 
   return (
     <CustomModal
@@ -184,7 +184,7 @@ export default function HandleRoleModal({
         setVisible(false);
       }}
     >
-      <Form form={form} onFinish={onFinish}>
+      <Form form={form} onFinish={onFinish} preserve={false}>
         {type === Type.CREATE && (
           <Form.Item
             rules={[{ required: true, message: '请输入角色名称' }]}
@@ -201,7 +201,7 @@ export default function HandleRoleModal({
         >
           <Input placeholder="请输入" />
         </Form.Item>
-        <Form.Item label="权限" name={'permissions'}>
+        <Form.Item required label="权限" name={'permissions'}>
           <PermissionSelect
             fetchData={allPolicies}
             defaultValue={defaultValue}

diff --git a/ui/src/components/customModal/MyInfoModal.tsx b/ui/src/components/customModal/MyInfoModal.tsx
@@ -0,0 +1,62 @@
+import { useModel } from '@umijs/max';
+import type { DescriptionsProps } from 'antd';
+import { Button, Descriptions } from 'antd';
+import CustomModal from '.';
+
+export default function MyInfoModal({
+  visible,
+  setVisible,
+}: API.CommonModalType) {
+  const { initialState = {} } = useModel('@@initialState');
+  const { accountInfo } = initialState;
+
+  const items: DescriptionsProps['items'] = [
+    {
+      key: 'nickname',
+      label: '昵称',
+      children: `${accountInfo?.nickname || '-'}`,
+    },
+    {
+      key: 'username',
+      label: '用户名',
+      children: `${accountInfo?.username || '-'}`,
+    },
+    {
+      key: 'roles',
+      label: '角色',
+      children: `${
+        accountInfo?.roles.map((role) => role.name).join(',') || '-'
+      } `,
+    },
+    {
+      key:'description',
+      label:'描述',
+      children: `${accountInfo?.description || '-'}`,
+    },
+    {
+      key: 'lastLoginAt',
+      label: '最近一次登录',
+      children: `${accountInfo?.lastLoginAt || '-'}`,
+    },
+  ];
+  return (
+    <CustomModal
+      isOpen={visible}
+      handleCancel={() => {
+        setVisible(false);
+      }}
+      footer={
+        <Button
+          type="primary"
+          onClick={() => {
+            setVisible(false);
+          }}
+        >
+          确定
+        </Button>
+      }
+    >
+      <Descriptions title="我的信息" items={items} />
+    </CustomModal>
+  );
+}
diff --git a/ui/src/components/customModal/ResetPwdModal.tsx b/ui/src/components/customModal/ResetPwdModal.tsx
@@ -2,6 +2,7 @@ import { access } from '@/api';
 import type { ParamResetPasswordParam } from '@/api/generated';
 import { encryptText, usePublicKey } from '@/hook/usePublicKey';
 import { Form, Input, message } from 'antd';
+import { omit } from 'lodash';
 import CustomModal from '.';
 
 interface ResetPwdModalProps {
@@ -23,10 +24,12 @@ export default function ResetPwdModal({
       form.submit();
     } catch (err) {}
   };
-  const onFinish = async (values: ParamResetPasswordParam) => {
+  const onFinish = async (
+    values: ParamResetPasswordParam & { confirmPassword: string },
+  ) => {
     values.oldPassword = encryptText(values.oldPassword!, publicKey) as string;
     values.password = encryptText(values.password!, publicKey) as string;
-    const res = await access.resetPassword(values);
+    const res = await access.resetPassword(omit(values, ['confirmPassword']));
     if (res.successful) {
       message.success('操作成功！');
       if (successCallback) successCallback();
@@ -36,7 +39,7 @@ export default function ResetPwdModal({
   };
   return (
     <CustomModal
-      title="重置密码"
+      title="修改密码"
       isOpen={visible}
       handleOk={handleSubmit}
       handleCancel={() => {

diff --git a/ui/src/components/customModal/index.tsx b/ui/src/components/customModal/index.tsx
@@ -4,15 +4,16 @@ import { ReactNode } from 'react';
 
 interface CustomModalProps {
   isOpen: boolean;
-  title: string;
-  handleOk: () => void;
-  handleCancel: () => void;
+  title?: string;
+  handleOk?: () => void;
+  handleCancel?: () => void;
   children: ReactNode;
+  footer?: React.ReactNode;
   width?: number;
 }
 
 export default function CustomModal(props: CustomModalProps) {
-  const { isOpen, handleOk, handleCancel, title, width = 520 } = props;
+  const { isOpen, handleOk, handleCancel, title, width = 520, footer } = props;
   return (
     <Modal
       width={width}
@@ -28,6 +29,7 @@ export default function CustomModal(props: CustomModalProps) {
         defaultMessage: '取消',
       })}
       onCancel={handleCancel}
+      footer={footer}
     >
       {props.children}
     </Modal>

diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -985,7 +985,7 @@
   "src.components.InputLabelComp.6C88A39D": "添加",
   "src.components.AlertDrawer.95C6A631": "提交",
   "src.components.AlertDrawer.9B7CD984": "取消",
-  "src.api.2CA64FC6": "登陆已过期",
+  "src.api.2CA64FC6": "登录已过期",
   "src.pages.OBProxy.New.49694AC5": "创建成功！",
   "src.pages.OBProxy.New.7CAF48E9": "详细配置",
   "src.pages.OBProxy.New.0C4EFBB0": "资源设置",

diff --git a/ui/src/pages/Access/Accounts.tsx b/ui/src/pages/Access/Accounts.tsx
@@ -82,6 +82,7 @@ export default function Accounts({
       title: '最近一次登陆时间',
       key: 'lastLoginAt',
       dataIndex: 'lastLoginAt',
+      render: (value) => <span>{value || '-'}</span>,
     },
     {
       title: '操作',
@@ -98,7 +99,7 @@ export default function Accounts({
           <Space>
             <Button
               onClick={() => setResetModalVisible(true)}
-              disabled={otherAdmin || !access.acwrite}
+              disabled={otherAdmin || (!access.acwrite && !isMyself)}
               type="link"
             >
               重置密码
@@ -139,6 +140,7 @@ export default function Accounts({
         setVisible={setModalVisible}
         editValue={editData}
         visible={modalVisible}
+        successCallback={refreshAccounts}
         type={Type.EDIT}
       />
       <ResetPwdModal

diff --git a/ui/src/pages/Access/Roles.tsx b/ui/src/pages/Access/Roles.tsx
@@ -48,7 +48,7 @@ export default function Roles({ allRoles, refreshRoles }: RolesProps) {
           <Space size={[8, 16]} wrap>
             {permission.map((item: AcPolicy) => (
               <span>
-                {item.object}：{item.action}
+                {item.domain}:{item.action}
               </span>
             ))}
           </Space>
@@ -100,6 +100,7 @@ export default function Roles({ allRoles, refreshRoles }: RolesProps) {
         visible={modalVisible}
         editValue={editData}
         setVisible={setModalVisible}
+        successCallback={refreshRoles}
         type={Type.EDIT}
       />
     </div>

diff --git a/ui/src/pages/Alert/Channel/index.tsx b/ui/src/pages/Alert/Channel/index.tsx
@@ -92,7 +92,7 @@ export default function Channel() {
             })}
           </Button>
           <Button
-            style={{ color: '#ff4b4b' }}
+            style={access.alarmwrite ? { color: '#ff4b4b' } : {}}
             disabled={!access.alarmwrite}
             onClick={() => {
               showDeleteConfirm({

diff --git a/ui/src/pages/Alert/Rules/index.tsx b/ui/src/pages/Alert/Rules/index.tsx
@@ -158,7 +158,7 @@ export default function Rules() {
           </Button>
           <Button
             type="link"
-            style={{ color: '#ff4b4b' }}
+            style={access.alarmwrite ? { color: '#ff4b4b' } : {}}
             disabled={!access.alarmwrite}
             onClick={() => {
               showDeleteConfirm({

diff --git a/ui/src/pages/Alert/Shield/index.tsx b/ui/src/pages/Alert/Shield/index.tsx
@@ -215,7 +215,9 @@ export default function Shield() {
           <Button
             type="link"
             style={
-              record.status.state !== 'expired' ? { color: '#ff4b4b' } : {}
+              record.status.state !== 'expired' && access.alarmwrite
+                ? { color: '#ff4b4b' }
+                : {}
             }
             disabled={record.status.state === 'expired' || !access.alarmwrite}
             onClick={() => {