Update Dashboard widgets with Deployments.

Signed-off-by: Nashwan Azhari <nazhari@cloudbasesolutions.com>

src/components/modules/DashboardModule/DashboardContent/DashboardContent.tsx

@@ -30,7 +30,7 @@ import type { Project } from "@src/@types/Project";
 import type { User } from "@src/@types/User";
 import type { Licence, LicenceServerStatus } from "@src/@types/Licence";
 import type { NotificationItemData } from "@src/@types/NotificationItem";
-import { ReplicaItem, MigrationItem } from "@src/@types/MainItem";
+import { ReplicaItem, DeploymentItem } from "@src/@types/MainItem";
 
 const MIDDLE_WIDTHS = ["264px", "264px", "264px"];
 
@@ -53,11 +53,11 @@ const MiddleMobileLayout = styled.div<any>`
 
 type Props = {
   replicas: ReplicaItem[];
-  migrations: MigrationItem[];
+  deployments: DeploymentItem[];
   endpoints: Endpoint[];
   projects: Project[];
   replicasLoading: boolean;
-  migrationsLoading: boolean;
+  deploymentsLoading: boolean;
   endpointsLoading: boolean;
   usersLoading: boolean;
   projectsLoading: boolean;
@@ -127,11 +127,10 @@ class DashboardContent extends React.Component<Props, State> {
       <DashboardTopEndpoints
         key="top-endpoints"
         replicas={this.props.replicas}
-        migrations={this.props.migrations}
         endpoints={this.props.endpoints}
         loading={
           this.props.replicasLoading ||
-          this.props.migrationsLoading ||
+          this.props.deploymentsLoading ||
           this.props.endpointsLoading
         }
         style={{
@@ -175,21 +174,30 @@ class DashboardContent extends React.Component<Props, State> {
     );
   }
 
+  getReplicas() {
+    return this.props.replicas.filter(
+      (r: ReplicaItem) => r.scenario === "replica");
+  }
+
+  getLiveMigrations() {
+    return this.props.replicas.filter(
+      (r: ReplicaItem) => r.scenario === "live_migration");
+  }
+
   render() {
     let infoCountData = [
       {
         label: "Replicas",
-        value: this.props.replicas.length,
+        value: this.getReplicas().length,
         color: ThemePalette.alert,
         link: "/replicas",
         loading: this.props.replicasLoading,
       },
       {
         label: "Migrations",
-        value: this.props.migrations.length,
-        color: ThemePalette.primary,
-        link: "/migrations",
-        loading: this.props.migrationsLoading,
+        value: this.getLiveMigrations().length,
+        link: "/replicas",
+        loading: this.props.replicasLoading,
       },
       {
         label: "Endpoints",
@@ -224,9 +232,9 @@ class DashboardContent extends React.Component<Props, State> {
         <DashboardInfoCount data={infoCountData} />
         {this.renderMiddleModules()}
         <DashboardExecutions
-          replicas={this.props.replicas}
-          migrations={this.props.migrations}
-          loading={this.props.replicasLoading || this.props.migrationsLoading}
+          replicas={this.getReplicas()}
+          migrations={this.getLiveMigrations()}
+          loading={this.props.replicasLoading || this.props.deploymentsLoading}
         />
       </Wrapper>
     );

src/components/modules/DashboardModule/DashboardExecutions/DashboardExecutions.tsx

@@ -130,13 +130,13 @@ const EmptyBackgroundImage = styled.div<any>`
 type Props = {
   // eslint-disable-next-line react/no-unused-prop-types
   replicas: ReplicaItem[];
-  migrations: MigrationItem[];
+  migrations: ReplicaItem[];
   loading: boolean;
 };
 type GroupedData = {
   label: string;
   values: number[];
-  data?: string;
+  data?: string
 };
 type TooltipData = {
   title: string;
@@ -169,7 +169,7 @@ class DashboardExecutions extends React.Component<Props, State> {
   }
 
   groupCreations(props: Props) {
-    let creations: TransferItem[] = [...props.replicas, ...props.migrations];
+    let creations: ReplicaItem[] = [...props.replicas, ...props.migrations];
 
     const periodUnit: any = this.state.selectedPeriod.split("-")[1];
     const periodValue: any = Number(this.state.selectedPeriod.split("-")[0]);
@@ -187,7 +187,7 @@ class DashboardExecutions extends React.Component<Props, State> {
     this.groupByPeriod(creations, periodUnit);
   }
 
-  groupByPeriod(transferItems: TransferItem[], periodUnit: string) {
+  groupByPeriod(transferItems: ReplicaItem[], periodUnit: string) {
     const groupedData: GroupedData[] = [];
     const periods: {
       [period: string]: { replicas: number; migrations: number };
@@ -202,9 +202,9 @@ class DashboardExecutions extends React.Component<Props, State> {
       if (!periods[period]) {
         periods[period] = { replicas: 0, migrations: 0 };
       }
-      if (item.type === "replica") {
+      if (item.scenario === "replica") {
         periods[period].replicas += 1;
-      } else if (item.type === "migration") {
+      } else if (item.scenario === "live_migration") {
         periods[period].migrations += 1;
       }
     });

src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -26,7 +26,7 @@ import { ThemePalette, ThemeProps } from "@src/components/Theme";
 
 import type { Endpoint } from "@src/@types/Endpoint";
 
-import { ReplicaItem, MigrationItem, TransferItem } from "@src/@types/MainItem";
+import { ReplicaItem } from "@src/@types/MainItem";
 import endpointImage from "./images/endpoint.svg";
 
 const Wrapper = styled.div<any>`
@@ -131,15 +131,13 @@ const Message = styled.div<any>`
 type GroupedEndpoint = {
   endpoint: Endpoint;
   replicasCount: number;
-  migrationsCount: number;
+  deploymentsCount: number;
   value: number;
 };
 type Props = {
   // eslint-disable-next-line react/no-unused-prop-types
   replicas: ReplicaItem[];
   // eslint-disable-next-line react/no-unused-prop-types
-  migrations: MigrationItem[];
-  // eslint-disable-next-line react/no-unused-prop-types
   endpoints: Endpoint[];
   style: React.CSSProperties;
   loading: boolean;
@@ -178,21 +176,22 @@ class DashboardTopEndpoints extends React.Component<Props, State> {
 
   calculateGroupedEndpoints(props: Props) {
     const groupedEndpoints: GroupedEndpoint[] = [];
-    const count = (mainItems: TransferItem[], endpointId: string) =>
+    const count = (mainItems: ReplicaItem[], endpointId: string, scenario: string) =>
       mainItems.filter(
         r =>
-          r.destination_endpoint_id === endpointId ||
-          r.origin_endpoint_id === endpointId
+          r.scenario === scenario && (
+            r.destination_endpoint_id === endpointId ||
+            r.origin_endpoint_id === endpointId)
       ).length;
 
     props.endpoints.forEach(endpoint => {
-      const replicasCount = count(props.replicas, endpoint.id);
-      const migrationsCount = count(props.migrations, endpoint.id);
+      const replicasCount = count(props.replicas, endpoint.id, "replica");
+      const deploymentsCount = count(props.replicas, endpoint.id, "live_migration");
       groupedEndpoints.push({
         endpoint,
         replicasCount,
-        migrationsCount,
-        value: replicasCount + migrationsCount,
+        deploymentsCount,
+        value: replicasCount + deploymentsCount,
       });
     });
     this.setState({ groupedEndpoints });
@@ -263,7 +262,7 @@ class DashboardTopEndpoints extends React.Component<Props, State> {
           <TooltipRows>
             <TooltipRow>{groupedEndpoint.replicasCount} Replicas</TooltipRow>
             <TooltipRow>
-              {groupedEndpoint.migrationsCount} Migrations
+              {groupedEndpoint.deploymentsCount} Deployments
             </TooltipRow>
             <TooltipRow>{groupedEndpoint.value} Total</TooltipRow>
           </TooltipRows>

src/components/smart/DashboardPage/DashboardPage.tsx

@@ -22,7 +22,7 @@ import MainTemplate from "@src/components/modules/TemplateModule/MainTemplate";
 import PageHeader from "@src/components/smart/PageHeader";
 import endpointStore from "@src/stores/EndpointStore";
 import licenceStore from "@src/stores/LicenceStore";
-import migrationStore from "@src/stores/MigrationStore";
+import deploymentStore from "@src/stores/DeploymentStore";
 import notificationStore from "@src/stores/NotificationStore";
 import projectStore from "@src/stores/ProjectStore";
 import replicaStore from "@src/stores/ReplicaStore";
@@ -100,7 +100,7 @@ class ProjectsPage extends React.Component<{ history: any }, State> {
 
     await Promise.all([
       replicaStore.getReplicas({ skipLog: true, showLoading }),
-      migrationStore.getMigrations({ skipLog: true, showLoading }),
+      deploymentStore.getDeployments({ skipLog: true, showLoading }),
       endpointStore.getEndpoints({ skipLog: true, showLoading }),
       projectStore.getProjects({ skipLog: true, showLoading }),
     ]);
@@ -129,7 +129,7 @@ class ProjectsPage extends React.Component<{ history: any }, State> {
           listComponent={
             <DashboardContent
               replicas={replicaStore.replicas}
-              migrations={migrationStore.migrations}
+              deployments={deploymentStore.deployments}
               endpoints={endpointStore.endpoints}
               users={userStore.users}
               projects={projectStore.projects}
@@ -141,7 +141,7 @@ class ProjectsPage extends React.Component<{ history: any }, State> {
               notificationItems={notificationStore.notificationItems}
               notificationItemsLoading={notificationStore.loading}
               endpointsLoading={endpointStore.loading}
-              migrationsLoading={migrationStore.loading}
+              deploymentsLoading={deploymentStore.loading}
               projectsLoading={projectStore.projects.length === 0}
               usersLoading={userStore.users.length === 0}
               licenceLoading={licenceStore.loadingLicenceInfo}