feat(console): support get app from target namespace (#1507)

* feat: support get app from target namespace

* fix: type error

Author: jo-hnny

web/console/helpers/urlUtil.ts

@@ -1,25 +1,26 @@
 import { remove, isEmpty } from '../src/modules/common/utils';
 import { ResourceInfo } from '../src/modules/common';
 import { resourceConfig } from '../config';
+import { isObject } from 'lodash';
 
-export function parseQueryString(str: string = '') {
-  let result = {};
+export function parseQueryString(str = '') {
+  const result = {};
   str
     .replace(/^\?*/, '')
     .split('&')
     .forEach(item => {
-      let keyVal = item.split('=');
+      const keyVal = item.split('=');
       if (keyVal.length > 0) {
-        let key = decodeURIComponent(keyVal[0]);
+        const key = decodeURIComponent(keyVal[0]);
         result[key] = keyVal[1] ? decodeURIComponent(keyVal[1]) : '';
       }
     });
   return result;
 }
 
 export function buildQueryString(obj: any = {}) {
-  let keys = remove(Object.keys(obj), value => value === '');
-  let queryStr = keys.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
+  const keys = remove(Object.keys(obj), value => value === '');
+  const queryStr = keys.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
 
   if (queryStr) {
     return '?' + queryStr;
@@ -46,46 +47,25 @@ export const reduceK8sQueryString = ({
   k8sQueryObj = {},
   restfulPath = ''
 }: {
-  k8sQueryObj: any;
+  k8sQueryObj: Record<string, string | number | boolean | Record<string, string | number | boolean>>;
   restfulPath?: string;
 }) => {
-  let operator = '?';
-  let queryString = '';
-  if (!isEmpty(k8sQueryObj)) {
-    let queryKeys = Object.keys(k8sQueryObj);
-    queryKeys.forEach((queryKey, index) => {
-      if (index !== 0) {
-        queryString += '&';
-      }
-
-      // 这里去判断每种资源的query，eg：fieldSelector、limit等
-      let specificQuery = k8sQueryObj[queryKey];
-
-      if (typeof specificQuery === 'object') {
-        // 这里是对于 query的字段里面，还有多种过滤条件，比如fieldSelector支持 involvedObject.name=*,involvedObject.kind=*
-        let specificKeys = Object.keys(specificQuery),
-          specificString = '';
-        specificKeys.forEach((speKey, index) => {
-          if (index !== 0) {
-            specificString += ',';
-          }
-          specificString += speKey + '=' + specificQuery[speKey];
-        });
-        if (specificString) {
-          queryString += queryKey + '=' + specificString;
-        }
-      } else {
-        queryString += queryKey + '=' + k8sQueryObj[queryKey];
-      }
-    });
-  }
-
-  /** 如果原本的url里面已经有 ? 了，则我们这里的query的内容，必须是拼接在后面，而不能直接加多一个 ? */
-  if (restfulPath.includes('?')) {
-    operator = '&';
-  }
-
-  return queryString ? `${operator}${queryString}` : '';
+  const queryString = Object.entries(k8sQueryObj)
+    .map(([key, value]) => {
+      // 也许value是object，即labelSelector 或者 fieldSelector
+      value = isObject(value)
+        ? Object.entries(value)
+            .map(([key, value]) => `${key}${value && '='}${value}`)
+            .join(',')
+        : value;
+
+      return `${key}=${encodeURIComponent(`${value}`)}`;
+    })
+    .join('&');
+
+  const preFix = restfulPath.includes('?') ? '&' : '?';
+
+  return queryString ? `${preFix}${queryString}` : '';
 };
 
 interface K8sRestfulPathOptions {
@@ -114,7 +94,6 @@ interface K8sRestfulPathOptions {
   logAgentName?: string;
 
   meshId?: string;
-
 }
 
 /**
@@ -134,12 +113,12 @@ export const reduceK8sRestfulPath = (options: K8sRestfulPathOptions) => {
     extraResource = '',
     clusterId = '',
     meshId = '',
-    logAgentName = '',
+    logAgentName = ''
   } = options;
 
   namespace = namespace.replace(new RegExp(`^${clusterId}-`), '');
-  let url: string = '';
-  let isAddon = resourceInfo.requestType && resourceInfo.requestType.addon ? resourceInfo.requestType.addon : false;
+  let url = '';
+  const isAddon = resourceInfo.requestType && resourceInfo.requestType.addon ? resourceInfo.requestType.addon : false;
 
   /**
    * addon 和 非 addon的资源，请求的url 不太一样
@@ -153,12 +132,12 @@ export const reduceK8sRestfulPath = (options: K8sRestfulPathOptions) => {
    */
   if (isAddon) {
     // 兼容新旧日志组件
-    let baseInfo: ResourceInfo = resourceConfig()[logAgentName ? 'logagent' : 'cluster'];
-    let baseValue = logAgentName || clusterId;
+    const baseInfo: ResourceInfo = resourceConfig()[logAgentName ? 'logagent' : 'cluster'];
+    const baseValue = logAgentName || clusterId;
     url = `/${baseInfo.basicEntry}/${baseInfo.group}/${baseInfo.version}/${baseInfo.requestType['list']}/${baseValue}/${resourceInfo.requestType['list']}`;
 
     if (extraResource || resourceInfo['namespaces'] || specificName) {
-      let queryArr: string[] = [];
+      const queryArr: string[] = [];
       resourceInfo.namespaces && namespace && queryArr.push(`namespace=${namespace}`);
       specificName && queryArr.push(`name=${specificName}`);
       extraResource && queryArr.push(`action=${extraResource}`);

web/console/package-lock.json

@@ -77,6 +77,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@types/jquery": "^3.5.5",
+    "@types/lodash": "^4.14.172",
     "@types/marked": "^0.6.3",
     "@types/node": "^11.11.1",
     "@types/react": "^16.9.56",

web/console/package.json

@@ -46,8 +46,8 @@ import {
 export async function fetchClusterList(query: QueryState<void>) {
   const resourceInfo: ResourceInfo = resourceConfig()['cluster'];
   const url = reduceK8sRestfulPath({ resourceInfo });
-  let rr: RequestResult = await GET({ url });
-  let objs: Cluster[] = !rr.error && rr.data.items ? rr.data.items : [];
+  const rr: RequestResult = await GET({ url });
+  const objs: Cluster[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<Cluster> = {
     recordCount: objs.length,
     records: objs
@@ -63,8 +63,8 @@ export async function fetchNamespaceList(query: QueryState<NamespaceFilter>) {
   const { keyword, filter } = query;
   const resourceInfo: ResourceInfo = resourceConfig()['ns'];
   const url = reduceK8sRestfulPath({ resourceInfo });
-  let rr: RequestResult = await GET({ url, clusterId: filter.cluster });
-  let objs: Namespace[] = !rr.error && rr.data.items ? rr.data.items : [];
+  const rr: RequestResult = await GET({ url, clusterId: filter.cluster });
+  const objs: Namespace[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<Namespace> = {
     recordCount: objs.length,
     records: objs
@@ -80,8 +80,8 @@ export async function fetchProjectNamespaceList(query: QueryState<ProjectNamespa
   const { keyword, filter } = query;
   const resourceInfo: ResourceInfo = resourceConfig()['namespaces'];
   const url = reduceK8sRestfulPath({ resourceInfo, specificName: filter.projectId, extraResource: 'namespaces' });
-  let rr: RequestResult = await GET({ url });
-  let objs: ProjectNamespace[] = !rr.error && rr.data.items ? rr.data.items : [];
+  const rr: RequestResult = await GET({ url });
+  const objs: ProjectNamespace[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<ProjectNamespace> = {
     recordCount: objs.length,
     records: objs
@@ -96,12 +96,18 @@ export async function fetchProjectNamespaceList(query: QueryState<ProjectNamespa
  */
 export async function fetchAppList(query: QueryState<AppFilter>) {
   const { keyword, filter } = query;
-  const queryObj = {};
+  const queryObj = {
+    fieldSelector: {
+      'spec.targetNamespace': filter.namespace,
+      'spec.targetCluster': filter.cluster
+    }
+  };
   const resourceInfo: ResourceInfo = resourceConfig()['app'];
-  const url = reduceK8sRestfulPath({ resourceInfo, namespace: filter.namespace, isSpecialNamespace: true });
+  const url = reduceK8sRestfulPath({ resourceInfo: { ...resourceInfo, namespaces: undefined } });
   const queryString = reduceK8sQueryString({ k8sQueryObj: queryObj });
-  let rr: RequestResult = await GET({ url: url + queryString, clusterId: filter.cluster, keyword });
-  let objs: App[] = !rr.error && rr.data.items ? rr.data.items : [];
+
+  const rr: RequestResult = await GET({ url: url + queryString, clusterId: filter.cluster, keyword });
+  const objs: App[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<App> = {
     recordCount: objs.length,
     records: objs
@@ -121,7 +127,7 @@ export async function fetchApp(filter: AppDetailFilter) {
     specificName: filter.name,
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await GET({ url, clusterId: filter.cluster });
+  const rr: RequestResult = await GET({ url, clusterId: filter.cluster });
   return rr.data;
 }
 
@@ -137,7 +143,7 @@ export async function updateApp([appInfo]) {
     specificName: appInfo.metadata.name,
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await PUT({ url, bodyData: appInfo });
+  const rr: RequestResult = await PUT({ url, bodyData: appInfo });
   return operationResult(rr.data, rr.error);
 }
 
@@ -152,7 +158,7 @@ export async function addApp([appInfo]) {
     namespace: appInfo.metadata.namespace,
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await POST({ url, bodyData: appInfo });
+  const rr: RequestResult = await POST({ url, bodyData: appInfo });
   return operationResult(rr.data, rr.error);
 }
 
@@ -161,14 +167,14 @@ export async function addApp([appInfo]) {
  * @param group
  */
 export async function deleteApp([app]: App[]) {
-  let resourceInfo: ResourceInfo = resourceConfig()['app'];
+  const resourceInfo: ResourceInfo = resourceConfig()['app'];
   const url = reduceK8sRestfulPath({
     resourceInfo,
     namespace: app.metadata.namespace,
     specificName: app.metadata.name,
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await DELETE({ url });
+  const rr: RequestResult = await DELETE({ url });
   return operationResult(rr.data, rr.error);
 }
 
@@ -185,7 +191,7 @@ export async function fetchAppResource(filter: AppResourceFilter) {
     extraResource: 'resources',
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await GET({ url, clusterId: filter.cluster });
+  const rr: RequestResult = await GET({ url, clusterId: filter.cluster });
   return rr.data;
 }
 
@@ -202,7 +208,7 @@ export async function fetchAppHistory(filter: AppHistoryFilter) {
     extraResource: 'histories',
     isSpecialNamespace: true
   });
-  let rr: RequestResult = await GET({ url, clusterId: filter.cluster });
+  const rr: RequestResult = await GET({ url, clusterId: filter.cluster });
   return rr.data;
 }
 
@@ -211,7 +217,7 @@ export async function fetchAppHistory(filter: AppHistoryFilter) {
  * @param group
  */
 export async function rollbackApp([app]: History[]) {
-  let resourceInfo: ResourceInfo = resourceConfig()['app'];
+  const resourceInfo: ResourceInfo = resourceConfig()['app'];
   const namespace = (app.involvedObject && app.involvedObject.metadata && app.involvedObject.metadata.namespace) || '';
   const name = (app.involvedObject && app.involvedObject.metadata && app.involvedObject.metadata.name) || '';
   const cluster = (app.involvedObject && app.involvedObject.spec && app.involvedObject.spec.targetCluster) || '';
@@ -227,7 +233,7 @@ export async function rollbackApp([app]: History[]) {
     isSpecialNamespace: true
   });
   const queryString = reduceK8sQueryString({ k8sQueryObj: queryObj });
-  let rr: RequestResult = await POST({ url: url + queryString, bodyData: {}, clusterId: cluster });
+  const rr: RequestResult = await POST({ url: url + queryString, bodyData: {}, clusterId: cluster });
   return operationResult(rr.data, rr.error);
 }
 
@@ -250,18 +256,15 @@ export async function fetchChartList(query: QueryState<ChartFilter>) {
       }
     : {};
   const resourceInfo: ResourceInfo = resourceConfig()['chart'];
-  let opts = { resourceInfo: resourceInfo };
-  if (filter.namespace) {
-    opts['namespace'] = filter.namespace;
-    opts['isSpecialNamespace'] = true;
-  }
+  const opts = { resourceInfo: { ...resourceInfo, namespaces: undefined } };
+
   const url = reduceK8sRestfulPath(opts);
   const queryString = reduceK8sQueryString({ k8sQueryObj: queryObj });
-  let rr: RequestResult = await GET({
+  const rr: RequestResult = await GET({
     url: url + queryString,
     keyword
   });
-  let objs: Chart[] = !rr.error && rr.data.items ? rr.data.items : [];
+  const objs: Chart[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<Chart> = {
     recordCount: objs.length,
     records: objs
@@ -288,7 +291,7 @@ export async function fetchChartInfo(filter: ChartInfoFilter) {
     isSpecialNamespace: true
   });
   const queryString = reduceK8sQueryString({ k8sQueryObj: queryObj });
-  let rr: RequestResult = await GET({
+  const rr: RequestResult = await GET({
     url: url + '/' + filter.chartVersion + queryString
   });
   return rr.data;
@@ -304,8 +307,8 @@ export async function fetchChartGroupList(query: QueryState<ChartGroupFilter>) {
   const resourceInfo: ResourceInfo = resourceConfig()['chartgroup'];
   const url = reduceK8sRestfulPath({ resourceInfo });
   const queryString = reduceK8sQueryString({ k8sQueryObj: queryObj });
-  let rr: RequestResult = await GET({ url: url + queryString, keyword });
-  let objs: ChartGroup[] = !rr.error && rr.data.items ? rr.data.items : [];
+  const rr: RequestResult = await GET({ url: url + queryString, keyword });
+  const objs: ChartGroup[] = !rr.error && rr.data.items ? rr.data.items : [];
   const result: RecordSet<ChartGroup> = {
     recordCount: objs.length,
     records: objs
@@ -377,11 +380,11 @@ export async function fetchPortalProjectList(query: QueryState<void>) {
   };
   const resourceInfo: ResourceInfo = resourceConfig()['portal'];
   const url = reduceK8sRestfulPath({ resourceInfo });
-  let rr: RequestResult = await GET({ url });
+  const rr: RequestResult = await GET({ url });
   if (rr.error) {
     return empty;
   }
-  let items = Object.keys(rr.data.projects).map(key => {
+  const items = Object.keys(rr.data.projects).map(key => {
     return {
       id: key,
       metadata: {

web/console/src/modules/application/WebAPI.ts

@@ -709,7 +709,7 @@ export async function fetchChartList(query: QueryState<ChartFilter>) {
       }
     : {};
   const resourceInfo: ResourceInfo = resourceConfig()['chart'];
-  const opts = { resourceInfo: resourceInfo };
+  const opts = { resourceInfo: { ...resourceInfo, namespaces: undefined } };
   // if (filter.namespace) {
   //   opts['namespace'] = filter.namespace;
   //   opts['isSpecialNamespace'] = true;