[release-3.2] fix: Fix the error of failure to get gateway without cluster permission in the project

src/components/Forms/Route/RouteRules/index.jsx

@@ -126,21 +126,14 @@ class RouteRules extends React.Component {
 
   getGateway = async () => {
     if (!this.props.isFederated) {
-      const getHostGateway = () => {
-        return this.gatewayStore.getGateway({ cluster: this.cluster })
-      }
-
       const getProjectGateway = () => {
-        return this.gatewayStore.getGateway({
+        return this.gatewayStore.getGatewayByProject({
           namespace: this.namespace,
           cluster: this.cluster,
         })
       }
       this.setState({ isLoading: true })
-      const dataList = await Promise.all([
-        getHostGateway(),
-        getProjectGateway(),
-      ])
+      const dataList = await getProjectGateway()
 
       const data = dataList[1] || dataList[0]
 

src/pages/clusters/containers/Gateway/Components/GatewayCard/index.jsx

@@ -16,16 +16,16 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { isEmpty } from 'lodash'
 import React from 'react'
 import { toJS } from 'mobx'
 import { observer, inject } from 'mobx-react'
-import classNames from 'classnames'
+import { ReactComponent as AppGoverIcon } from 'assets/app_gover.svg'
 import { Button, Dropdown, Menu, Icon, Tooltip } from '@kube-design/components'
 import { Panel } from 'components/Base'
 import { getLocalTime } from 'utils'
+import classNames from 'classnames'
+import { isEmpty, isArray } from 'lodash'
 
-import { ReactComponent as AppGoverIcon } from 'assets/app_gover.svg'
 import { trigger } from 'utils/action'
 import { CLUSTER_PROVIDERS } from 'utils/constants'
 import GatewayEmpty from '../GatewayEmpty'
@@ -53,7 +53,7 @@ class GatewayCard extends React.Component {
   }
 
   get canEdit() {
-    return !this.props.actions.includes('manage')
+    return this.props.actions && !this.props.actions.includes('manage')
   }
 
   get cluster() {
@@ -64,6 +64,7 @@ class GatewayCard extends React.Component {
 
   get itemActions() {
     const { type } = this.props
+
     const baseOpt = [
       {
         key: 'view',
@@ -245,6 +246,12 @@ class GatewayCard extends React.Component {
 
     const lbIcon = lb && CLUSTER_PROVIDERS.find(item => item.value === lb).icon
 
+    const isClusterPermission =
+      globals.app.hasPermission({
+        module: 'clusters',
+        action: 'view',
+      }) && this.props.type === 'cluster'
+
     return [
       [
         {
@@ -267,7 +274,7 @@ class GatewayCard extends React.Component {
           component: renderOperations ? (
             renderOperations({
               url: this.linkUrl,
-              disabled: isEmpty(createTime),
+              disabled: !isClusterPermission || isEmpty(createTime),
             })
           ) : (
             <Dropdown
@@ -411,12 +418,14 @@ class GatewayCard extends React.Component {
 
   render() {
     const { component, namespace } = this.props.match.params
-    const { type, title } = this.props
-
+    const { type, title, gatewayList } = this.props
+    const hasClusterGateway =
+      isArray(gatewayList) && gatewayList[0] && !gatewayList[1]
     return (
       <div>
         {this.isEmptyData ? (
-          namespace && type === 'cluster' ? null : (
+          (namespace && type === 'cluster') ||
+          (hasClusterGateway && namespace && type === 'project') ? null : (
             <>
               {title}
               <GatewayEmpty

src/pages/clusters/containers/Projects/Detail/Gateway/index.jsx

@@ -60,21 +60,14 @@ export default class Gateway extends React.Component {
     })
   }
 
-  getHostGateway = () => {
-    return this.store.getGateway({ cluster: this.cluster })
-  }
-
   getProjectGateway = () => {
     const params = { ...this.props.match.params }
-    return this.store.getGateway({ ...params, cluster: this.cluster })
+    return this.store.getGatewayByProject({ ...params, cluster: this.cluster })
   }
 
   getInitGateway = async () => {
     this.isLoading = true
-    const dataList = await Promise.all([
-      this.getHostGateway(),
-      this.getProjectGateway(),
-    ])
+    const dataList = await this.getProjectGateway()
     this.gatewayList = dataList
     this.isLoading = false
   }
@@ -127,9 +120,9 @@ export default class Gateway extends React.Component {
       return this.renderEmpty()
     }
 
-    return this.gatewayList.map((item, index) => {
+    return this.gatewayList.map((item, index, arr) => {
       const isCluster = index === 0
-      return item ? (
+      return (
         <GatewayCard
           key={index}
           type={isCluster ? 'cluster' : 'project'}
@@ -145,8 +138,9 @@ export default class Gateway extends React.Component {
           }
           prefix={isCluster ? '' : this.prefix}
           renderOperations={url => this.renderOperations(url)}
+          gatewayList={toJS(arr)}
         />
-      ) : null
+      )
     })
   }
 

src/pages/fedprojects/containers/Applications/Detail/AppIngresses/Ingresses/index.jsx

@@ -70,10 +70,11 @@ export default class Components extends Component {
   async getGateway() {
     const { cluster, namespace } = this.props
 
-    const datalist = await Promise.all([
-      this.gatewayStore.getGateway({ cluster }),
-      this.gatewayStore.getGateway({ cluster, namespace }),
-    ])
+    const datalist = await this.gatewayStore.getGatewayByProject({
+      cluster,
+      namespace,
+    })
+
     this.setState({ gateway: datalist[1] || datalist[0] })
   }
 

src/pages/fedprojects/containers/Gateway/Access/index.jsx

@@ -57,20 +57,13 @@ class InternetAccess extends React.Component {
   @observable
   gatewayList = []
 
-  getHostGateway = () => {
-    return this.store.getGateway({ cluster: this.cluster })
-  }
-
   getProjectGateway = () => {
     const params = { ...this.props.match.params }
-    return this.store.getGateway({ ...params, cluster: this.cluster })
+    return this.store.getGatewayByProject({ ...params, cluster: this.cluster })
   }
 
   getInitGateway = async () => {
-    const dataList = await Promise.all([
-      this.getHostGateway(),
-      this.getProjectGateway(),
-    ])
+    const dataList = await this.getProjectGateway()
     this.gatewayList = dataList
   }
 
@@ -178,9 +171,9 @@ class InternetAccess extends React.Component {
           <ClusterTitle cluster={cluster} theme="light" />
         </div>
 
-        {data.map((item, index) => {
+        {data.map((item, index, arr) => {
           const isCluster = index === 0
-          return item ? (
+          return (
             <GatewayCard
               type={isCluster ? 'cluster' : 'project'}
               {...this.props}
@@ -199,8 +192,9 @@ class InternetAccess extends React.Component {
               }
               prefix={isCluster ? null : this.prefix}
               renderOperations={isCluster ? this.renderOperations : null}
+              gatewayList={toJS(arr)}
             />
-          ) : null
+          )
         })}
       </div>
     )

src/pages/fedprojects/containers/Routes/Detail/ResourceStatus/Item/index.jsx

@@ -44,10 +44,11 @@ export default class Item extends React.Component {
   async getGateway() {
     const { cluster, namespace } = this.props
 
-    const datalist = await Promise.all([
-      this.store.getGateway({ cluster: cluster.name }),
-      this.store.getGateway({ cluster: cluster.name, namespace }),
-    ])
+    const datalist = await this.store.getGatewayByProject({
+      cluster: cluster.name,
+      namespace,
+    })
+
     this.setState({ gateway: datalist[1] || datalist[0] })
   }
 

src/pages/fedprojects/containers/Services/Detail/ServiceAccess/ClusterService/index.jsx

@@ -56,23 +56,16 @@ export default class ClusterService extends Component {
     this.getInitGateway()
   }
 
-  getHostGateway = () => {
-    return this.gatewayStore.getGateway({ cluster: this.cluster })
-  }
-
   getProjectGateway = () => {
     const { namespace } = this.props.detail
-    return this.gatewayStore.getGateway({
+    return this.gatewayStore.getGatewayByProject({
       namespace,
       cluster: this.cluster,
     })
   }
 
   getInitGateway = async detail => {
-    const dataList = await Promise.all([
-      this.getHostGateway(detail),
-      this.getProjectGateway(detail),
-    ])
+    const dataList = await this.getProjectGateway(detail)
     const gateway = dataList[1] || dataList[0]
     this.setState({ gateway })
   }

src/pages/projects/components/Modals/CreateApp/index.jsx

@@ -193,18 +193,14 @@ export default class ServiceDeployAppModal extends React.Component {
   async fetchData() {
     const { cluster, namespace } = this.props
 
-    const getHostGateway = () => {
-      return this.gatewayStore.getGateway({ cluster })
-    }
-
     const getProjectGateway = () => {
-      return this.gatewayStore.getGateway({
+      return this.gatewayStore.getGatewayByProject({
         namespace,
         cluster,
       })
     }
 
-    const dataList = await Promise.all([getHostGateway(), getProjectGateway()])
+    const dataList = await getProjectGateway()
     const gateway = dataList[1] || dataList[0]
     const isGovernance = !!(this.serviceMeshEnable && gateway.serviceMeshEnable)
 

src/pages/projects/containers/Gateway/index.jsx

@@ -24,7 +24,7 @@ import Banner from 'components/Cards/Banner'
 import GatewayCard from 'clusters/containers/Gateway/Components/GatewayCard'
 import { Tooltip, Icon, Loading, Button } from '@kube-design/components'
 import GatewayStore from 'stores/gateway'
-import { observable } from 'mobx'
+import { observable, toJS } from 'mobx'
 
 import styles from './index.scss'
 
@@ -48,29 +48,26 @@ export default class Getway extends React.Component {
     return this.props.match.url
   }
 
-  get enableActions() {
+  get namespace() {
+    return this.props.match.params.namespace
+  }
+
+  get enabledActions() {
     return globals.app.getActions({
       module: 'project-settings',
-      ...this.props.match.params,
       project: this.namespace,
+      cluster: this.cluster,
     })
   }
 
-  getHostGateway = () => {
-    return this.store.getGateway({ cluster: this.cluster })
-  }
-
   getProjectGateway = () => {
     const params = { ...this.props.match.params }
-    return this.store.getGateway({ ...params, cluster: this.cluster })
+    return this.store.getGatewayByProject({ ...params, cluster: this.cluster })
   }
 
   getInitGateway = async () => {
     this.isLoading = true
-    const dataList = await Promise.all([
-      this.getHostGateway(),
-      this.getProjectGateway(),
-    ])
+    const dataList = await this.getProjectGateway()
     this.gatewayList = dataList
     this.isLoading = false
   }
@@ -106,14 +103,14 @@ export default class Getway extends React.Component {
   }
 
   renderGatewayCard = () => {
-    return this.gatewayList.map((item, index) => {
+    return this.gatewayList.map((item, index, arr) => {
       const isCluster = index === 0
-      return item ? (
+      return (
         <GatewayCard
           key={index}
           type={isCluster ? 'cluster' : 'project'}
           detail={item}
-          actions={this.enableActions}
+          actions={this.enabledActions}
           {...this.props}
           store={this.store}
           getData={this.getInitGateway}
@@ -124,8 +121,9 @@ export default class Getway extends React.Component {
           }
           prefix={isCluster ? null : this.prefix}
           renderOperations={isCluster ? this.renderOperations : null}
+          gatewayList={toJS(arr)}
         />
-      ) : null
+      )
     })
   }
 

src/pages/projects/containers/Routes/Detail/ResourceStatus/index.jsx

@@ -46,22 +46,15 @@ class ResourceStatus extends React.Component {
     this.getInitGateway(detail)
   }
 
-  getHostGateway = detail => {
-    return this.gatewayStore.getGateway({ cluster: detail.cluster })
-  }
-
   getProjectGateway = detail => {
-    return this.gatewayStore.getGateway({
+    return this.gatewayStore.getGatewayByProject({
       namespace: detail.namespace,
       cluster: detail.cluster,
     })
   }
 
   getInitGateway = async detail => {
-    const dataList = await Promise.all([
-      this.getHostGateway(detail),
-      this.getProjectGateway(detail),
-    ])
+    const dataList = await this.getProjectGateway(detail)
     const gateway = dataList[1] || dataList[0]
     this.setState({ gateway })
   }

src/pages/projects/containers/Routes/index.jsx

@@ -52,10 +52,10 @@ export default class Routers extends React.Component {
 
   getGateway = async () => {
     const { cluster, namespace } = this.props.match.params
-    const [clusterGateway, projectGateway] = await Promise.all([
-      this.gatewayStore.getGateway({ cluster }),
-      this.gatewayStore.getGateway({ cluster, namespace }),
-    ])
+    const [
+      clusterGateway,
+      projectGateway,
+    ] = await this.gatewayStore.getGatewayByProject({ cluster, namespace })
     this.setState({ clusterGateway, projectGateway })
   }