Fix: Check the permission before request the compare API (#802)

kubevela · Apr 28, 2023 · 92d097c · 92d097c
1 parent 6fe131b
commit 92d097c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
@@ -27,6 +27,8 @@ import type { Endpoint } from '../../../../interface/observation';
 import type { Target } from '../../../../interface/target';
 import { locale } from '../../../../utils/locale';
 import { getLink } from '../../../../utils/utils';
+import { checkPermission } from '../../../../utils/permission';
+import { LoginUserInfo } from '../../../../interface/user';
 
 export type GatewayIP = {
   ip: string;
@@ -47,6 +49,7 @@ type Props = {
   disableStatusShow?: boolean;
   refresh: () => void;
   dispatch: ({}) => void;
+  userInfo?: LoginUserInfo;
 };
 
 type State = {
@@ -162,11 +165,23 @@ class Header extends Component<Props, State> {
   };
 
   compareCurrentWithCluster = (appName: string, envName: string) => {
-    const { applicationStatus } = this.props;
+    const { applicationStatus, applicationDetail, userInfo } = this.props;
     if (!applicationStatus) {
       this.setState({ compare: undefined });
       return;
     }
+    if (
+      !checkPermission(
+        {
+          resource: `project:${applicationDetail?.project?.name}/application:${applicationDetail?.name}`,
+          action: 'compare',
+        },
+        applicationDetail?.project?.name,
+        userInfo
+      )
+    ) {
+      return;
+    }
     compareApplication(appName, { compareLatestWithRunning: { env: envName } }).then(
       (res: ApplicationCompareResponse) => {
         this.setState({ compare: res });

diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
@@ -466,6 +466,7 @@ class ApplicationInstanceList extends React.Component<Props, State> {
       <div>
         <Header
           envbinding={envbinding}
+          userInfo={userInfo}
           targets={this.getTargets()}
           components={components}
           envName={envName}

diff --git a/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
@@ -306,6 +306,7 @@ class ApplicationStatusPage extends React.Component<Props, State> {
       <div className="application-status-wrapper">
         <Loading visible={loading && endpointLoading} style={{ width: '100%' }}>
           <Header
+            userInfo={userInfo}
             envbinding={this.getEnvbindingByName()}
             targets={this.getTargets()}
             envName={envName}

diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
@@ -24,6 +24,7 @@ import { beautifyTime } from '../../utils/common';
 import { locale } from '../../utils/locale';
 
 import ApplicationWorkflowRecord from './components/WorkflowRecord';
+import { LoginUserInfo } from '../../interface/user';
 
 const { Row, Col } = Grid;
 
@@ -34,6 +35,7 @@ type Props = {
   applicationStatus?: ApplicationStatus;
   envbinding: EnvBinding[];
   workflows: Workflow[];
+  userInfo?: LoginUserInfo;
 };
 
 type State = {
@@ -49,7 +51,7 @@ type State = {
 };
 
 @connect((store: any) => {
-  return { ...store.application };
+  return { ...store.application, ...store.user };
 })
 class ApplicationWorkflow extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -136,7 +138,7 @@ class ApplicationWorkflow extends React.Component<Props, State> {
   runApplicationWorkflow = () => {};
 
   render() {
-    const { applicationDetail, dispatch, applicationStatus, workflows } = this.props;
+    const { applicationDetail, dispatch, applicationStatus, workflows, userInfo } = this.props;
     const {
       params: { record, appName, envName },
     } = this.props.match;
@@ -177,6 +179,7 @@ class ApplicationWorkflow extends React.Component<Props, State> {
     return (
       <div className="run-layout">
         <Header
+          userInfo={userInfo}
           envbinding={this.getEnvbindingByName()}
           envName={envName}
           appName={appName}