Merge branch 'feat/cluster-env' of https://github.com/devtron-labs/dashboard into feat/cluster-map

Author: arunjaindev

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

@@ -292,3 +292,17 @@ export const DeleteCluster = ({ clusterList, reloadClusterList, handleClose }: E
         />
     )
 }
+
+export const ClusterEnvLoader = () => (
+    <>
+        {Array.from({ length: 3 }).map((_, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={idx} className="px-20 py-8 dc__grid environment-row dc__align-items-center">
+                {Array.from({ length: 5 }).map((_, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <span key={index} className="shimmer" />
+                ))}
+            </div>
+        ))}
+    </>
+)

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx

@@ -67,7 +67,13 @@ import {
     EnvListSortableKeys,
 } from './cluster.type'
 import { parseClusterEnvSearchParams } from './cluster.util'
-import { AddEnvironment, ClusterListCellComponent, DeleteCluster, EditCluster } from './ClusterList.components'
+import {
+    AddEnvironment,
+    ClusterEnvLoader,
+    ClusterListCellComponent,
+    DeleteCluster,
+    EditCluster,
+} from './ClusterList.components'
 import { ALL_CLUSTER_VALUE } from './constants'
 import EnvironmentList from './EnvironmentList'
 
@@ -272,13 +278,7 @@ const ClusterList = () => {
 
     const renderList = () => {
         if (isClusterEnvListLoading) {
-            return Array.from({ length: 3 }).map(() => (
-                <div className="px-20 py-8 dc__grid cluster-row dc__align-items-center">
-                    {Array.from({ length: 5 }).map(() => (
-                        <span className="shimmer" />
-                    ))}
-                </div>
-            ))
+            return <ClusterEnvLoader />
         }
 
         if (clusterListError || envListError) {

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

@@ -35,6 +35,7 @@ import {
 } from './cluster.type'
 import { environmentNameComparator, getSelectParsedCategory } from './cluster.util'
 import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
+import { ClusterEnvLoader } from './ClusterList.components'
 import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from './constants'
 
 import './cluster.scss'
@@ -129,13 +130,7 @@ const ClustersEnvironmentsList = ({
 
     const renderNamespaceEnvList = () => {
         if (namespaceListLoading) {
-            return Array.from({ length: 3 }).map(() => (
-                <div className="px-20 py-8 dc__grid environment-row dc__align-items-center">
-                    {Array.from({ length: 5 }).map(() => (
-                        <span className="shimmer" />
-                    ))}
-                </div>
-            ))
+            return <ClusterEnvLoader />
         }
 
         if (namespaceListError) {
@@ -405,7 +400,6 @@ const EnvironmentList = ({
                 <SortableTableHeaderCell title="DESCRIPTION" isSortable={false} />
             </div>
             {clusterList
-                .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
                 .filter(({ clusterId }) => !filterClusterId || filterClusterId === String(clusterId))
                 .map(({ clusterId, clusterName, isProd, isVirtualCluster }) => (
                     <ClustersEnvironmentsList

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.scss

@@ -65,12 +65,6 @@
     }
 }
 
-.cluster-list-row {
-    display: grid;
-    grid-template-columns: 24px minmax(278px, 346px) 120px 130px 190px minmax(80px, 90px);
-    grid-column-gap: 16px;
-}
-
 .saved-cluster-list-row {
     display: grid;
     grid-template-columns: 300px 100px 1fr;

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.service.ts

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { get, getUrlWithSearchParams, post, put, trash } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    get,
+    getUrlWithSearchParams,
+    post,
+    put,
+    stringComparatorBySortOrder,
+    trash,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '@Config/constants'
 
@@ -50,30 +57,32 @@ export const getClusterList = async (clusterIds?: number[]): Promise<Cluster[]>
     const { result } = await get<ClusterDTO[]>(url)
 
     // eslint-disable-next-line camelcase
-    return (result ?? []).map(
-        ({
-            id,
-            server_url: serverUrl,
-            cluster_name: clusterName,
-            prometheus_url: prometheusUrl,
-            category,
-            clusterStatus,
-            ...res
-        }) => ({
-            ...res,
-            clusterId: id,
-            serverUrl,
-            clusterName,
-            prometheusUrl,
-            category: category?.name
-                ? {
-                      label: category.name,
-                      value: category.id,
-                  }
-                : null,
-            status: clusterStatus,
-        }),
-    )
+    return (result ?? [])
+        .map(
+            ({
+                id,
+                server_url: serverUrl,
+                cluster_name: clusterName,
+                prometheus_url: prometheusUrl,
+                category,
+                clusterStatus,
+                ...res
+            }) => ({
+                ...res,
+                clusterId: id,
+                serverUrl,
+                clusterName,
+                prometheusUrl,
+                category: category?.name
+                    ? {
+                          label: category.name,
+                          value: category.id,
+                      }
+                    : null,
+                status: clusterStatus,
+            }),
+        )
+        .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
 }
 
 export function getCluster(id: number) {