feat(running-status): skeletton and good status for all services

Qovery · Jun 9, 2022 · 342d159 · 342d159
1 parent 1669709
commit 342d159
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 36 deletions.
diff --git a/libs/domains/database/src/lib/slices/databases.slice.ts b/libs/domains/database/src/lib/slices/databases.slice.ts
@@ -50,7 +50,7 @@ export const databasesSlice = createSlice({
   reducers: {
     add: databasesAdapter.addOne,
     remove: databasesAdapter.removeOne,
-    updateDatabasessRunningStatus: (
+    updateDatabasesRunningStatus: (
       state,
       action: PayloadAction<{ servicesRunningStatus: ServiceRunningStatus[]; listEnvironmentIdFromCluster: string[] }>
     ) => {

diff --git a/libs/domains/environment/src/lib/slices/environments.slice.ts b/libs/domains/environment/src/lib/slices/environments.slice.ts
@@ -159,6 +159,20 @@ export const selectEnvironmentsEntitiesByClusterId = (clusterId: string) =>
     }
   )
 
+export const selectEnvironmentsIdByClusterId = (clusterId: string) =>
+  createSelector(
+    (state: RootState) => {
+      return selectAll(getEnvironmentsState(state))
+    },
+    (environments): string[] => {
+      return environments
+        .filter((env) => {
+          return env.cluster_id === clusterId
+        })
+        .map((env) => env.id)
+    }
+  )
+
 export const selectEnvironmentById = (state: RootState, environmentId: string) =>
   getEnvironmentsState(state).entities[environmentId]
 

diff --git a/libs/pages/application/ui/src/lib/components/container/container.tsx b/libs/pages/application/ui/src/lib/components/container/container.tsx
@@ -140,9 +140,19 @@ export function Container(props: ContainerProps) {
   const tabsItems = [
     {
       icon: (
-        <StatusChip
-          status={(application?.running_status && application?.running_status.state) || RunningStatus.STOPPED}
-        />
+        <Skeleton
+          show={
+            application?.running_status?.state === RunningStatus.STARTING ||
+            application?.running_status?.state === RunningStatus.STOPPING
+          }
+          width={16}
+          height={16}
+          rounded={true}
+        >
+          <StatusChip
+            status={(application?.running_status && application?.running_status.state) || RunningStatus.STOPPED}
+          />
+        </Skeleton>
       ),
       name: 'Overview',
       active:

diff --git a/...ages/environments/ui/src/lib/components/table-row-environments/table-row-environments.tsx b/...ages/environments/ui/src/lib/components/table-row-environments/table-row-environments.tsx
@@ -46,7 +46,15 @@ export function TableRowEnvironments(props: TableRowEnvironmentsProps) {
     <TableRow columnsWidth={columnsWidth} link={link} disabled={isLoading}>
       <>
         <div className="flex items-center px-4">
-          <Skeleton show={isLoading} width={16} height={16}>
+          <Skeleton
+            show={
+              isLoading ||
+              data?.running_status?.state === RunningStatus.STOPPING ||
+              data?.running_status?.state === RunningStatus.STARTING
+            }
+            width={16}
+            height={16}
+          >
             <StatusChip status={(data.running_status && data.running_status.state) || RunningStatus.STOPPED} />
           </Skeleton>
           <Tooltip

diff --git a/libs/pages/services/ui/src/lib/components/container/container.tsx b/libs/pages/services/ui/src/lib/components/container/container.tsx
@@ -80,9 +80,19 @@ export function Container(props: ContainerProps) {
   const tabsItems = [
     {
       icon: (
-        <StatusChip
-          status={(environment?.running_status && environment?.running_status.state) || RunningStatus.STOPPED}
-        />
+        <Skeleton
+          show={
+            environment?.running_status?.state === RunningStatus.STARTING ||
+            environment?.running_status?.state === RunningStatus.STOPPING
+          }
+          width={16}
+          height={16}
+          rounded={true}
+        >
+          <StatusChip
+            status={(environment?.running_status && environment?.running_status.state) || RunningStatus.STOPPED}
+          />
+        </Skeleton>
       ),
       name: 'Overview',
       active: location.pathname === `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_GENERAL_URL}`,

diff --git a/libs/pages/services/ui/src/lib/components/table-row-services/table-row-services.tsx b/libs/pages/services/ui/src/lib/components/table-row-services/table-row-services.tsx
@@ -15,6 +15,7 @@ import {
 import { timeAgo } from '@console/shared/utils'
 import { ServicesEnum } from '../general/general'
 import { ApplicationEntity, DatabaseEntity } from '@console/shared/interfaces'
+import { DatabaseModeEnum } from 'qovery-typescript-axios'
 
 export interface TableRowServicesProps {
   data: ApplicationEntity | DatabaseEntity
@@ -61,9 +62,29 @@ export function TableRowServices(props: TableRowServicesProps) {
     <TableRow columnsWidth={columnsWidth} link={link}>
       <>
         <div className="flex items-center px-4 gap-1">
-          <Skeleton show={isLoading} width={16} height={16}>
-            <StatusChip status={(data.running_status && data.running_status.state) || RunningStatus.STOPPED} />
-          </Skeleton>
+          {(data as DatabaseEntity).mode === DatabaseModeEnum.MANAGED ? (
+            <Skeleton show={isLoading} width={16} height={16} rounded={true}>
+              <StatusChip status={data.status && data.status.state} />
+            </Skeleton>
+          ) : (
+            <Skeleton
+              show={
+                isLoading ||
+                data?.running_status?.state === RunningStatus.STARTING ||
+                data?.running_status?.state === RunningStatus.STOPPING
+              }
+              width={16}
+              height={16}
+              rounded={true}
+            >
+              {(data as DatabaseEntity).mode === DatabaseModeEnum.MANAGED ? (
+                <StatusChip status={data.status && data.status.state} />
+              ) : (
+                <StatusChip status={(data.running_status && data.running_status.state) || RunningStatus.STOPPED} />
+              )}
+            </Skeleton>
+          )}
+
           <Skeleton show={isLoading} width={16} height={16}>
             <div className="ml-2 mr-2">
               <Icon name={type === ServicesEnum.APPLICATION ? IconEnum.APPLICATION : IconEnum.DATABASE} width="20" />

diff --git a/libs/shared/interfaces/src/lib/common/websocket-running-status.interface.ts b/libs/shared/interfaces/src/lib/common/websocket-running-status.interface.ts
@@ -3,7 +3,7 @@ import { RunningStatus } from '@console/shared/enums'
 
 export interface WebsocketRunningStatusInterface {
   applications?: ServiceRunningStatus[]
-  database?: ServiceRunningStatus[]
+  databases?: ServiceRunningStatus[]
   id: string
   project_id: string
   state: RunningStatus

diff --git a/libs/shared/websockets/src/lib/components/cluster-web-socket/cluster-web-socket.tsx b/libs/shared/websockets/src/lib/components/cluster-web-socket/cluster-web-socket.tsx
@@ -1,5 +1,5 @@
 import useWebSocket from 'react-use-websocket'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { AppDispatch } from '@console/store/data'
 import { applicationsActions, applicationsLoadingStatus } from '@console/domains/application'
@@ -8,6 +8,7 @@ import {
   environmentsActions,
   environmentsLoadingStatus,
   selectEnvironmentsEntitiesByClusterId,
+  selectEnvironmentsIdByClusterId,
 } from '@console/domains/environment'
 import { databasesActions, databasesLoadingStatus } from '@console/domains/database'
 
@@ -29,25 +30,19 @@ export function ClusterWebSocket(props: ClusterWebSocketProps) {
     share: true,
   })
   const environmentsAssociatedToCluster = useSelector(selectEnvironmentsEntitiesByClusterId(clusterId))
+  const environmentsIdAssociatedToCluster = useSelector(selectEnvironmentsIdByClusterId(clusterId))
 
-  useEffect(() => {
-    if (url) {
-      const realUrl = new URL(url)
-      setClusterId(realUrl.searchParams.get('cluster') || '')
-    }
-  }, [])
-
-  useEffect(() => {
-    const storeEnvironmentRunningStatus = (
-      message: { environments: WebsocketRunningStatusInterface[] },
-      clusterId: string
-    ): void => {
+  const storeEnvironmentRunningStatus = useCallback(
+    (message: { environments: WebsocketRunningStatusInterface[] }, clusterId: string): void => {
       dispatch(
         environmentsActions.updateEnvironmentsRunningStatus({ websocketRunningStatus: message.environments, clusterId })
       )
-    }
+    },
+    [dispatch]
+  )
 
-    const storeApplicationsRunningStatus = (message: { environments: WebsocketRunningStatusInterface[] }): void => {
+  const storeApplicationsRunningStatus = useCallback(
+    (message: { environments: WebsocketRunningStatusInterface[] }, listEnvironmentIdFromCluster: string[]): void => {
       let runningApplication: ServiceRunningStatus[] = []
       message.environments.forEach((env) => {
         if (env.applications && env.applications.length) {
@@ -58,37 +53,50 @@ export function ClusterWebSocket(props: ClusterWebSocketProps) {
       dispatch(
         applicationsActions.updateApplicationsRunningStatus({
           servicesRunningStatus: runningApplication,
-          listEnvironmentIdFromCluster: environmentsAssociatedToCluster.map((env) => env.id),
+          listEnvironmentIdFromCluster,
         })
       )
-    }
+    },
+    [dispatch]
+  )
 
-    const storeDatabasesRunningStatus = (message: { environments: WebsocketRunningStatusInterface[] }): void => {
+  const storeDatabasesRunningStatus = useCallback(
+    (message: { environments: WebsocketRunningStatusInterface[] }, listEnvironmentIdFromCluster: string[]): void => {
       let runningDatabases: ServiceRunningStatus[] = []
       message.environments.forEach((env) => {
-        if (env.applications && env.applications.length) {
-          runningDatabases = [...runningDatabases, ...env.applications]
+        if (env.databases && env.databases.length) {
+          runningDatabases = [...runningDatabases, ...env.databases]
         }
       })
 
       dispatch(
-        databasesActions.updateDatabasessRunningStatus({
+        databasesActions.updateDatabasesRunningStatus({
           servicesRunningStatus: runningDatabases,
-          listEnvironmentIdFromCluster: environmentsAssociatedToCluster.map((env) => env.id),
+          listEnvironmentIdFromCluster,
         })
       )
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    if (url) {
+      const realUrl = new URL(url)
+      setClusterId(realUrl.searchParams.get('cluster') || '')
     }
+  }, [])
 
+  useEffect(() => {
     if (lastMessage !== null) {
       const message = JSON.parse(lastMessage.data) as { environments: WebsocketRunningStatusInterface[] }
       storeEnvironmentRunningStatus(message, clusterId)
 
       if (appsLoadingStatus === 'loaded') {
-        storeApplicationsRunningStatus(message)
+        storeApplicationsRunningStatus(message, environmentsIdAssociatedToCluster)
       }
 
       if (dbsLoadingStatus === 'loaded') {
-        storeDatabasesRunningStatus(message)
+        storeDatabasesRunningStatus(message, environmentsIdAssociatedToCluster)
       }
     }
   }, [dispatch, lastMessage, appsLoadingStatus, dbsLoadingStatus, envsLoadingStatus, clusterId])