From b44cd4d75feb554613c472c4fcee0659898d81fa Mon Sep 17 00:00:00 2001 From: barnettZQG Date: Wed, 8 Dec 2021 17:18:12 +0800 Subject: [PATCH 1/2] Feat: support list and create project Signed-off-by: barnettZQG --- src/api/devLink.ts | 2 +- src/api/namespace.ts | 21 --- src/api/productionLink.ts | 4 +- src/api/project.ts | 16 ++ src/api/{deliveryTarget.ts => target.ts} | 10 +- src/common.less | 8 + src/components/EnvPlan/index.tsx | 2 + src/interface/application.ts | 3 +- src/interface/deliveryTarget.ts | 4 +- src/interface/project.ts | 4 +- .../components/AddEnvBind/index.tsx | 6 +- src/layout/Content/index.tsx | 18 +-- src/layout/LeftMenu/menu.js | 2 +- src/model/application.js | 9 +- src/model/deliveryTarget.ts | 10 +- .../components/EditProperties/index.tsx | 2 +- src/pages/ApplicationConfig/index.tsx | 7 +- src/pages/ApplicationInstanceList/index.tsx | 6 +- .../components/AddAppDialog/index.tsx | 21 +-- .../components/GeneralConfig/index.tsx | 14 +- .../GeneralConfig/namespace-form.tsx | 115 -------------- .../components/GeneralConfig/project-form.tsx | 148 ++++++++++++++++++ .../components/SelectSearch/index.tsx | 24 +-- .../components/YmalConfig/index.tsx | 4 +- src/pages/ApplicationList/index.tsx | 1 + .../components/List/index.tsx | 14 +- .../components/TargetDialog/index.tsx | 44 +++--- src/pages/DeliveryTargetList/index.tsx | 1 + src/utils/common.ts | 2 +- 29 files changed, 292 insertions(+), 230 deletions(-) delete mode 100644 src/api/namespace.ts create mode 100644 src/api/project.ts rename src/api/{deliveryTarget.ts => target.ts} (68%) delete mode 100644 src/pages/ApplicationList/components/GeneralConfig/namespace-form.tsx create mode 100644 src/pages/ApplicationList/components/GeneralConfig/project-form.tsx diff --git a/src/api/devLink.ts b/src/api/devLink.ts index 2e7b63c1a..81791e56e 100644 --- a/src/api/devLink.ts +++ b/src/api/devLink.ts @@ -2,7 +2,7 @@ export const application_mock = '/mock/application.json'; export const addons_mock = '/mock/addonsList.json'; export const cluster_mock = '/mock/cluster.json'; export const workflows_mock = '/mock/workflows.json'; -export const namespace_mock = '/mock/namespacelist.json'; +export const project_mock = '/mock/projectlist.json'; export const addonsDetails_mock = '/mock/addonsDetails.json'; export const disabletAddonsCluster_mock = '/mock/disabletAddonsCluster.json'; diff --git a/src/api/namespace.ts b/src/api/namespace.ts deleted file mode 100644 index 1c8259a18..000000000 --- a/src/api/namespace.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { post, get } from './request'; -import { namespace_mock } from './devLink'; -import { namespace } from './productionLink'; -import { getDomain } from '../utils/common'; - -const baseURLOject = getDomain(); -const isMock = baseURLOject.MOCK; -const url = isMock ? namespace_mock : namespace; - -export function getNamespaceList(params: any) { - return get(url, params).then((res) => res); -} - -export function createNamespace(params: any) { - return post(url, params).then((res) => res); -} - -export function getOneNamespace(params: any) { - const gurl = `${namespace}/${params.namespace}`; - return get(gurl, params).then((res) => res); -} diff --git a/src/api/productionLink.ts b/src/api/productionLink.ts index 582dc810c..c1beea6a6 100644 --- a/src/api/productionLink.ts +++ b/src/api/productionLink.ts @@ -4,5 +4,5 @@ export const addons = `/api/v1/addons`; export const addonRegistrys = `/api/v1/addon_registries`; export const cluster = '/api/v1/clusters'; export const workflows = '/api/v1/applications'; -export const namespace = `/api/v1/namespaces`; -export const deliveryTarget = `/api/v1/deliveryTargets`; +export const project = `/api/v1/projects`; +export const target = `/api/v1/targets`; diff --git a/src/api/project.ts b/src/api/project.ts new file mode 100644 index 000000000..ed8998489 --- /dev/null +++ b/src/api/project.ts @@ -0,0 +1,16 @@ +import { post, get } from './request'; +import { project_mock } from './devLink'; +import { project } from './productionLink'; +import { getDomain } from '../utils/common'; + +const baseURLOject = getDomain(); +const isMock = baseURLOject.MOCK; +const url = isMock ? project_mock : project; + +export function getProjectList(params: any) { + return get(url, params).then((res) => res); +} + +export function createProject(params: any) { + return post(url, params).then((res) => res); +} diff --git a/src/api/deliveryTarget.ts b/src/api/target.ts similarity index 68% rename from src/api/deliveryTarget.ts rename to src/api/target.ts index ddc894978..d688ef605 100644 --- a/src/api/deliveryTarget.ts +++ b/src/api/target.ts @@ -1,6 +1,6 @@ import { post, get, rdelete, put } from './request'; import { getDeliveryTarget_mock } from './devLink'; -import { deliveryTarget } from './productionLink'; +import { target } from './productionLink'; import { getDomain } from '../utils/common'; import type { DeliveryTarget } from '../interface/deliveryTarget'; import type { QueryDeliveryTarget } from '../model/deliveryTarget'; @@ -9,21 +9,21 @@ const baseURLOject = getDomain(); const isMock = baseURLOject.MOCK; export function getDeliveryTarget(params: QueryDeliveryTarget) { - const url = isMock ? getDeliveryTarget_mock : deliveryTarget; + const url = isMock ? getDeliveryTarget_mock : target; return get(url, { params: params }).then((res) => res); } export function createDeliveryTarget(params: DeliveryTarget) { - const url = isMock ? getDeliveryTarget_mock : deliveryTarget; + const url = isMock ? getDeliveryTarget_mock : target; return post(url, params); } export function deleteDeliveryTarget(params: { name: string }) { - const url = isMock ? getDeliveryTarget_mock : `${deliveryTarget}/${params.name}`; + const url = isMock ? getDeliveryTarget_mock : `${target}/${params.name}`; return rdelete(url, params); } export function updateDeliveryTarget(params: DeliveryTarget) { - const url = isMock ? getDeliveryTarget_mock : `${deliveryTarget}/${params.name}`; + const url = isMock ? getDeliveryTarget_mock : `${target}/${params.name}`; return put(url, params); } diff --git a/src/common.less b/src/common.less index 84d4a0eb1..e9bb54115 100644 --- a/src/common.less +++ b/src/common.less @@ -431,3 +431,11 @@ a { .monaco-editor { min-height: 400px; } + +.next-btn.next-large { + padding: 0 16px !important; +} + +.next-btn.next-large.isOnlyIcon { + width: auto !important; +} diff --git a/src/components/EnvPlan/index.tsx b/src/components/EnvPlan/index.tsx index 55b4eb5fa..1f4425569 100644 --- a/src/components/EnvPlan/index.tsx +++ b/src/components/EnvPlan/index.tsx @@ -21,6 +21,7 @@ type Props = { t: (key: string) => string; onUpdateTarget: () => void; projects: Project[]; + syncProjectList: () => void; clusterList: Cluster[]; }; @@ -271,6 +272,7 @@ export default class EnvPlan extends React.Component { this.props.onUpdateTarget(); this.setState({ showAddTarget: false }); }} + syncProjectList={this.props.syncProjectList} projects={projects || []} clusterList={clusterList || []} project={project} diff --git a/src/interface/application.ts b/src/interface/application.ts index 9bdd953a9..62c366a70 100644 --- a/src/interface/application.ts +++ b/src/interface/application.ts @@ -1,9 +1,10 @@ import type { DeliveryTarget } from './deliveryTarget'; +import type { Project } from './project'; export interface ApplicationDetail { name: string; alias?: string; - namespace: string; + project?: Project; description?: string; createTime?: string; updateTime?: string; diff --git a/src/interface/deliveryTarget.ts b/src/interface/deliveryTarget.ts index fab37a011..fb623fbc7 100644 --- a/src/interface/deliveryTarget.ts +++ b/src/interface/deliveryTarget.ts @@ -1,8 +1,10 @@ +import type { Project } from './project'; + export type DeliveryTarget = { id?: string; name: string; alias?: string; - namespace?: string; + project?: Project; description?: string; cluster?: { clusterName?: string; diff --git a/src/interface/project.ts b/src/interface/project.ts index e98afb5f8..294c13815 100644 --- a/src/interface/project.ts +++ b/src/interface/project.ts @@ -1,6 +1,8 @@ export interface Project { name: string; - description: string; + alias?: string; + description?: string; + namespace: string; createTime?: string; updateTime?: string; } diff --git a/src/layout/Application/components/AddEnvBind/index.tsx b/src/layout/Application/components/AddEnvBind/index.tsx index ee978fb19..829c30f43 100644 --- a/src/layout/Application/components/AddEnvBind/index.tsx +++ b/src/layout/Application/components/AddEnvBind/index.tsx @@ -6,7 +6,7 @@ import type { ApplicationDetail } from '../../../../interface/application'; import { createApplicationEnv } from '../../../../api/application'; import Translation from '../../../../components/Translation'; import { checkName } from '../../../../utils/common'; -import { getDeliveryTarget } from '../../../../api/deliveryTarget'; +import { getDeliveryTarget } from '../../../../api/target'; import type { DeliveryTarget } from '../../../../interface/deliveryTarget'; import locale from '../../../../utils/locale'; @@ -41,8 +41,8 @@ class EnvBindPlanDialog extends Component { loadDeliveryTargets = async () => { const { applicationDetail } = this.props; if (applicationDetail) { - getDeliveryTarget({ namespace: applicationDetail?.namespace, page: 0 }).then((re) => { - this.setState({ targetList: re.deliveryTargets }); + getDeliveryTarget({ project: applicationDetail?.project?.name, page: 0 }).then((re) => { + this.setState({ targetList: re.targets }); }); } }; diff --git a/src/layout/Content/index.tsx b/src/layout/Content/index.tsx index c47c9d64e..bbd5bbb83 100644 --- a/src/layout/Content/index.tsx +++ b/src/layout/Content/index.tsx @@ -19,7 +19,7 @@ export default function Content() { exact path="/" render={() => { - return ; + return ; }} /> @@ -27,7 +27,7 @@ export default function Content() { exact path="/applications/:appName" render={(props: any) => { - return ; + return ; }} /> { return ( - + ); }} @@ -47,7 +47,7 @@ export default function Content() { render={(props: any) => { return ( - + ); }} @@ -58,7 +58,7 @@ export default function Content() { render={(props: any) => { return ( - + ); }} @@ -70,7 +70,7 @@ export default function Content() { return ( + /> ); }} /> @@ -80,7 +80,7 @@ export default function Content() { render={(props: any) => { return ( - + ); }} @@ -91,12 +91,12 @@ export default function Content() { render={(props: any) => { return ( - + ); }} /> - + diff --git a/src/layout/LeftMenu/menu.js b/src/layout/LeftMenu/menu.js index 69e63b442..aa0b5d65a 100644 --- a/src/layout/LeftMenu/menu.js +++ b/src/layout/LeftMenu/menu.js @@ -21,7 +21,7 @@ export function getLeftSider(pathname) { }, { className: isDeliveryTargetURL, - link: '/deliveryTargets', + link: '/targets', iconType: 'box', navName: 'Targets', }, diff --git a/src/model/application.js b/src/model/application.js index 4bddb630e..9ec9d6ea3 100644 --- a/src/model/application.js +++ b/src/model/application.js @@ -12,7 +12,7 @@ import { import { listWorkFlow } from '../api/workflows'; -import { getNamespaceList } from '../api/namespace'; +import { getProjectList } from '../api/project'; export default { namespace: 'application', @@ -108,17 +108,18 @@ export default { action.callback(appContent); } }, + *createApplicationPlan(action, { call, put }) { const result = yield call(createApplication, action.payload); if (action.callback && result) { action.callback(result); } }, + *getProjectList(action, { call, put }) { - // use namespace data as projects - const result = yield call(getNamespaceList, action.payload); + const result = yield call(getProjectList, action.payload); if (result) { - yield put({ type: 'updateProjectList', payload: result.namespaces }); + yield put({ type: 'updateProjectList', payload: result.projects }); } }, diff --git a/src/model/deliveryTarget.ts b/src/model/deliveryTarget.ts index a524ab468..74aca951d 100644 --- a/src/model/deliveryTarget.ts +++ b/src/model/deliveryTarget.ts @@ -1,10 +1,10 @@ -import { getDeliveryTarget, createDeliveryTarget } from '../api/deliveryTarget'; +import { getDeliveryTarget, createDeliveryTarget } from '../api/target'; export interface QueryDeliveryTarget { query?: string; page?: number; pageSize?: number; - namespace?: string; + project?: string; } interface DeliveryTargetState { @@ -60,12 +60,12 @@ const DeliveryTargets: ModelsType = { reducers: { updateDeliveryTargets( state: DeliveryTargetState, - { payload }: { payload: { deliveryTargets: {}; total: number } }, + { payload }: { payload: { targets: {}; total: number } }, ) { - const { deliveryTargets = [], total = 0 } = payload; + const { targets = [], total = 0 } = payload; return { ...state, - deliveryTargets, + deliveryTargets: targets, total, }; }, diff --git a/src/pages/ApplicationConfig/components/EditProperties/index.tsx b/src/pages/ApplicationConfig/components/EditProperties/index.tsx index 25892baf8..54926d317 100644 --- a/src/pages/ApplicationConfig/components/EditProperties/index.tsx +++ b/src/pages/ApplicationConfig/components/EditProperties/index.tsx @@ -58,7 +58,7 @@ class EditProperties extends React.Component { }); dispatch({ type: 'uischema/setAppNamespace', - payload: applicationDetail?.namespace, + payload: applicationDetail?.project?.namespace, }); } } diff --git a/src/pages/ApplicationConfig/index.tsx b/src/pages/ApplicationConfig/index.tsx index a43ee71d7..31a69c2f9 100644 --- a/src/pages/ApplicationConfig/index.tsx +++ b/src/pages/ApplicationConfig/index.tsx @@ -190,7 +190,12 @@ class ApplicationConfig extends Component { Project} - value={applicationDetail && applicationDetail.namespace} + value={ + applicationDetail && + (applicationDetail.project?.alias + ? applicationDetail.project?.alias + : applicationDetail.project?.name) + } /> diff --git a/src/pages/ApplicationInstanceList/index.tsx b/src/pages/ApplicationInstanceList/index.tsx index 9804a174c..1943444b0 100644 --- a/src/pages/ApplicationInstanceList/index.tsx +++ b/src/pages/ApplicationInstanceList/index.tsx @@ -128,7 +128,7 @@ class ApplicationInstanceList extends React.Component { const conponentName = applicationStatus.services[0].name; const param = { appName: envs[0].appDeployName || appName + '-' + envName, - appNs: applicationDetail.namespace, + appNs: applicationDetail.project?.namespace || '', name: conponentName, cluster: '', clusterNs: '', @@ -234,7 +234,7 @@ class ApplicationInstanceList extends React.Component { if (applicationDetail.applicationType == 'common') { const param = { appName: envs[0].appDeployName || appName + '-' + envName, - appNs: applicationDetail.namespace, + appNs: applicationDetail.project?.namespace || '', name: conponentName, cluster: '', clusterNs: '', @@ -261,7 +261,7 @@ class ApplicationInstanceList extends React.Component { } else if (applicationDetail?.applicationType == 'cloud') { const param = { appName: envs[0].appDeployName || appName + '-' + envName, - appNs: applicationDetail.namespace, + appNs: applicationDetail.project?.namespace || '', }; this.setState({ loading: true }); listCloudResources(param) diff --git a/src/pages/ApplicationList/components/AddAppDialog/index.tsx b/src/pages/ApplicationList/components/AddAppDialog/index.tsx index fca935385..660d53351 100644 --- a/src/pages/ApplicationList/components/AddAppDialog/index.tsx +++ b/src/pages/ApplicationList/components/AddAppDialog/index.tsx @@ -12,7 +12,7 @@ import DrawerWithFooter from '../../../../components/Drawer'; import EnvPlan from '../../../../components/EnvPlan'; import Translation from '../../../../components/Translation'; import './index.less'; -import { getDeliveryTarget } from '../../../../api/deliveryTarget'; +import { getDeliveryTarget } from '../../../../api/target'; import type { DeliveryTarget } from '../../../../interface/deliveryTarget'; import type { Project } from '../../../../interface/project'; import type { Cluster } from '../../../../interface/cluster'; @@ -23,6 +23,7 @@ type Props = { visible: boolean; componentDefinitions: []; projects?: Project[]; + syncProjectList: () => void; clusterList?: Cluster[]; setVisible: (visible: boolean) => void; t: (key: string) => string; @@ -36,7 +37,7 @@ type State = { definitionLoading: boolean; dialogStats: string; envBinding: EnvBinding[]; - deliveryTargets?: DeliveryTarget[]; + targets?: DeliveryTarget[]; project?: string; }; @@ -72,7 +73,7 @@ class AppDialog extends React.Component { componentDidMount() { const { projects } = this.props; if (projects && projects.length > 0) { - this.field.setValue('namespace', projects[0].name); + this.field.setValue('project', projects[0].name); this.setState({ project: projects[0].name }, () => { this.loadDeliveryTarget(); }); @@ -96,13 +97,13 @@ class AppDialog extends React.Component { if (error) { return; } - const { description, alias, name, namespace, icon = '', componentType, properties } = values; + const { description, alias, name, project, icon = '', componentType, properties } = values; const params = { alias, icon, name, description, - namespace, + project, envBinding: envBinding, component: { alias, @@ -124,9 +125,9 @@ class AppDialog extends React.Component { loadDeliveryTarget = () => { if (this.state.project) { - getDeliveryTarget({ namespace: this.state.project, page: 0 }).then((res) => { + getDeliveryTarget({ project: this.state.project, page: 0 }).then((res) => { if (res) { - this.setState({ deliveryTargets: res.deliveryTargets }); + this.setState({ targets: res.targets }); } }); } @@ -236,7 +237,7 @@ class AppDialog extends React.Component { const { onClose } = this.props; const { visible, t, setVisible, dispatch, projects, clusterList } = this.props; - const { envBinding, definitionDetail, dialogStats, deliveryTargets } = this.state; + const { envBinding, definitionDetail, dialogStats, targets } = this.state; const validator = (rule: Rule, value: any, callback: (error?: string) => void) => { this.uiSchemaRef.current?.validate(callback); }; @@ -256,6 +257,7 @@ class AppDialog extends React.Component { setVisible={setVisible} dispatch={dispatch} projects={projects} + syncProjectList={this.props.syncProjectList} field={this.field} ref={this.basicRef} /> @@ -302,9 +304,10 @@ class AppDialog extends React.Component { t={this.props.t} value={envBinding} projects={projects || []} + syncProjectList={this.props.syncProjectList} clusterList={clusterList || []} onUpdateTarget={this.loadDeliveryTarget} - targetList={deliveryTargets} + targetList={targets} project={this.state.project} ref={this.envBind} /> diff --git a/src/pages/ApplicationList/components/GeneralConfig/index.tsx b/src/pages/ApplicationList/components/GeneralConfig/index.tsx index d9492e6e5..bf8937ad4 100644 --- a/src/pages/ApplicationList/components/GeneralConfig/index.tsx +++ b/src/pages/ApplicationList/components/GeneralConfig/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { Field } from '@b-design/ui'; import { Grid, Form, Input } from '@b-design/ui'; -import NameSpaceForm from './namespace-form'; +import ProjectForm from './project-form'; import { checkName } from '../../../../utils/common'; import './index.less'; import Translation from '../../../../components/Translation'; @@ -11,6 +11,7 @@ type Props = { visible: boolean; field: Field; projects?: Project[]; + syncProjectList: () => void; setVisible: (visible: boolean) => void; t: (key: string) => {}; dispatch: ({}) => void; @@ -31,9 +32,9 @@ class GeneralConfig extends React.Component { render() { const { Row, Col } = Grid; const { projects } = this.props; - const namespaceList = projects?.map((item) => { + const projectList = projects?.map((item) => { return { - label: item.name, + label: item.alias || item.name, value: item.name, }; }); @@ -59,7 +60,6 @@ class GeneralConfig extends React.Component { required={true} > { - diff --git a/src/pages/ApplicationList/components/GeneralConfig/namespace-form.tsx b/src/pages/ApplicationList/components/GeneralConfig/namespace-form.tsx deleted file mode 100644 index c9e69bfae..000000000 --- a/src/pages/ApplicationList/components/GeneralConfig/namespace-form.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import type { Field } from '@b-design/ui'; -import { Form, Input, Select, Button } from '@b-design/ui'; -import { If } from 'tsx-control-statements/components'; -import Translation from '../../../../components/Translation'; -import { checkName } from '../../../../utils/common'; -import locale from '../../../../utils/locale'; - -const FormItem = Form.Item; -type Props = { - formItemLayout?: any; - namespaceList?: { label: string; value: string }[]; - field: Field; - handleSelectNameSpace?: () => {}; - onChange?: (namespace: string) => void; - disableNew?: boolean; -}; - -type State = { - showNameSpaceInput: boolean; - inputNamespaceParam: string; -}; - -class NamespaceForm extends React.Component { - constructor(props: any) { - super(props); - this.state = { - showNameSpaceInput: false, - inputNamespaceParam: '', - }; - } - - openNamespaceInput = () => { - this.setState({ - showNameSpaceInput: true, - }); - }; - - closeNamespaceInput = () => { - this.setState({ - showNameSpaceInput: false, - }); - }; - - render() { - const { formItemLayout, namespaceList, field, disableNew } = this.props; - const { showNameSpaceInput } = this.state; - return ( - - 0}> - Project} - labelTextAlign="left" - required={true} - > - -
- - -
- - - - - Project} - labelTextAlign="left" - required={true} - > - - - - - ); - } -} - -export default NamespaceForm; diff --git a/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx b/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx new file mode 100644 index 000000000..d1a3d4dd6 --- /dev/null +++ b/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx @@ -0,0 +1,148 @@ +import React from 'react'; +import { Field } from '@b-design/ui'; +import { Form, Input, Select, Button, Grid, Message } from '@b-design/ui'; +import { If } from 'tsx-control-statements/components'; +import Translation from '../../../../components/Translation'; +import { checkName } from '../../../../utils/common'; +import locale from '../../../../utils/locale'; +import { createProject } from '../../../../api/project'; + +const { Col, Row } = Grid; +const FormItem = Form.Item; +type Props = { + disable?: boolean; + formItemLayout?: any; + projectList?: { label: string; value: string }[]; + syncProjectList?: () => void; + field: Field; + handleSelectNameSpace?: () => {}; + onChange?: (namespace: string) => void; + disableNew?: boolean; +}; + +type State = { + showProjectInput: boolean; + inputNamespaceParam: string; +}; + +class ProjectForm extends React.Component { + form: Field; + constructor(props: any) { + super(props); + this.state = { + showProjectInput: false, + inputNamespaceParam: '', + }; + this.form = new Field(this); + } + + openNamespaceInput = () => { + this.setState({ + showProjectInput: true, + }); + }; + + createProject = () => { + this.form.validate((errors: any, values: any) => { + if (errors) { + return; + } + createProject({ name: values.project_name, alias: values.project_alias }).then((re) => { + if (re) { + Message.success('create project success'); + if (this.props.syncProjectList) { + this.props.syncProjectList(); + } + this.setState({ + showProjectInput: false, + }); + } + }); + }); + }; + + render() { + const { formItemLayout, projectList, field, disableNew, disable } = this.props; + const { showProjectInput } = this.state; + return ( + + Project} + labelTextAlign="left" + required={true} + > + +
+ + + + + Alias}> + + + + + + + + + + + ); + } +} + +export default ProjectForm; diff --git a/src/pages/ApplicationList/components/SelectSearch/index.tsx b/src/pages/ApplicationList/components/SelectSearch/index.tsx index 1d43e3a6b..8628a7989 100644 --- a/src/pages/ApplicationList/components/SelectSearch/index.tsx +++ b/src/pages/ApplicationList/components/SelectSearch/index.tsx @@ -17,7 +17,7 @@ type Props = { }; type State = { - namespaceValue: string; + projectValue: string; deliveryTargetValue: string; inputValue: string; }; @@ -26,19 +26,19 @@ class SelectSearch extends React.Component { constructor(props: Props) { super(props); this.state = { - namespaceValue: '', + projectValue: '', deliveryTargetValue: '', inputValue: '', }; - this.handleChangeNamepace = this.handleChangeNamepace.bind(this); + this.handleChangeProject = this.handleChangeProject.bind(this); this.handleChangDeliveryTarget = this.handleChangDeliveryTarget.bind(this); this.handleChangName = this.handleChangName.bind(this); } - handleChangeNamepace(e: string) { + handleChangeProject(e: string) { this.setState( { - namespaceValue: e, + projectValue: e, }, () => { this.getApplications(); @@ -68,9 +68,9 @@ class SelectSearch extends React.Component { }; getApplications = async () => { - const { namespaceValue, deliveryTargetValue, inputValue } = this.state; + const { projectValue, deliveryTargetValue, inputValue } = this.state; const params = { - namespace: namespaceValue, + project: projectValue, targetName: deliveryTargetValue, query: inputValue, }; @@ -79,14 +79,14 @@ class SelectSearch extends React.Component { render() { const { deliveryTargetList, projects, t } = this.props; - const { namespaceValue, deliveryTargetValue, inputValue } = this.state; + const { projectValue, deliveryTargetValue, inputValue } = this.state; const projectPlacehole = t('Search by project').toString(); const deliveryTargetPlacehole = t('Search by target').toString(); const appPlacehole = t('Search by application name and description').toString(); const projectSource = projects?.map((item) => { return { - label: item.name, + label: item.alias || item.name, value: item.name, }; }); @@ -97,12 +97,12 @@ class SelectSearch extends React.Component { locale={locale.Select} mode="single" size="large" - onChange={this.handleChangeNamepace} + onChange={this.handleChangeProject} dataSource={projectSource} placeholder={projectPlacehole} className="item" hasClear - value={namespaceValue} + value={projectValue} /> @@ -144,7 +144,7 @@ class SelectSearch extends React.Component { onClick={() => { this.setState( { - namespaceValue: '', + projectValue: '', deliveryTargetValue: '', inputValue: '', }, diff --git a/src/pages/ApplicationList/components/YmalConfig/index.tsx b/src/pages/ApplicationList/components/YmalConfig/index.tsx index 11eaacbc7..b9feed2ba 100644 --- a/src/pages/ApplicationList/components/YmalConfig/index.tsx +++ b/src/pages/ApplicationList/components/YmalConfig/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Button, Grid, Form, Input, Field, Upload, Icon, Message } from '@b-design/ui'; -import NameSpaceForm from '../GeneralConfig/namespace-form'; +import NameSpaceForm from '../GeneralConfig/project-form'; import DefinitionCode from '../../../../components/DefinitionCode'; import { checkName } from '../../../../utils/common'; import Translation from '../../../../components/Translation'; @@ -141,7 +141,7 @@ class YmalConfig extends React.Component { - + Description}> diff --git a/src/pages/ApplicationList/index.tsx b/src/pages/ApplicationList/index.tsx index 79db801ee..4733b2514 100644 --- a/src/pages/ApplicationList/index.tsx +++ b/src/pages/ApplicationList/index.tsx @@ -131,6 +131,7 @@ class Application extends Component { { diff --git a/src/pages/DeliveryTargetList/components/List/index.tsx b/src/pages/DeliveryTargetList/components/List/index.tsx index ffe96cac0..1f41a447c 100644 --- a/src/pages/DeliveryTargetList/components/List/index.tsx +++ b/src/pages/DeliveryTargetList/components/List/index.tsx @@ -1,10 +1,11 @@ import React, { Component } from 'react'; import { Table, Message } from '@b-design/ui'; import Translation from '../../../../components/Translation'; -import { deleteDeliveryTarget } from '../../../../api/deliveryTarget'; +import { deleteDeliveryTarget } from '../../../../api/target'; import './index.less'; import type { DeliveryTarget } from '../../../../interface/deliveryTarget'; import locale from '../../../../utils/locale'; +import type { Project } from '../../../../interface/project'; type Props = { list?: []; @@ -45,11 +46,14 @@ class TableList extends Component { }, }, { - key: 'namespace', + key: 'project', title: Project, - dataIndex: 'namespace', - cell: (v: string) => { - return {v}; + dataIndex: 'project', + cell: (v: Project | undefined) => { + if (v) { + return {v.alias || v.name}; + } + return ''; }, }, { diff --git a/src/pages/DeliveryTargetList/components/TargetDialog/index.tsx b/src/pages/DeliveryTargetList/components/TargetDialog/index.tsx index ea51daa16..ad52de63b 100644 --- a/src/pages/DeliveryTargetList/components/TargetDialog/index.tsx +++ b/src/pages/DeliveryTargetList/components/TargetDialog/index.tsx @@ -4,12 +4,12 @@ import Group from '../../../../extends/Group'; import Namespace from '../Namespace'; import type { NamespaceItem } from '../Namespace'; import { checkName } from '../../../../utils/common'; -import { createDeliveryTarget, updateDeliveryTarget } from '../../../../api/deliveryTarget'; +import { createDeliveryTarget, updateDeliveryTarget } from '../../../../api/target'; import type { DeliveryTarget } from '../../../../interface/deliveryTarget'; import Translation from '../../../../components/Translation'; import type { Cluster } from '../../../../interface/cluster'; import { listNamespaces } from '../../../../api/observation'; -import NameSpaceForm from '../../../ApplicationList/components/GeneralConfig/namespace-form'; +import ProjectForm from '../../../ApplicationList/components/GeneralConfig/project-form'; import type { Project } from '../../../../interface/project'; import locale from '../../../../utils/locale'; @@ -19,6 +19,7 @@ type Props = { visible: boolean; clusterList: Cluster[]; projects: Project[]; + syncProjectList: () => void; deliveryTargetItem?: DeliveryTarget; onOK: () => void; onClose: () => void; @@ -62,21 +63,24 @@ class DeliveryDialog extends React.Component { }; } - componentWillReceiveProps(nextProps: any) { - if (nextProps.isEdit && nextProps.deliveryTargetItem !== this.props.deliveryTargetItem) { + componentDidMount() { + const { project, deliveryTargetItem, isEdit } = this.props; + if (project && !isEdit) { + this.field.setValue('project', project); + } + if (deliveryTargetItem) { const { name, alias, description, - namespace, cluster = { clusterName: '', namespace: '' }, variable = { providerName: '', region: '', zone: '', vpcID: '' }, - } = nextProps.deliveryTargetItem; + } = deliveryTargetItem; this.field.setValues({ name, alias, description, - namespace: namespace, + project: deliveryTargetItem.project ? deliveryTargetItem.project.name : '', clusterName: cluster.clusterName, runtimeNamespace: cluster.namespace, var_providerName: variable.providerName, @@ -84,14 +88,9 @@ class DeliveryDialog extends React.Component { var_zone: variable.zone, var_vpcID: variable.vpcID, }); - this.loadNamespaces(cluster.clusterName); - } - } - - componentDidMount() { - const { project } = this.props; - if (project) { - this.field.setValue('namespace', project); + if (cluster) { + this.loadNamespaces(cluster.clusterName); + } } } @@ -111,7 +110,7 @@ class DeliveryDialog extends React.Component { alias, description, clusterName, - namespace, + project, runtimeNamespace, var_providerName, var_region, @@ -122,7 +121,7 @@ class DeliveryDialog extends React.Component { name, alias, description, - namespace, + project, cluster: { clusterName, namespace: runtimeNamespace, @@ -178,7 +177,7 @@ class DeliveryDialog extends React.Component { })); }; - loadNamespaces = async (cluster: string) => { + loadNamespaces = async (cluster: string | undefined) => { if (cluster) { listNamespaces({ cluster: cluster }).then((re) => { if (re && re.list) { @@ -209,7 +208,7 @@ class DeliveryDialog extends React.Component { const cluster: string = this.field.getValue('clusterName'); const dataSource = projects.map((project) => { return { - label: project.name, + label: project.alias || project.name, value: project.name, }; }); @@ -270,7 +269,12 @@ class DeliveryDialog extends React.Component { - + diff --git a/src/pages/DeliveryTargetList/index.tsx b/src/pages/DeliveryTargetList/index.tsx index d8aa8dbeb..3a715c8e5 100644 --- a/src/pages/DeliveryTargetList/index.tsx +++ b/src/pages/DeliveryTargetList/index.tsx @@ -153,6 +153,7 @@ class DeliveryTargetList extends React.Component { t={t} visible={visibleDelivery} clusterList={clusterList || []} + syncProjectList={this.getProjectList} projects={projects || []} isEdit={isEdit} deliveryTargetItem={deliveryTargetItem} diff --git a/src/utils/common.ts b/src/utils/common.ts index 096043150..e2e911f04 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -45,7 +45,7 @@ export function isAPPStorePath(pathname: string) { } export function isDeliveryTarget(pathname: string) { - return (pathname || '').indexOf('/deliveryTargets') !== -1; + return (pathname || '').indexOf('/targets') !== -1; } export const APPLICATION_PATH = 'applications'; From e9745591a831b4f2fe4fbbf0be8a7d785bb73742 Mon Sep 17 00:00:00 2001 From: barnettZQG Date: Wed, 8 Dec 2021 17:32:22 +0800 Subject: [PATCH 2/2] Fix: fix change project not query target bug Signed-off-by: barnettZQG --- src/pages/ApplicationList/components/AddAppDialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ApplicationList/components/AddAppDialog/index.tsx b/src/pages/ApplicationList/components/AddAppDialog/index.tsx index 660d53351..b2d6a726f 100644 --- a/src/pages/ApplicationList/components/AddAppDialog/index.tsx +++ b/src/pages/ApplicationList/components/AddAppDialog/index.tsx @@ -58,7 +58,7 @@ class AppDialog extends React.Component { }; this.field = new Field(this, { onChange: (name: string, value: string) => { - if (name === 'namespace') { + if (name === 'project') { this.setState({ project: value }, () => { this.loadDeliveryTarget(); });