fix: Fix cluster settings permission

Signed-off-by: leoliu <leoliu@yunify.com>

server/config.yaml

@@ -186,7 +186,7 @@ client:
             - {
                 name: visibility,
                 title: Cluster Visibility,
-                authKey: 'cluster-settings',
+                authKey: cluster-settings,
                 multiCluster: true,
               }
             # - { name: members, title: Cluster Members }
@@ -195,14 +195,14 @@ client:
                 name: mail-server,
                 title: Mail Server,
                 icon: mail,
-                authKey: notification,
+                authKey: cluster-settings,
                 clusterModule: notification,
               }
             - {
                 name: log-collections,
                 title: Log Collections,
                 icon: file,
-                authKey: logging|events|auditing,
+                authKey: cluster-settings,
                 clusterModule: logging|events|auditing,
               }
 

src/components/Forms/MailServerForm/index.jsx

@@ -46,6 +46,12 @@ export default class MailServerForm extends Component {
     this.props.onValidate(this.props.data)
   }
 
+  get inputProps() {
+    return {
+      readOnly: this.props.readOnly,
+    }
+  }
+
   render() {
     return (
       <Form
@@ -114,39 +120,49 @@ export default class MailServerForm extends Component {
     return (
       <>
         <Item className={styles.url} label={t('SMTP Server Address')}>
-          <UrlInput portName="port" hostName="email_host" />
+          <UrlInput
+            portName="port"
+            hostName="email_host"
+            {...this.inputProps}
+          />
         </Item>
 
         <Item>
           <Checkbox
             className={styles.sslCheckbox}
             name="ssl_enable"
             onChange={this.props.onSSLChange}
+            disabled={this.props.readOnly}
           >
             {t('Use SSL Secure Connection')}
           </Checkbox>
         </Item>
 
         <div className={styles.row}>
           <Item label={`SMTP ${t('User')}`}>
-            <Input name="email" />
+            <Input name="email" {...this.inputProps} />
           </Item>
           <Item label={`SMTP ${t('Password')}`}>
             <Input
               name="password"
               autoComplete="new-password"
               type="password"
+              {...this.inputProps}
             />
           </Item>
         </div>
 
         <div className={styles.row}>
           <Item label={t('SENDER_MAIL')} desc={t('FROM_EMAIL_ADDR_DESC')}>
-            <Input name="from_email_addr" placeholder={'mail@yunify.com'} />
+            <Input
+              name="from_email_addr"
+              placeholder={'mail@yunify.com'}
+              {...this.inputProps}
+            />
           </Item>
 
           <Item label={t('SENDER_NICKNAME')}>
-            <Input name="display_sender" />
+            <Input name="display_sender" {...this.inputProps} />
           </Item>
         </div>
 
@@ -158,12 +174,14 @@ export default class MailServerForm extends Component {
             <Input
               placeholder={'youraccount@mail.com'}
               name="test_email_recipient"
+              {...this.inputProps}
             />
           </Item>
           <Button
             className={styles.validateButton}
             onClick={this.onValidateBtnClick}
             loading={this.props.isVerifying}
+            disabled={this.props.readOnly}
           >
             {t('Send a test email')}
           </Button>
@@ -173,6 +191,10 @@ export default class MailServerForm extends Component {
   }
 
   renderFooterBtns() {
+    if (this.props.readOnly) {
+      return null
+    }
+
     return (
       <>
         <Button onClick={this.props.onCancel}>{t('Cancel')}</Button>

src/components/Inputs/UrlInput/index.jsx

@@ -33,7 +33,7 @@ export default class UrlInput extends React.Component {
   }
 
   render() {
-    const { className } = this.props
+    const { className, readOnly } = this.props
     return (
       <Columns className={classnames(styles.columns, className)}>
         <Column className="is-7">
@@ -43,6 +43,7 @@ export default class UrlInput extends React.Component {
             <Input
               name={this.props.hostName}
               placeholder={`${t('eg.')}192.168.1.10`}
+              readOnly={readOnly}
             />
           </Form.Item>
         </Column>
@@ -56,6 +57,7 @@ export default class UrlInput extends React.Component {
               name={this.props.portName}
               onChange={this.onPortChange}
               defaultValue={this.props.defaultPort}
+              readOnly={readOnly}
               integer
             />
           </Form.Item>

src/pages/clusters/containers/LogCollections/Detail/index.jsx

@@ -152,14 +152,6 @@ export default class LogCollectionDetail extends React.Component {
       ],
     }
 
-    return (
-      <DetailPage
-        stores={stores}
-        routes={routes.filter(
-          route => !route.required || route.required(this.store.detail)
-        )}
-        {...sideProps}
-      />
-    )
+    return <DetailPage stores={stores} routes={routes} {...sideProps} />
   }
 }

src/pages/clusters/containers/LogCollections/Detail/routes.js

@@ -19,7 +19,6 @@
 import { getIndexRoute } from 'utils/router.config'
 
 import ResourceStatus from './Configuration'
-import Log from './Log'
 
 const PATH = '/clusters/:cluster/log-collections/:component/:name'
 
@@ -30,15 +29,5 @@ export default [
     component: ResourceStatus,
     exact: true,
   },
-  {
-    path: `${PATH}/log`,
-    title: 'Log',
-    component: Log,
-    exact: true,
-    clusterModule: 'logging',
-    required({ type }) {
-      return type === 'es'
-    },
-  },
   getIndexRoute({ path: PATH, to: `${PATH}/resource-status`, exact: true }),
 ]

src/pages/clusters/containers/LogCollections/index.jsx

@@ -72,6 +72,13 @@ export default class LogCollection extends React.Component {
     }
   }
 
+  get enabledActions() {
+    return globals.app.getActions({
+      module: 'cluster-settings',
+      cluster: this.props.match.params.cluster,
+    })
+  }
+
   refresh = () => {
     this.store.fetch({
       labelSelector: `logging.kubesphere.io/component=${this.component}`,
@@ -132,6 +139,10 @@ export default class LogCollection extends React.Component {
   }
 
   renderCreateButton() {
+    if (!this.enabledActions.includes('create')) {
+      return null
+    }
+
     return (
       <Button
         type="control"

src/pages/clusters/containers/MailServices/index.jsx

@@ -63,6 +63,13 @@ class MailServerConfig extends React.Component {
     return this.tipMap[this.state.formStatus] || {}
   }
 
+  get enabledActions() {
+    return globals.app.getActions({
+      module: 'cluster-settings',
+      cluster: this.props.match.params.cluster,
+    })
+  }
+
   componentDidMount() {
     this.fetchConfig()
   }
@@ -159,6 +166,10 @@ class MailServerConfig extends React.Component {
   }
 
   renderCreateButton() {
+    if (!this.enabledActions.includes('create')) {
+      return null
+    }
+
     return (
       <Button type="control" onClick={this.toggleSettingForm}>
         {t('Settings')}
@@ -183,6 +194,7 @@ class MailServerConfig extends React.Component {
           isVerifying={this.store.verifying}
           isSubmitting={this.store.isSubmitting}
           disableSubmit={this.state.formStatus !== 'needSaved'}
+          readOnly={!this.enabledActions.includes('edit')}
         />
       </div>
     )