Merge pull request #15 from fuchunlan/fix-bug-1

fix: Fix gatekeeper bug
kubesphere-extensions · Mar 30, 2024 · 4972407 · 4972407
2 parents 3abe422 + a041a4c
commit 4972407
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 61 deletions.
diff --git a/charts/gatekeeper/charts/extension/dist/index.js b/charts/gatekeeper/charts/extension/dist/index.js
diff --git a/modules/web/extensions/gatekeeper/dist/index.js b/modules/web/extensions/gatekeeper/dist/index.js
diff --git a/...es/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/KindItem/index.jsx b/...es/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/KindItem/index.jsx
@@ -6,8 +6,8 @@ import { isEmpty } from 'lodash'
 
 const KindItem = props => {
   const { onChange, value } = props
-  const [apiGroups, setApiGroups] = useState([])
-  const [kinds, setKinds] = useState([])//Pod
+  const [apiGroups, setApiGroups] = useState(value.apiGroups || [])
+  const [kinds, setKinds] = useState(value.kinds || [])//Pod
 
   useEffect(() => {
     if(!isEmpty(kinds)||!isEmpty(apiGroups)){

diff --git a/modules/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/index.jsx b/modules/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Form, FormItem, Input, Select } from '@kubed/components'
-import { get, isEmpty, merge, set } from 'lodash'
+import { FormItem, Input, Select } from '@kubed/components'
+import { get, isEmpty } from 'lodash'
 import {
   Pattern,
   PropertiesInput,
@@ -61,7 +61,7 @@ const CreateConstraintForm = ({
   const handleChange = () => {
     const formData = form.getFieldsValue()
 
-    onChange(merge(initialValues, formData))
+    onChange(formData)
   }
 
   const checkItemValid = item => {
@@ -131,7 +131,7 @@ const CreateConstraintForm = ({
       </FormItem>
 
       <FormItem
-        name={['spec', 'enforcementActions']}
+        name={['spec', 'enforcementAction']}
         label={t('ENFORCEMENT_ACTIONS_PLACEHOLDER')}
         rules={[
           { required: true, message: t('ENFORCEMENT_ACTIONS_PLACEHOLDER') },
@@ -164,18 +164,17 @@ const CreateConstraintForm = ({
       </NamespaceSelectorWrapper>
 
       <NamespaceSelectorWrapper>
-        <FormItemWrapper
-          name={['spec', 'namespaceSelector', 'matchLabels']}
+        <FormItem
+          name={['spec', 'match','namespaceSelector', 'matchLabels']}
           label={t('NAMESPACE_LABELS')}
           validateStatus={error ? 'error' : undefined}
-          className="xxx"
           help={error ? <FormItemError>{error}</FormItemError> : undefined}
         >
           <PropertiesInput
             addText={t('ADD')}
             onError={e => setError(e && e.message ? e.message : '')}
           />
-        </FormItemWrapper>
+        </FormItem>
       </NamespaceSelectorWrapper>
 
       <FormItem

diff --git a/modules/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/styles.js b/modules/web/extensions/gatekeeper/src/components/Forms/CreateConstraintForm/styles.js
@@ -1,4 +1,4 @@
-import { Form, FormItem } from '@kubed/components';
+import { Form } from '@kubed/components';
 import styled from 'styled-components';
 
 export const FormWrapper = styled(Form)`
@@ -27,22 +27,13 @@ export const FormItemError = styled.div`
   color: #ca2621;
 `;
 
-export const FormItemWrapper = styled(FormItem)`
-  background:red;
-  :global{
-    .xxx{
-      background:red;
-    }
-  }
-`
-
 export const NamespaceSelectorWrapper = styled.div`
   .form-item{
     padding:12px;
     border-radius: 4px;
     background-color: #f9fbfd;
     &>div{
-      &>div:first-child{
+      &>div:not(:last-child){
         background:#eff4f9;
       }
     }

diff --git a/...ensions/gatekeeper/src/components/Forms/CreateConstraintTemplateForm/TargetItem/index.jsx b/...ensions/gatekeeper/src/components/Forms/CreateConstraintTemplateForm/TargetItem/index.jsx
@@ -35,6 +35,7 @@ const TargetItem =(props)=>{
         name='rego' 
         hasUpload={false}
         hasDownload={false}
+        value={value.rego}
         onChange={handleChangeRego}
       />
 

diff --git a/...les/web/extensions/gatekeeper/src/components/Forms/CreateConstraintTemplateForm/index.jsx b/...les/web/extensions/gatekeeper/src/components/Forms/CreateConstraintTemplateForm/index.jsx
@@ -26,7 +26,7 @@ const CreateConstraintTemplateForm = ({
     const name = get(formData, `spec.crd.spec.names.kind`)?.toLowerCase();
     set(formData, 'metadata.name', name);
 
-    onChange(merge(initialValues, formData));
+    onChange(merge({},initialValues, formData));
   };
 
   const checkItemValid = item => {

diff --git a/modules/web/extensions/gatekeeper/src/components/Modal/CreateConstraintModal/index.jsx b/modules/web/extensions/gatekeeper/src/components/Modal/CreateConstraintModal/index.jsx
@@ -5,6 +5,7 @@ import { CodeEditor } from '@kubed/code-editor'
 import CreateConstraintForm from '../../Forms/CreateConstraintForm'
 import { SwitchStyle } from './styles'
 import { yaml } from '@ks-console/shared'
+import { cloneDeep } from 'lodash'
 
 const CreateConstraintModal = ({
   form,
@@ -16,15 +17,9 @@ const CreateConstraintModal = ({
   cluster,
 }) => {
   const [isCodeMode, setIsCodeMode] = useState(false)
-  const [formData, setFormData] = useState(initialValues)
+  const [formData, setFormData] = useState(cloneDeep(initialValues))
   const [yamlData, setYamlData] = useState('')
 
-  useEffect(() => {
-    if (store) {
-      setYamlData(store.yamlRawData)
-    }
-  }, [])
-
   const handleSubmit = () => {
     form
       .validateFields()
@@ -34,11 +29,20 @@ const CreateConstraintModal = ({
       .catch(() => {})
   }
 
+  const handleChangeEditType=value=>{
+    setIsCodeMode(value)
+    if(value){
+      setYamlData(yaml.getValue(formData))
+    }else{
+      setFormData(yaml.load(yamlData))
+    }
+  }
+
   const renderSwitch = () => {
     return (
       <SwitchStyle>
         <Switch
-          onChange={value => setIsCodeMode(value)}
+          onChange={handleChangeEditType}
           label={t('EDIT_YAML')}
           variant="button"
         />
@@ -70,7 +74,7 @@ const CreateConstraintModal = ({
       ) : (
         <CreateConstraintForm
           form={form}
-          initialValues={initialValues}
+          initialValues={formData}
           onChange={handleChange}
           store={store}
           cluster={cluster}

diff --git a/...es/web/extensions/gatekeeper/src/components/Modal/CreateConstraintTemplateModal/index.jsx b/...es/web/extensions/gatekeeper/src/components/Modal/CreateConstraintTemplateModal/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Modal, Switch } from '@kubed/components';
 import { Group } from '@kubed/icons';
 import CreateConstraintTemplateForm from '../../Forms/CreateConstraintTemplateForm';
@@ -19,22 +19,27 @@ const CreateConstraintTemplateModal = ({
   const [formData, setFormData] = useState(initialValues);
   const [yamlData,setYamlData] = useState({})
 
-  useEffect(()=>{
-    if(store){
-      setYamlData(store.yamlRawData)
-    }
-  },[])
 
   const handleSubmit = () => {
     form.validateFields().then(() => {
       onOk?.(isCodeMode?yaml.load(yamlData):formData);
     }).catch(()=>{})
   };
 
+  const handleChangeEditType=value =>{
+    setIsCodeMode(value)
+    if(value){
+      setYamlData(yaml.getValue(formData))
+    }else{
+      setFormData(yaml.load(yamlData))
+    }
+
+  }
+
   const renderSwitch = () => {
     return (
       <SwitchStyle>
-        <Switch onChange={value => setIsCodeMode(value)} label={t('EDIT_YAML')} variant="button" />
+        <Switch onChange={handleChangeEditType} label={t('EDIT_YAML')} variant="button" />
       </SwitchStyle>
     );
   };
@@ -63,7 +68,7 @@ const CreateConstraintTemplateModal = ({
       ) : (
         <CreateConstraintTemplateForm
           form={form}
-          initialValues={initialValues}
+          initialValues={formData}
           onChange={handleChange}
         />
       )}

diff --git a/modules/web/extensions/gatekeeper/src/containers/List/constraints.jsx b/modules/web/extensions/gatekeeper/src/containers/List/constraints.jsx
@@ -19,6 +19,10 @@ const ConstraintList = () => {
 
   const url = getResourceUrl(params,true);
 
+  const callback = () => {
+    constraintRef?.current?.refetch();
+  };
+
   const { editYaml, del } = useCommonActions({
     store: constraintStore,
     params: { cluster },
@@ -62,7 +66,7 @@ const ConstraintList = () => {
       title: t('Name'),
       field: 'name',
       sortable: false,
-      searchable: false,
+      searchable: true,
       render: (value, row) => (
         <Field
           value={value}
@@ -123,10 +127,6 @@ const ConstraintList = () => {
     ],
   });
 
-  const callback = () => {
-    constraintRef?.current?.refetch();
-  };
-
   const handleCreate = data => {
     constraintStore
       .post({ kind: data.kind.toLowerCase(), cluster }, data)

diff --git a/modules/web/extensions/gatekeeper/src/containers/List/constrainttemplates.jsx b/modules/web/extensions/gatekeeper/src/containers/List/constrainttemplates.jsx
@@ -66,9 +66,9 @@ const ConstraintTemplateList = () => {
   const columns = [
     {
       title: t('Name'),
-      field: 'metadata.name',
+      field: 'name',
       sortable: false,
-      searchable: false,
+      searchable: true,
       render: (value, row) => (
         <Field
           value={value}
@@ -155,7 +155,7 @@ const ConstraintTemplateList = () => {
         format={formatFn}
         serverDataFormat={formatServerData}
         placeholder={t('SEARCH_BY_NAME')}
-        url={getResourceUrl(params)}
+        url={getResourceUrl(params,true)}
         useStorageState={false}
         disableRowSelect={false}
         selectType={false}

diff --git a/modules/web/extensions/gatekeeper/src/index.js b/modules/web/extensions/gatekeeper/src/index.js
@@ -7,7 +7,7 @@ const menus = [{
   title: 'Gatekeeper',
   icon: 'key',
   assets:'https://open-policy-agent.github.io/gatekeeper/website/img/logo.svg',
-  order: 99,
+  order: 8,
 },{
   parent: 'cluster.gatekeeper',
   name: 'gatekeeper.constrainttemplates',

diff --git a/modules/web/extensions/gatekeeper/src/locales/en/base.json b/modules/web/extensions/gatekeeper/src/locales/en/base.json
@@ -34,7 +34,7 @@
   "CONSTRAINT_PARAMETERS": "Parameters",
   "CONSTRAINT_PARAMETERS_EMPTY": "Please enter Parameters",
   "NAMESPACE_LABELS": "Namespace Selector",
-  "ENFORCEMENT_ACTIONS": "enforcementActions",
+  "ENFORCEMENT_ACTIONS": "enforcementAction",
   "ENFORCEMENT_ACTIONS_PLACEHOLDER": "Please select the enforcement actions",
   "CONSTRAINT_KINDS_PLACEHOLDER": "Please enter the kinds",
   "INVALID_CONSTRAINT_KINDS": "Please enter the correct kinds"

diff --git a/modules/web/extensions/gatekeeper/src/locales/zh/base.json b/modules/web/extensions/gatekeeper/src/locales/zh/base.json
@@ -34,8 +34,8 @@
   "CONSTRAINT_PARAMETERS": "Parameters",
   "CONSTRAINT_PARAMETERS_EMPTY": "请输入 Parameters",
   "NAMESPACE_LABELS": "命名空间标签",
-  "ENFORCEMENT_ACTIONS": "enforcementActions",
-  "ENFORCEMENT_ACTIONS_PLACEHOLDER": "请选择 enforcementActions",
+  "ENFORCEMENT_ACTIONS": "enforcementAction",
+  "ENFORCEMENT_ACTIONS_PLACEHOLDER": "请选择 enforcementAction",
   "CONSTRAINT_KINDS_PLACEHOLDER": "请填写 Kinds",
   "INVALID_CONSTRAINT_KINDS": "请输入正确的 Kinds",
 

diff --git a/modules/web/extensions/gatekeeper/src/store/constrainttemplate.js b/modules/web/extensions/gatekeeper/src/store/constrainttemplate.js
diff --git a/modules/web/extensions/gatekeeper/src/utils/form.templates.js b/modules/web/extensions/gatekeeper/src/utils/form.templates.js
@@ -1,13 +1,20 @@
 const getConstraintTemplatesTemplate = () => ({
   apiVersion: 'templates.gatekeeper.sh/v1',
   kind: 'ConstraintTemplate',
-  metadata: {},
+  metadata: {
+    name:''
+  },
   spec: {
     crd: {
       spec: {
-        names: {},
+        names: {
+          kind:null,
+        },
         validations: {
-          openAPIV3Schema: {},
+          openAPIV3Schema: {
+            type:'object',
+            properties:{}
+          },
         },
       },
     },
@@ -23,16 +30,25 @@ const getConstraintTemplatesTemplate = () => ({
 const getConstraintTemplate = ()=>({
   apiVersion: 'constraints.gatekeeper.sh/v1beta1', 
   kind: '', 
-  metadata: {},
+  metadata: {
+    name:'',
+  },
   spec: {
-    enforcementActions:'deny',
+    enforcementAction:'deny',
     match:{
       kinds:[
         {
           apiGroups:[],
-          kinds:[]
+          kinds:[],
         }
-      ]
+      ],
+      namespaces:[{name:""}],
+      namespaceSelector:{
+        matchExpressions:[
+          {key:'',operator:''}
+        ],
+        matchLabels:{},
+      }
     },
     parameters:{}
   },