refactor:调整配置灰度的客户端标签配置 (#260)

polarismesh · Jan 2, 2024 · e49a508 · e49a508
1 parent 361a6bf
commit e49a508
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 45 deletions.
diff --git a/web/src/polaris/administration/accessLimiting/operations/Create.tsx b/web/src/polaris/administration/accessLimiting/operations/Create.tsx
@@ -618,7 +618,23 @@ export default purify(function LimitRuleCreatePage(props: DuckCmpProps<LimitRule
                     {actionField.getValue() === LimitAction.UNIRATE && (
                       <FormField field={max_queue_delay_Field} label='最大排队时长'>
                         <InputAdornment after='秒'>
-                          <InputNumber field={max_queue_delay_Field} min={1} hideButton />
+                          <InputNumber field={max_queue_delay_Field} min={1} hideButton onInputChange={(val) => {
+                            const timeWindow = amountsField.getValue().map((item, index) => {
+                              let seconds = 1
+                              if (item.validDurationUnit === LimitAmountsValidationUnit.m) {
+                                seconds = 60
+                              }
+                              if (item.validDurationUnit === LimitAmountsValidationUnit.h) {
+                                seconds = 3600
+                              }
+                              return (item.validDurationNum * seconds) / item.maxAmount
+                            }).sort((a, b) => {
+                              return a - b
+                            }).pop()
+                            if (timeWindow < max_queue_delay_Field.getValue()) {
+                              max_queue_delay_Field.setError("排队时长非法, 必须大于等于最小请求间隔窗口(窗口时长/请求数阈值)")
+                            }
+                          }} />
                         </InputAdornment>
                       </FormField>
                     )}

diff --git a/web/src/polaris/common/components/TagTable.tsx b/web/src/polaris/common/components/TagTable.tsx
@@ -17,7 +17,7 @@ export function TagTable(props: ITagTableProps) {
         {
           key: 'tagName',
           header: '标签名',
-          width: '150px',
+          width: '250px',
           render: item => {
             const { key } = item.getFields(['key'])
             const validate = key.getTouched() && key.getError()
@@ -58,7 +58,7 @@ export function TagTable(props: ITagTableProps) {
         {
           key: 'close',
           header: '删除',
-          width: '80px',
+          width: '50px',
           render: (item, rowKey, recordIndex) => {
             const index = Number(recordIndex)
             // const length = [...props.tags.asArray()].length

diff --git a/web/src/polaris/configuration/fileGroup/detail/file/Page.tsx b/web/src/polaris/configuration/fileGroup/detail/file/Page.tsx
@@ -457,6 +457,7 @@ function getFileNameContext(fileName, status, file) {
     <div>
       <span className='configuration-tree-node-content'>{splitArray[splitArray.length - 1]}</span>
       {FileStatus.Edited === status && <Badge theme='warning'>待发布</Badge>}
+      {FileStatus.Betaing === status && <Badge theme='warning'>灰度发布中</Badge>}
       {file.isEncrypt && <Badge theme='warning'>已加密</Badge>}
     </div>
   )

diff --git a/web/src/polaris/configuration/fileGroup/detail/file/operation/BetaReleaseConfig.tsx b/web/src/polaris/configuration/fileGroup/detail/file/operation/BetaReleaseConfig.tsx
@@ -4,14 +4,16 @@ import Duck from './BetaReleaseConfigDuck'
 import FileDiff from '../FileDiff'
 import Dialog from '@src/polaris/common/duckComponents/Dialog'
 import FormField from '@src/polaris/common/duckComponents/form/Field'
-import { Form, FormItem, FormControl, FormText, Button, Stepper, Select, Table, Text } from 'tea-component'
+import { Icon, Form, FormItem, FormControl, FormText, Button, Stepper, Select, Table, Text } from 'tea-component'
 import Input from '@src/polaris/common/duckComponents/form/Input'
 import { scrollable, autotip } from 'tea-component/lib/table/addons'
 import {
   ClientLabelTypeOptions,
   ClientLabelType,
   ClientLabelMatchTypeOptions,
   ClientLabelMatchType,
+  ClientLabelTextMap,
+  ClientLabelMatchMap,
 } from '../../../types'
 import TagSelectOrInput, { checkNeedTagInput } from '@src/polaris/common/components/TagSelectOrInput'
 
@@ -24,7 +26,7 @@ const addTag = field => {
   field.setValue([...(field.getValue() || []), { key: '', value: '' }])
 }
 
-export default purify(function(props: DuckCmpProps<Duck>) {
+export default purify(function (props: DuckCmpProps<Duck>) {
   const { duck, store, dispatch } = props
   const { ducks, selector } = duck
   const formApi = ducks.form.getAPI(store, dispatch)
@@ -54,27 +56,40 @@ export default purify(function(props: DuckCmpProps<Duck>) {
           message={'标签键的长度不能超过128字符，标签值的长度不能超过4096个字符'}
         >
           <Table
+            verticalTop
             bordered
+            bottomTip={
+              <div>
+                <Icon type='plus' />
+                <Button
+                  className='form-item-space'
+                  type='link'
+                  onClick={() => clientLabels.asArray().push(getEmptyLabel())}
+                >
+                  添加
+                </Button>
+              </div>
+            }
             records={[...clientLabels.asArray()]}
             columns={[
               {
-                key: 'key',
-                header: '标签键',
+                key: 'type',
+                header: '类型',
                 width: 150,
                 render: field => {
-                  const key = field.getField('key')
+                  const key_type = field.getField('key_type')
                   return (
                     <FormControl
-                      status={key.getTouched() && key.getError() ? 'error' : null}
+                      status={key_type.getTouched() && key_type.getError() ? 'error' : null}
                       showStatusIcon={false}
                       style={{ display: 'inline' }}
-                      message={key.getTouched() && key.getError() ? key.getError() : null}
+                      message={key_type.getTouched() && key_type.getError() ? key_type.getError() : null}
                     >
                       <Select
                         options={ClientLabelTypeOptions}
-                        value={key.getValue()}
+                        value={key_type.getValue()}
                         onChange={value => {
-                          key.setValue(ClientLabelType[value])
+                          key_type.setValue(ClientLabelType[value])
                         }}
                         type={'simulate'}
                         appearance={'button'}
@@ -85,19 +100,36 @@ export default purify(function(props: DuckCmpProps<Duck>) {
                 },
               },
               {
-                key: 'type',
+                key: 'key',
+                header: '键',
+                render: field => {
+                  const key = field.getField('key')
+                  const keyType = field.getField('key_type')
+                  // 如果不是用户自定义标签，就不需要输入
+                  const disableInputKey = !(keyType.getValue() === ClientLabelType.CUSTOM)
+                  if (disableInputKey) {
+                    key.setValue(keyType.getValue())
+                  }
+                  return (
+                    <Input placeholder='请输入Value值' disabled={disableInputKey} field={key} onChange={value => key.setValue(value)}></Input>
+                  )
+                },
+              },
+              {
+                key: 'value_type',
                 header: '匹配方式',
-                width: 120,
+                width: 80,
                 render: field => {
-                  const { value } = field.getFields(['value'])
+                  const { type } = field.getFields(['type'])
+                  const { value_type } = field.getFields(['value_type'])
                   return (
                     <FormControl showStatusIcon={false} style={{ display: 'inline' }}>
                       <Select
                         options={ClientLabelMatchTypeOptions}
-                        value={value.getFields(['type']).type.getValue()}
+                        value={type.getValue()}
                         onChange={choseValue => {
-                          value.getFields(['type']).type.setValue(ClientLabelMatchType[choseValue])
-                          value.getFields(['value_type']).value_type.setValue('TEXT')
+                          type.setValue(ClientLabelMatchType[choseValue])
+                          value_type.setValue('TEXT')
                         }}
                         type={'simulate'}
                         appearance={'button'}
@@ -109,10 +141,10 @@ export default purify(function(props: DuckCmpProps<Duck>) {
               },
               {
                 key: 'value',
-                header: '标签值',
+                header: '值',
                 render: field => {
-                  const value = field.getField('value').getField('value')
-                  const type = field.getField('value').getField('type')
+                  const value = field.getField('value')
+                  const type = field.getField('type')
                   return (
                     <FormControl
                       status={value.getTouched() && value.getError() ? 'error' : null}
@@ -133,31 +165,23 @@ export default purify(function(props: DuckCmpProps<Duck>) {
                 },
               },
               {
-                key: 'action',
-                header: '操作',
+                key: 'close',
+                header: '',
                 width: 50,
-                render: (field, key, index) => {
+                render(item, rowKey, recordIndex) {
+                  const index = Number(recordIndex)
                   return (
                     <Button
-                      type={'icon'}
-                      icon={'close'}
-                      onClick={() => removeArrayFieldValue(clientLabels, index)}
-                    ></Button>
+                      type='icon'
+                      icon='close'
+                      onClick={() => {
+                        clientLabels.asArray().remove(index)
+                      }}
+                    />
                   )
                 },
               },
             ]}
-            addons={[
-              scrollable({
-                maxHeight: '300px',
-              }),
-              autotip({ emptyText: '无标签' }),
-            ]}
-            bottomTip={
-              <Button onClick={() => addTag(clientLabels)} type={'link'}>
-                {'添加标签'}
-              </Button>
-            }
           ></Table>
         </FormItem>
       </Form>
@@ -211,3 +235,11 @@ export default purify(function(props: DuckCmpProps<Duck>) {
     </Dialog>
   )
 })
+
+const getEmptyLabel = () => ({
+  type: "TEXT",
+  key_type: ClientLabelType.CUSTOM,
+  key: '',
+  value: '',
+  value_type: ClientLabelMatchType.EXACT,
+})
diff --git a/web/src/polaris/configuration/fileGroup/detail/file/operation/BetaReleaseConfigDuck.ts b/web/src/polaris/configuration/fileGroup/detail/file/operation/BetaReleaseConfigDuck.ts
@@ -3,7 +3,7 @@ import FormDuck from '@src/polaris/common/ducks/Form'
 import Base from '@src/polaris/common/ducks/DialogPure'
 import Create from './BetaReleaseConfig'
 import { showDialog } from '@src/polaris/common//helpers/showDialog'
-import { ClientLabel, ConfigFileRelease } from '../../../types'
+import { ClientLabel, ClientLabelView, ConfigFileRelease } from '../../../types'
 import { releaseConfigFile } from '../../../model'
 
 interface Data {
@@ -56,7 +56,7 @@ export interface Fvalues {
   namespace: string
   group: string
   name: string
-  clientLabels?: ClientLabel[]
+  clientLabels?: ClientLabelView[]
 }
 
 export class BetaCreateFormDuck extends FormDuck {
@@ -79,7 +79,16 @@ export class BetaCreateFormDuck extends FormDuck {
       fileName: name,
       name: releaseVersion,
       releaseDescription: comment,
-      betaLabels: clientLabels,
+      betaLabels: clientLabels.map(l => {
+        return {
+          key: l.key,
+          value: {
+            value: l.value,
+            type: l.type,
+            value_type: l.value_type
+          },
+        }
+      }),
       releaseType: 'gray',
     })
     return result

diff --git a/web/src/polaris/configuration/fileGroup/detail/version/Page.tsx b/web/src/polaris/configuration/fileGroup/detail/version/Page.tsx
@@ -25,6 +25,7 @@ import GridPagePagination from '@src/polaris/common/duckComponents/GridPagePagin
 import insertCSS from '@src/polaris/common/helpers/insertCSS'
 import { scrollable } from 'tea-component/lib/table/addons'
 import MonacoEditor from '@src/polaris/common/components/MocacoEditor'
+import { ClientLabel, ClientLabelTextMap, ClientLabelType, ClientLabelMatchMap } from '../../types'
 
 insertCSS(
   'service',
@@ -163,8 +164,8 @@ export default function ServicePage(props: DuckCmpProps<ConfigFileGroupDuck>) {
                           content={
                             currentSelected.tags.length > 3
                               ? currentSelected.tags?.map(item => (
-                                  <Text parent={'div'} key={item.key}>{`${item.key}:${item.value}`}</Text>
-                                ))
+                                <Text parent={'div'} key={item.key}>{`${item.key}:${item.value}`}</Text>
+                              ))
                               : null
                           }
                         >
@@ -181,6 +182,15 @@ export default function ServicePage(props: DuckCmpProps<ConfigFileGroupDuck>) {
                       </FormItem>
                     </Form>
                   )}
+                  {
+                    (currentSelected.releaseType === 'gray' ? <>
+                      <Form style={{ marginTop: '15px' }}>
+                        <FormItem label={'灰度标签'}>
+                          <FormText>{formatBetaLabels(currentSelected.betaLabels)}</FormText>
+                        </FormItem>
+                      </Form>
+                    </> : <></>)
+                  }
                   <section style={{ border: '1px solid #cfd5de', width: '100%', marginTop: '15px' }}>
                     <MonacoEditor
                       language={toHighlightLanguage(currentSelected?.format)}
@@ -198,3 +208,10 @@ export default function ServicePage(props: DuckCmpProps<ConfigFileGroupDuck>) {
     </>
   )
 }
+
+function formatBetaLabels(labels: ClientLabel[]) {
+  return labels.map(item => {
+    return `${item.key} ${ClientLabelMatchMap[item.value.type]} ${item.value.value}`
+  }).join(';')
+}
+
diff --git a/web/src/polaris/configuration/fileGroup/detail/version/getColumns.tsx b/web/src/polaris/configuration/fileGroup/detail/version/getColumns.tsx
@@ -32,6 +32,13 @@ export default ({
           ) : (
             <></>
           )}
+          {(!x.active && x.releaseType === 'gray') ? (
+            <Badge theme='default' style={{ verticalAlign: 'bottom', marginLeft: '5px' }}>
+              {'灰度版本'}
+            </Badge>
+          ) : (
+            <></>
+          )}
         </Text>
       ),
     },

diff --git a/web/src/polaris/configuration/fileGroup/types.ts b/web/src/polaris/configuration/fileGroup/types.ts
@@ -54,6 +54,7 @@ export interface ConfigFileRelease {
   active: string
   releaseType?: string
   format: string
+  betaLabels: ClientLabel[]
 }
 export interface ConfigFileReleaseHistory {
   id: string
@@ -90,11 +91,20 @@ export interface ClientLabel {
   }
 }
 
+export interface ClientLabelView {
+  key_type: string
+  key: string
+  type: string
+  value: string
+  value_type: string
+}
+
 // 匹配规则类型
 export enum ClientLabelType {
   CLIENT_ID = 'CLIENT_ID',
   // CLIENT_LANGUAGE = 'CLIENT_LANGUAGE',
   CLIENT_IP = 'CLIENT_IP',
+  CUSTOM = 'CUSTOM',
 }
 
 export const ClientLabelTypeOptions = [
@@ -110,6 +120,10 @@ export const ClientLabelTypeOptions = [
   //   value: ClientLabelType.CLIENT_LANGUAGE,
   //   text: '请求头(HEADER)',
   // },
+  {
+    value: ClientLabelType.CUSTOM,
+    text: '自定义',
+  },
 ]
 export const ClientLabelTextMap = ClientLabelTypeOptions.reduce((map, curr) => {
   map[curr.value] = curr.text
@@ -146,7 +160,7 @@ export const ClientLabelMatchTypeOptions = [
     text: '不包含',
   },
 ]
-export const RouteLabelTextMap = ClientLabelMatchTypeOptions.reduce((map, curr) => {
+export const ClientLabelMatchMap = ClientLabelMatchTypeOptions.reduce((map, curr) => {
   map[curr.value] = curr.text
   return map
 }, {})
diff --git a/web/src/polaris/service/detail/interface/getColumns.tsx b/web/src/polaris/service/detail/interface/getColumns.tsx
@@ -32,6 +32,11 @@ export default ({
       header: '协议',
       render: x => <Text>{x.protocol}</Text>,
     },
+    {
+      key: 'source',
+      header: '来源',
+      render: x => <Text>{x.source}</Text>,
+    },
     {
       key: 'action',
       header: '操作',