Feat: support list and create project

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';

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`;

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);
+}

src/api/deliveryTarget.ts → 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);
 }

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;
+}

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<Props, State> {
               this.props.onUpdateTarget();
               this.setState({ showAddTarget: false });
             }}
+            syncProjectList={this.props.syncProjectList}
             projects={projects || []}
             clusterList={clusterList || []}
             project={project}

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;

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;

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;
 }

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<Props, State> {
   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 });
       });
     }
   };

src/layout/Content/index.tsx

@@ -19,15 +19,15 @@ export default function Content() {
         exact
         path="/"
         render={() => {
-          return <Redirect to="/applications"></Redirect>;
+          return <Redirect to="/applications" />;
         }}
       />
       <Route exact path="/applications" component={Application} />
       <Route
         exact
         path="/applications/:appName"
         render={(props: any) => {
-          return <Redirect to={`/applications/${props.match.params.appName}/config`}></Redirect>;
+          return <Redirect to={`/applications/${props.match.params.appName}/config`} />;
         }}
       />
       <Route
@@ -36,7 +36,7 @@ export default function Content() {
         render={(props: any) => {
           return (
             <ApplicationLayout {...props}>
-              <ApplicationConfig {...props}></ApplicationConfig>
+              <ApplicationConfig {...props} />
             </ApplicationLayout>
           );
         }}
@@ -47,7 +47,7 @@ export default function Content() {
         render={(props: any) => {
           return (
             <ApplicationLayout {...props}>
-              <ApplicationWorkflow {...props}></ApplicationWorkflow>
+              <ApplicationWorkflow {...props} />
             </ApplicationLayout>
           );
         }}
@@ -58,7 +58,7 @@ export default function Content() {
         render={(props: any) => {
           return (
             <ApplicationLayout {...props}>
-              <ApplicationRevisionList {...props}></ApplicationRevisionList>
+              <ApplicationRevisionList {...props} />
             </ApplicationLayout>
           );
         }}
@@ -70,7 +70,7 @@ export default function Content() {
           return (
             <Redirect
               to={`/applications/${props.match.params.appName}/envbinding/${props.match.params.envName}/instances`}
-            ></Redirect>
+            />
           );
         }}
       />
@@ -80,7 +80,7 @@ export default function Content() {
         render={(props: any) => {
           return (
             <ApplicationLayout {...props}>
-              <ApplicationInstanceList {...props}></ApplicationInstanceList>
+              <ApplicationInstanceList {...props} />
             </ApplicationLayout>
           );
         }}
@@ -91,12 +91,12 @@ export default function Content() {
         render={(props: any) => {
           return (
             <ApplicationLayout {...props}>
-              <ApplicationMonitor {...props}></ApplicationMonitor>
+              <ApplicationMonitor {...props} />
             </ApplicationLayout>
           );
         }}
       />
-      <Route path="/deliveryTargets" component={DeliveryTargetList} />
+      <Route path="/targets" component={DeliveryTargetList} />
       <Route path="/clusters" component={Clusters} />
       <Route path="/addons" component={Addons} />
       <Route path="/notFound" component={NotFound} />

src/layout/LeftMenu/menu.js

@@ -21,7 +21,7 @@ export function getLeftSider(pathname) {
         },
         {
           className: isDeliveryTargetURL,
-          link: '/deliveryTargets',
+          link: '/targets',
           iconType: 'box',
           navName: 'Targets',
         },

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 });
       }
     },
 

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,
       };
     },

src/pages/ApplicationConfig/components/EditProperties/index.tsx

@@ -58,7 +58,7 @@ class EditProperties extends React.Component<Props, State> {
       });
       dispatch({
         type: 'uischema/setAppNamespace',
-        payload: applicationDetail?.namespace,
+        payload: applicationDetail?.project?.namespace,
       });
     }
   }

src/pages/ApplicationConfig/index.tsx

@@ -190,7 +190,12 @@ class ApplicationConfig extends Component<Props, State> {
                 <Col span={12}>
                   <Item
                     label={<Translation>Project</Translation>}
-                    value={applicationDetail && applicationDetail.namespace}
+                    value={
+                      applicationDetail &&
+                      (applicationDetail.project?.alias
+                        ? applicationDetail.project?.alias
+                        : applicationDetail.project?.name)
+                    }
                   />
                 </Col>
               </Row>

src/pages/ApplicationInstanceList/index.tsx

@@ -128,7 +128,7 @@ class ApplicationInstanceList extends React.Component<Props, State> {
       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<Props, State> {
       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<Props, State> {
       } 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)