feat(web): 所有显示集群的地方，按配置优先级进行顺序优化 (#944)

### 做了什么

所有显示集群的地方，按配置优先级进行顺序优化

在publicRuntimeConfig中增加CLUSTER_SORTED_ID_LIST,当获取到的集群配置为对象时，通过遍历排序好的id数组进行排序

### 页面上对应一下集群排序显示的地方

门户系统
1.未结束作业集群选择框
2.历史作业集群选择框
3.提交作业集群选择框
4.作业模板集群选择框
5.SHELL二级导航
6.桌面二级导航
7.登录节点上的桌面集群选择框
8.文件管理二级导航
9.文件传输集群选择框

管理系统
1.未结束作业集群选择框
2.历史作业集群选择框
3.用户空间集群分区显示
4.作业价格表

.changeset/dirty-dancers-sort.md

@@ -0,0 +1,7 @@
+---
+"@scow/portal-web": patch
+"@scow/mis-web": patch
+"@scow/config": patch
+---
+
+门户及管理系统所有显示集群的地方按照集群中配置的优先级进行排序

apps/mis-web/config.js

@@ -11,7 +11,7 @@
  */
 
 const { envConfig, str, bool } = require("@scow/lib-config");
-const { getClusterConfigs, getSortedClusters } = require("@scow/config/build/cluster");
+const { getClusterConfigs, getSortedClusterIds } = require("@scow/config/build/cluster");
 const { getMisConfig } = require("@scow/config/build/mis");
 const { getCommonConfig } = require("@scow/config/build/common");
 const { getClusterTextsConfig } = require("@scow/config/build/clusterTexts");
@@ -123,11 +123,13 @@ const buildRuntimeConfig = async (phase, basePath) => {
 
     PUBLIC_PATH: config.PUBLIC_PATH,
 
-    CLUSTERS: getSortedClusters(clusters).reduce((prev, curr) => {
-      prev[curr.id] = { id: curr.id, name: curr.displayName };
+    CLUSTERS: Object.keys(clusters).reduce((prev, curr) => {
+      prev[curr] = { id: curr, name: clusters[curr].displayName };
       return prev;
     }, {}),
 
+    CLUSTER_SORTED_ID_LIST: getSortedClusterIds(clusters),
+
     ACCOUNT_NAME_PATTERN: misConfig.accountNamePattern?.regex,
 
     PORTAL_URL: config.PORTAL_DEPLOYED ? (config.PORTAL_URL || misConfig.portalUrl || "") : undefined,

apps/mis-web/src/components/ClusterSelector.tsx

@@ -34,8 +34,8 @@ export const ClusterSelector: React.FC<Props> = ({ value, onChange }) => {
       placeholder={t(p("selectCluster"))}
       value={value?.map((v) => v.id)}
       onChange={(values) => onChange?.(values.map((x) => ({ id: x, name: publicConfig.CLUSTERS[x].name })))}
-      options={Object.values(publicConfig.CLUSTERS).map((x) => ({ value: x.id, label:
-        getI18nConfigCurrentText(x.name, languageId) }))}
+      options={publicConfig.CLUSTER_SORTED_ID_LIST.map((x) => ({ value: x, label:
+        getI18nConfigCurrentText(publicConfig.CLUSTERS[x].name, languageId) }))}
       style={{ minWidth: "96px" }}
     />
   );
@@ -59,9 +59,9 @@ export const SingleClusterSelector: React.FC<SingleSelectionProps> = ({ value, o
       onChange={(value) => onChange?.({ id: value, name: publicConfig.CLUSTERS[value].name })}
       options={
         (label ? [{ value: label, label, disabled: true }] : [])
-          .concat(Object.values(publicConfig.CLUSTERS).map((x) => ({
-            value: x.id,
-            label:  getI18nConfigCurrentText(x.name, languageId),
+          .concat(publicConfig.CLUSTER_SORTED_ID_LIST.map((x) => ({
+            value: x,
+            label:  getI18nConfigCurrentText(publicConfig.CLUSTERS[x].name, languageId),
             disabled: false,
           })))
       }

apps/mis-web/src/pageComponents/dashboard/JobsSection.tsx

@@ -29,7 +29,10 @@ interface Props {
 export const JobsSection: React.FC<Props> = ({ user }) => {
 
   const promiseFn = useCallback(() => {
-    return Promise.all(Object.values(publicConfig.CLUSTERS).map(async ({ id, name }) => {
+    return Promise.all(publicConfig.CLUSTER_SORTED_ID_LIST.map(async (clusterId) => {
+
+      const { id, name } = publicConfig.CLUSTERS[clusterId];
+
       return api.getRunningJobs({
         query: {
           cluster: id,

apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx

@@ -27,8 +27,9 @@ import { TableTitle } from "src/components/TableTitle";
 import { prefix, useI18n, useI18nTranslateToString } from "src/i18n";
 import { HistoryJobDrawer } from "src/pageComponents/job/HistoryJobDrawer";
 import type { GetJobInfoSchema } from "src/pages/api/job/jobInfo";
+import { getSortedClusterValues } from "src/utils/cluster";
 import type { Cluster } from "src/utils/config";
-import { getClusterName, publicConfig } from "src/utils/config";
+import { getClusterName } from "src/utils/config";
 import { moneyToString, nullableMoneyToString } from "src/utils/money";
 
 interface FilterForm {
@@ -73,7 +74,7 @@ export const JobTable: React.FC<Props> = ({
     return {
       jobEndTime: [now.subtract(1, "week").startOf("day"), now.endOf("day")],
       jobId: undefined,
-      clusters: Object.values(publicConfig.CLUSTERS),
+      clusters: getSortedClusterValues(),
       accountName: typeof accountNames === "string" ? accountNames : undefined,
     };
   });

apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx

@@ -26,8 +26,9 @@ import { prefix, useI18n, useI18nTranslateToString } from "src/i18n";
 import { HistoryJobDrawer } from "src/pageComponents/job/HistoryJobDrawer";
 import { JobPriceChangeModal } from "src/pageComponents/tenant/JobPriceChangeModal";
 import type { GetJobFilter, GetJobInfoSchema } from "src/pages/api/job/jobInfo";
+import { getSortedClusterValues } from "src/utils/cluster";
 import type { Cluster } from "src/utils/config";
-import { getClusterName, publicConfig } from "src/utils/config";
+import { getClusterName } from "src/utils/config";
 import { moneyToString, nullableMoneyToString } from "src/utils/money";
 
 interface PageInfo {
@@ -75,7 +76,7 @@ export const AdminJobTable: React.FC<Props> = () => {
       userId: "",
       accountName: "",
       jobEndTime: [now.subtract(1, "week").startOf("day"), now.endOf("day")],
-      clusters: Object.values(publicConfig.CLUSTERS),
+      clusters: getSortedClusterValues(),
     };
   });
   const [form] = Form.useForm<FilterForm>();

apps/mis-web/src/pages/_app.tsx

@@ -106,7 +106,7 @@ function MyApp({ Component, pageProps, extra }: Props) {
   });
 
   const defaultClusterStore = useConstant(() => {
-    const store = createStore(DefaultClusterStore, Object.values(publicConfig.CLUSTERS)[0]);
+    const store = createStore(DefaultClusterStore, publicConfig.CLUSTERS[publicConfig.CLUSTER_SORTED_ID_LIST[0]]);
     return store;
   });
 

apps/mis-web/src/pages/api/job/getBillingItems.ts

@@ -21,7 +21,7 @@ import { authenticate } from "src/auth/server";
 import { PlatformRole } from "src/models/User";
 import { Money } from "src/models/UserSchemaModel";
 import { getClient } from "src/utils/client";
-import { runtimeConfig } from "src/utils/config";
+import { publicConfig } from "src/utils/config";
 
 // Cannot use BillingItemType from pageComponents/job/ManageJobBillingTable
 export const BillingItemType = Type.Object({
@@ -145,7 +145,8 @@ export default /* #__PURE__*/typeboxRoute(GetBillingItemsSchema, async (req, res
 
   const result = { activeItems: [] as BillingItemType[], historyItems: [] as BillingItemType[], nextId };
 
-  for (const [cluster] of Object.entries(runtimeConfig.CLUSTERS_CONFIG)) {
+  for (const cluster of publicConfig.CLUSTER_SORTED_ID_LIST) {
+
     const client = getClient(ConfigServiceClient);
     const partitions = await asyncClientCall(client, "getClusterConfig", { cluster }).then((resp) => resp.partitions);
     for (const partition of partitions) {

apps/mis-web/src/pages/user/partitions.tsx

@@ -24,6 +24,7 @@ import { JobBillingTable } from "src/components/JobBillingTable";
 import { PageTitle } from "src/components/PageTitle";
 import { prefix, useI18n, useI18nTranslateToString } from "src/i18n";
 import { UserStore } from "src/stores/UserStore";
+import { getSortedClusterValues } from "src/utils/cluster";
 import { publicConfig, runtimeConfig } from "src/utils/config";
 import { Head } from "src/utils/head";
 import { styled } from "styled-components";
@@ -59,13 +60,14 @@ export const PartitionsPage: NextPage<Props> = requireAuth(() => true)((props: P
   const languageId = useI18n().currentLanguage.id;
   const { text } = props;
 
-  const clusters = Object.values(publicConfig.CLUSTERS);
-
   const [completedRequestCount, setCompletedRequestCount] = useState<number>(0);
   const [renderData, setRenderData] = useState<{ [cluster: string]: JobBillingTableItem[] }>({});
 
-  clusters.forEach((cluster) => {
+  const clusters = getSortedClusterValues();
+
+  publicConfig.CLUSTER_SORTED_ID_LIST.forEach((clusterId) => {
     useAsync({ promiseFn: useCallback(async () => {
+      const cluster = publicConfig.CLUSTERS[clusterId];
       return api.getAvailableBillingTable({
         query: { cluster: cluster.id, tenant: user?.tenant, userId: user?.identityId } })
         .then((data) => {

apps/mis-web/src/utils/cluster.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { Cluster, publicConfig } from "./config";
+
+export const getSortedClusterValues = (): Cluster[] => {
+
+  const sortedClusters: Cluster[] = [];
+  publicConfig.CLUSTER_SORTED_ID_LIST.forEach((clusterId) => {
+    sortedClusters.push(publicConfig.CLUSTERS[clusterId]);
+  });
+
+  return sortedClusters;
+};

apps/mis-web/src/utils/config.ts

@@ -29,6 +29,7 @@ export interface ServerRuntimeConfig {
   DEFAULT_PRIMARY_COLOR: string;
 
   CLUSTERS_CONFIG: {[clusterId: string]: ClusterConfigSchema};
+
   CLUSTER_TEXTS_CONFIG: ClusterTextsConfigSchema;
 
   SCOW_API_AUTH_TOKEN?: string;
@@ -41,7 +42,11 @@ export interface ServerRuntimeConfig {
 
 export interface PublicRuntimeConfig {
   BASE_PATH: string;
+
   CLUSTERS: { [clusterId: string]: Cluster };
+
+  CLUSTER_SORTED_ID_LIST: string[];
+
   PREDEFINED_CHARGING_TYPES: string[];
   CREATE_USER_CONFIG: {
     misConfig: MisConfigSchema["createUser"],

apps/portal-web/config.js

@@ -22,7 +22,8 @@ const { readVersionFile } = require("@scow/utils/build/version");
 const { getCapabilities } = require("@scow/lib-auth");
 const { DEFAULT_PRIMARY_COLOR, getUiConfig } = require("@scow/config/build/ui");
 const { getPortalConfig } = require("@scow/config/build/portal");
-const { getClusterConfigs, getLoginNode, getSortedClusters } = require("@scow/config/build/cluster");
+const { getClusterConfigs, getLoginNode, getSortedClusters,
+  getSortedClusterIds } = require("@scow/config/build/cluster");
 const { getCommonConfig } = require("@scow/config/build/common");
 const { getAuditConfig } = require("@scow/config/build/audit");
 
@@ -182,6 +183,8 @@ const buildRuntimeConfig = async (phase, basePath) => {
 
     CLUSTERS: getSortedClusters(clusters).map((cluster) => ({ id: cluster.id, name: cluster.displayName })),
 
+    CLUSTER_SORTED_ID_LIST: getSortedClusterIds(clusters),
+
     NOVNC_CLIENT_URL: config.NOVNC_CLIENT_URL,
 
     PASSWORD_PATTERN: commonConfig.passwordPattern?.regex,

apps/portal-web/src/components/ClusterSelector.tsx

@@ -35,7 +35,7 @@ export const ClusterSelector: React.FC<Props> = ({ value, onChange }) => {
       onChange={(values) => onChange?.(values.map((x) => ({
         id: x,
         name: publicConfig.CLUSTERS.find((cluster) => cluster.id === x)?.name ?? x })))}
-      options={Object.values(publicConfig.CLUSTERS).map((x) => ({ value: x.id, label:
+      options={publicConfig.CLUSTERS.map((x) => ({ value: x.id, label:
         getI18nConfigCurrentText(x.name, languageId) }))}
       key={languageId}
     />

apps/portal-web/src/pages/_app.tsx

@@ -199,7 +199,7 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
       ?? (hostname && runtimeConfig.UI_CONFIG?.footer?.hostnameTextMap?.[hostname])
       ?? runtimeConfig.UI_CONFIG?.footer?.defaultText ?? "";
 
-    extra.loginNodes = Object.keys(runtimeConfig.CLUSTERS_CONFIG).reduce((acc, cluster) => {
+    extra.loginNodes = publicConfig.CLUSTER_SORTED_ID_LIST.reduce((acc, cluster) => {
       acc[cluster] = runtimeConfig.CLUSTERS_CONFIG[cluster].loginNodes;
       return acc;
     }, {});

apps/portal-web/src/pages/desktop/index.tsx

@@ -47,7 +47,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req }) =>
 
   const languageId = getLanguageCookie(req);
 
-  const loginDesktopEnabledClusters = Object.keys(runtimeConfig.CLUSTERS_CONFIG)
+  const loginDesktopEnabledClusters = publicConfig.CLUSTER_SORTED_ID_LIST
     .filter((clusterId) => getLoginDesktopEnabled(clusterId))
     .map((clusterId) => ({
       id: clusterId,

apps/portal-web/src/utils/config.ts

@@ -70,6 +70,8 @@ export interface PublicRuntimeConfig {
 
   CLUSTERS: Cluster[];
 
+  CLUSTER_SORTED_ID_LIST: string[];
+
   NOVNC_CLIENT_URL: string;
 
   PASSWORD_PATTERN: string | undefined;

libs/config/src/cluster.ts

@@ -55,6 +55,15 @@ export const getSortedClusters = (clusters: Record<string, ClusterConfigSchema>)
     ).map((id) => ({ id, ...clusters[id] }));
 };
 
+export const getSortedClusterIds = (clusters: Record<string, ClusterConfigSchema>): string[] => {
+  return Object.keys(clusters)
+    .sort(
+      (a, b) => {
+        return clusters[a].priority - clusters[b].priority;
+      },
+    );
+};
+
 export const LoginDeskopConfigSchema = Type.Object({
   enabled: Type.Boolean({ description: "是否启动登录节点上的桌面功能" }),
   wms: Type.Array(