fix: Fix workspace api

kubesphere · Jun 17, 2020 · 5232a4b · 5232a4b
1 parent bb656c7
commit 5232a4b
Show file tree

Hide file tree

Showing 16 changed files with 116 additions and 74 deletions.
diff --git a/src/actions/workspace.js b/src/actions/workspace.js
@@ -16,6 +16,7 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { get, set } from 'lodash'
 import { Modal, Notify } from 'components/Base'
 import CreateModal from 'workspaces/components/Modals/WorkspaceCreate'
 
@@ -29,6 +30,10 @@ export default {
             return
           }
 
+          const isolation =
+            get(data, 'spec.template.spec.networkIsolation') === 'true'
+          set(data, 'spec.template.spec.networkIsolation', isolation)
+
           store.create(data).then(() => {
             Modal.close(modal)
             Notify.success({ content: `${t('Created Successfully')}!` })

diff --git a/src/components/Base/CodeEditor/index.jsx b/src/components/Base/CodeEditor/index.jsx
@@ -53,19 +53,6 @@ class CodeEditor extends PureComponent {
     }
   }
 
-  static getDerivedStateFromProps(props, state) {
-    const { value } = props
-
-    if (value !== state.originValue) {
-      return {
-        value: getValue(value),
-        originValue: value,
-      }
-    }
-
-    return null
-  }
-
   handleChange = value => {
     const { onChange } = this.props
     onChange(value)

diff --git a/src/components/Base/Form/Item.jsx b/src/components/Base/Form/Item.jsx
@@ -98,6 +98,10 @@ export default class FormItem extends React.Component {
       resetValidateResults && resetValidateResults(name)
     }
 
+    if (this.props.unControl) {
+      return
+    }
+
     this.forceUpdate()
 
     if (this.schema && !this.state.componentError) {

diff --git a/src/components/Forms/Workload/ContainerSettings/ContainerForm/ProbeForm/index.jsx b/src/components/Forms/Workload/ContainerSettings/ContainerForm/ProbeForm/index.jsx
@@ -20,7 +20,6 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { get } from 'lodash'
 
 import {
   Columns,
@@ -55,7 +54,7 @@ export default class ProbeForm extends React.Component {
     super(props)
 
     this.state = {
-      formData: get(props.data, {}),
+      formData: props.data || {},
       checkerType: this.checkerType,
     }
 

diff --git a/src/components/Inputs/index.js b/src/components/Inputs/index.js
@@ -41,3 +41,4 @@ export { default as RulePath } from './RulePath'
 export { default as UrlInput } from './UrlInput'
 export { default as SchemeInput } from './SchemeInput'
 export { default as ProjectSelect } from './ProjectSelect'
+export { default as StringInput } from './StringInput'
diff --git a/src/pages/clusters/containers/Clusters/AddCluster/Configuration/index.jsx b/src/pages/clusters/containers/Clusters/AddCluster/Configuration/index.jsx
@@ -95,6 +95,7 @@ export default class BaseInfo extends React.Component {
               </div>
               <Form.Item
                 rules={[{ required: true, message: t('INPUT_KUBECONFIG') }]}
+                unControl
               >
                 <CodeEditor
                   mode="yaml"

diff --git a/src/pages/projects/components/Selector/index.scss b/src/pages/projects/components/Selector/index.scss
@@ -29,6 +29,7 @@
 
     p {
       color: #d8dee5;
+      @include ellipsis;
     }
   }
 

diff --git a/src/pages/workspaces/components/Modals/WorkspaceCreate/BaseInfo/index.jsx b/src/pages/workspaces/components/Modals/WorkspaceCreate/BaseInfo/index.jsx
@@ -44,8 +44,8 @@ export default class BaseInfo extends React.Component {
 
   get networkOptions() {
     return [
-      { label: t('Off'), value: '' },
-      { label: t('On'), value: 'enabled' },
+      { label: t('Off'), value: 'false' },
+      { label: t('On'), value: 'true' },
     ]
   }
 
@@ -141,7 +141,7 @@ export default class BaseInfo extends React.Component {
           </Form.Item>
           <Form.Item label={t('Workspace Manager')}>
             <Select
-              name="spec.manager"
+              name="spec.template.spec.manager"
               searchable
               options={this.getUsers()}
               defaultValue={globals.user.username}
@@ -163,9 +163,9 @@ export default class BaseInfo extends React.Component {
             desc={t('NETWORK_ISOLATED_DESC')}
           >
             <Select
-              name="metadata.annotations['kubesphere.io/network-isolate']"
+              name="spec.template.spec.networkIsolation"
               options={this.networkOptions}
-              defaultValue=""
+              defaultValue="true"
             />
           </Form.Item>
           <Form.Item

diff --git a/...ages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/ClusterSelect/index.jsx b/...ages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/ClusterSelect/index.jsx
@@ -49,11 +49,14 @@ export default class ClusterSettings extends Component {
       })
     }
 
-    this.props.onChange(
-      this.clusterStore.list.data
-        .filter(item => item.visibility === 'public')
-        .map(item => item.name)
-    )
+    const { value, onChange } = this.props
+    if (isEmpty(value)) {
+      onChange(
+        this.clusterStore.list.data
+          .filter(item => item.visibility === 'public')
+          .map(item => ({ name: item.name }))
+      )
+    }
   }
 
   handleClick = e => {
@@ -63,9 +66,9 @@ export default class ClusterSettings extends Component {
     const name = e.currentTarget.dataset.cluster
 
     if (value.includes(name)) {
-      newValue = value.filter(item => item !== name)
+      newValue = value.filter(item => item.name !== name)
     } else {
-      newValue = [...value, name]
+      newValue = [...value, { name }]
     }
     onChange(newValue)
   }
@@ -90,7 +93,7 @@ export default class ClusterSettings extends Component {
             onClick={globals.app.isMultiCluster ? this.handleClick : null}
           >
             <Checkbox
-              checked={value.includes(cluster.name)}
+              checked={value.some(item => item.name === cluster.name)}
               disabled={!globals.app.isMultiCluster}
             />
             <ClusterTitle

diff --git a/src/pages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/index.jsx b/src/pages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/index.jsx
@@ -35,7 +35,7 @@ export default class BaseInfo extends React.Component {
         </div>
         <Form data={formTemplate} ref={formRef}>
           <Form.Item label={t('Available Clusters')}>
-            <ClusterSelect name="spec.clusters" />
+            <ClusterSelect name="spec.placement.clusters" />
           </Form.Item>
         </Form>
       </div>

diff --git a/src/pages/workspaces/components/Selector/index.scss b/src/pages/workspaces/components/Selector/index.scss
@@ -29,6 +29,7 @@
 
     p {
       color: #d8dee5;
+      @include ellipsis;
     }
   }
 }
diff --git a/src/pages/workspaces/containers/BaseInfo/index.jsx b/src/pages/workspaces/containers/BaseInfo/index.jsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react'
-import { get, keyBy, isEmpty } from 'lodash'
+import { get, isEmpty } from 'lodash'
 import { toJS } from 'mobx'
 import { observer, inject } from 'mobx-react'
 import { Checkbox } from '@pitrix/lego-ui'
@@ -29,7 +29,6 @@ import ClusterTitle from 'components/Clusters/ClusterTitle'
 import { getLocalTime } from 'utils'
 import { trigger } from 'utils/action'
 
-import WorkspaceStore from 'stores/workspace'
 import WorkspaceMonitorStore from 'stores/monitoring/workspace'
 
 import styles from './index.scss'
@@ -40,28 +39,12 @@ import styles from './index.scss'
 class BaseInfo extends React.Component {
   monitorStore = new WorkspaceMonitorStore()
 
-  workspaceStore = new WorkspaceStore()
-
   state = {
     confirm: false,
-    workspaces: {},
   }
 
   componentDidMount() {
     this.fetchMetrics()
-
-    if (globals.app.isMultiCluster) {
-      Promise.all(
-        this.store.detail.clusters.map(cluster =>
-          this.workspaceStore.fetchDetail({
-            cluster,
-            workspace: this.workspace,
-          })
-        )
-      ).then(workspaces => {
-        this.setState({ workspaces: keyBy(workspaces, 'cluster') })
-      })
-    }
   }
 
   get store() {
@@ -120,20 +103,45 @@ class BaseInfo extends React.Component {
 
   showEdit = () => {
     this.trigger('resource.baseinfo.edit', {
-      detail: this.store.detail,
+      detail: toJS(this.store.detail),
       modal: EditBasicInfoModal,
       success: this.fetchDetail,
     })
   }
 
-  handleNetworkChange = workspace => () => {
-    const annotations = {
-      ...workspace.annotations,
-      'kubesphere.io/network-isolate': workspace.networkIsolation
-        ? 'disabled'
-        : 'enabled',
+  handleNetworkChange = cluster => () => {
+    const detail = toJS(this.store.detail)
+    const { overrides } = detail
+    let override = overrides.find(od => od.clusterName === cluster)
+    if (!override) {
+      override = {
+        clusterName: cluster,
+        clusterOverrides: [],
+      }
+      overrides.push(override)
     }
-    this.store.patch(workspace, { metadata: { annotations } })
+
+    let cod = override.clusterOverrides.find(
+      item => item.path === '/spec/networkIsolation'
+    )
+    if (!cod) {
+      cod = {
+        path: '/spec/networkIsolation',
+      }
+      override.clusterOverrides.push(cod)
+    }
+
+    cod.value = !get(
+      detail,
+      `clusterTemplates[${cluster}].spec.networkIsolation`
+    )
+
+    this.store
+      .patch(detail, {
+        metadata: { name: detail.name },
+        spec: { overrides },
+      })
+      .then(() => this.fetchDetail())
   }
 
   handleDeleteCheckboxChange = (e, checked) => {
@@ -176,9 +184,11 @@ class BaseInfo extends React.Component {
       <Panel title={t('Workspace Info')}>
         <div className={styles.header}>
           <Text
+            className={styles.title}
             icon="enterprise"
             title={detail.name}
-            description={t('Workspace')}
+            description={detail.description || t('Workspace')}
+            ellipsis
           />
           <Text title={detail.manager} description={t('Manager')} />
           <Text
@@ -232,8 +242,8 @@ class BaseInfo extends React.Component {
   }
 
   renderNetwork() {
+    const workspace = this.store.detail
     if (!globals.app.isMultiCluster) {
-      const workspace = this.workspaceStore.detail
       const networkIsolation = workspace.networkIsolation || false
       return (
         <Panel className={styles.network} title={t('Network Policy')}>
@@ -258,16 +268,19 @@ class BaseInfo extends React.Component {
 
     const { data, isLoading } = toJS(this.store.clusters)
 
-    const { workspaces } = this.state
-
     return (
       <Panel className={styles.network} title={t('Network Policy')}>
         {isEmpty(data) && !isLoading && (
           <div className={styles.empty}>{t('No Available Cluster')}</div>
         )}
         {data.map(cluster => {
-          const workspace = workspaces[cluster.name] || {}
-          const networkIsolation = workspace.networkIsolation || false
+          const clusterTemp =
+            get(workspace, `clusterTemplates[${cluster.name}]`) || {}
+          const networkIsolation =
+            get(clusterTemp, 'spec.networkIsolation') ||
+            workspace.networkIsolation ||
+            false
+
           return (
             <div className={styles.item} key={cluster.name}>
               <ClusterTitle cluster={cluster} className={styles.clusterTitle} />
@@ -279,7 +292,7 @@ class BaseInfo extends React.Component {
               <Switch
                 className={styles.switch}
                 text={t(networkIsolation ? 'On' : 'Off')}
-                onChange={this.handleNetworkChange(workspace)}
+                onChange={this.handleNetworkChange(cluster.name)}
                 checked={networkIsolation}
               />
             </div>

diff --git a/src/pages/workspaces/containers/BaseInfo/index.scss b/src/pages/workspaces/containers/BaseInfo/index.scss
@@ -77,4 +77,8 @@
   background-color: $card-bg-color;
   border-radius: $border-radius;
   @include TypographyTitleH5($dark-color01);
+}
+
+.title {
+  max-width: 30%;
 }
diff --git a/src/stores/node.js b/src/stores/node.js
@@ -40,7 +40,7 @@ export default class NodeStore extends Base {
   @action
   async fetchCount(params) {
     const resp = await request.get(this.getResourceUrl(params), {
-      role: 'master',
+      labelSelector: 'node-role.kubernetes.io/master=',
     })
 
     const masterWorker = resp.items.filter(

diff --git a/src/stores/role.js b/src/stores/role.js
@@ -88,7 +88,10 @@ export default class RoleStore extends Base {
         namespace,
         devops,
       }),
-      { ...params, label: 'iam.kubesphere.io/role-template!=true' }
+      {
+        ...params,
+        annotation: 'kubesphere.io/creator',
+      }
     )
 
     const data = result.items.map(item => ({
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ @@
         p {
           color: #d8dee5;
+          @include ellipsis;
         }
       }
@@ Expand Down @@