From 69a824c25b005c83881a19a900ec605398ce3542 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:17:31 +0800
Subject: [PATCH] Fix(UI) Update UI of docker dashboard EE-3845 (#7422)

* EE-3846 fix alignment of left-hand side of fields
---
 .../dashboardClusterAgentInfo.html            |  4 +-
 app/docker/views/dashboard/dashboard.html     | 21 ++++-----
 .../docker/DashboardView/ContainerStatus.tsx  | 44 ++++++++++++++-----
 .../docker/DashboardView/ImagesTotalSize.tsx  |  7 ++-
 4 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html b/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
index 734f8e487..3acc6e83c 100644
--- a/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
+++ b/app/docker/components/dashboard-cluster-agent-info/dashboardClusterAgentInfo.html
@@ -1,6 +1,6 @@
 <rd-widget>
-  <rd-widget-header icon="fa-tachometer-alt" title-text="Cluster information"></rd-widget-header>
-  <rd-widget-body classes="no-padding">
+  <rd-widget-header icon="svg-tachometer" title-text="Cluster information"></rd-widget-header>
+  <rd-widget-body classes="!px-5 !py-0">
     <table class="table">
       <tbody>
         <tr>
diff --git a/app/docker/views/dashboard/dashboard.html b/app/docker/views/dashboard/dashboard.html
index e925c0328..f9d9c6f0a 100644
--- a/app/docker/views/dashboard/dashboard.html
+++ b/app/docker/views/dashboard/dashboard.html
@@ -32,8 +32,8 @@
   <div class="row" ng-if="(!applicationState.endpoint.mode.agentProxy || applicationState.endpoint.mode.provider !== 'DOCKER_SWARM_MODE') && info && endpoint">
     <div class="col-sm-12">
       <rd-widget>
-        <rd-widget-header icon="fa-tachometer-alt" title-text="Environment info"></rd-widget-header>
-        <rd-widget-body classes="no-padding">
+        <rd-widget-header icon="svg-tachometer" title-text="Environment info"></rd-widget-header>
+        <rd-widget-body classes="!px-5 !py-0">
           <table class="table">
             <tbody>
               <tr>
@@ -41,7 +41,8 @@
                 <td>
                   {{ endpoint.Name }}
                   <span class="small text-muted space-left">
-                    <i class="fa fa-microchip"></i> {{ endpoint.Snapshots[0].TotalCPU }} <i class="fa fa-memory space-left"></i> {{ endpoint.Snapshots[0].TotalMemory | humansize }}
+                    <pr-icon icon="'cpu'" feather="true"></pr-icon> {{ endpoint.Snapshots[0].TotalCPU }} <pr-icon icon="'svg-memory'"></pr-icon>
+                    {{ endpoint.Snapshots[0].TotalMemory | humansize }}
                   </span>
                   <span class="small text-muted">
                     - {{ info.Swarm && info.Swarm.NodeID !== '' ? 'Swarm' : 'Standalone' }} {{ info.ServerVersion }}
@@ -77,33 +78,33 @@
 
   <div class="dashboard-grid mx-4">
     <a ui-sref="docker.stacks" ng-if="showStacks">
-      <dashboard-item icon="'layers'" feather-icon="true" type="'Stack'" value="stackCount"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'layers'" feather-icon="true" type="'Stack'" value="stackCount"></dashboard-item>
     </a>
 
     <div ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
       <a ui-sref="docker.services">
-        <dashboard-item icon="'fa-list-alt'" type="'Service'" value="serviceCount"></dashboard-item>
+        <dashboard-item feather-icon="true" icon="'shuffle'" type="'Service'" value="serviceCount"></dashboard-item>
       </a>
     </div>
 
     <a ng-if="containers" ui-sref="docker.containers">
-      <dashboard-item icon="'fa-cubes'" type="'Container'" value="containers.length" children="containerStatusComponent"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'box'" type="'Container'" value="containers.length" children="containerStatusComponent"></dashboard-item>
     </a>
 
     <a ng-if="images" ui-sref="docker.images">
-      <dashboard-item icon="'fa-clone'" type="'Image'" value="images.length" children="imagesTotalSizeComponent"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'list'" type="'Image'" value="images.length" children="imagesTotalSizeComponent"></dashboard-item>
     </a>
 
     <a ui-sref="docker.volumes">
-      <dashboard-item icon="'fa-hdd'" type="'Volume'" value="volumeCount"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'database'" type="'Volume'" value="volumeCount"></dashboard-item>
     </a>
 
     <a ui-sref="docker.networks">
-      <dashboard-item icon="'fa-sitemap'" type="'Network'" value="networkCount"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'share2'" type="'Network'" value="networkCount"></dashboard-item>
     </a>
 
     <div>
-      <dashboard-item icon="'fa-digital-tachograph'" type="'GPU'" value="endpoint.Gpus.length"></dashboard-item>
+      <dashboard-item feather-icon="true" icon="'cpu'" type="'GPU'" value="endpoint.Gpus.length"></dashboard-item>
     </div>
   </div>
 </div>
diff --git a/app/react/docker/DashboardView/ContainerStatus.tsx b/app/react/docker/DashboardView/ContainerStatus.tsx
index 52209c276..d16387fbe 100644
--- a/app/react/docker/DashboardView/ContainerStatus.tsx
+++ b/app/react/docker/DashboardView/ContainerStatus.tsx
@@ -1,3 +1,7 @@
+import clsx from 'clsx';
+
+import { Icon } from '@/react/components/Icon';
+
 import { DockerContainer } from '../containers/types';
 
 interface Props {
@@ -10,28 +14,44 @@ export function useContainerStatusComponent(containers: DockerContainer[]) {
 
 export function ContainerStatus({ containers }: Props) {
   return (
-    <>
-      <div className="pull-right pl-1">
-        <div>
-          <i className="fa fa-power-off space-right green-icon" />
+    <div className="pull-right">
+      <div>
+        <div className="vertical-center space-right pr-5">
+          <Icon
+            icon="power"
+            className={clsx('icon icon-sm icon-success')}
+            feather
+          />
           {runningContainersFilter(containers)} running
         </div>
-        <div>
-          <i className="fa fa-power-off space-right red-icon" />
+        <div className="vertical-center space-right">
+          <Icon
+            icon="power"
+            className={clsx('icon icon-sm icon-danger')}
+            feather
+          />
           {stoppedContainersFilter(containers)} stopped
         </div>
       </div>
-      <div className="pull-right pr-5">
-        <div>
-          <i className="fa fa-heartbeat space-right green-icon" />
+      <div>
+        <div className="vertical-center space-right pr-5">
+          <Icon
+            icon="heart"
+            className={clsx('icon icon-sm icon-success')}
+            feather
+          />
           {healthyContainersFilter(containers)} healthy
         </div>
-        <div>
-          <i className="fa fa-heartbeat space-right orange-icon" />
+        <div className="vertical-center space-right">
+          <Icon
+            icon="heart"
+            className={clsx('icon icon-sm icon-danger')}
+            feather
+          />
           {unhealthyContainersFilter(containers)} unhealthy
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/app/react/docker/DashboardView/ImagesTotalSize.tsx b/app/react/docker/DashboardView/ImagesTotalSize.tsx
index 6746b88d0..8b86f0c71 100644
--- a/app/react/docker/DashboardView/ImagesTotalSize.tsx
+++ b/app/react/docker/DashboardView/ImagesTotalSize.tsx
@@ -1,3 +1,6 @@
+import clsx from 'clsx';
+
+import { Icon } from '@/react/components/Icon';
 import { humanize } from '@/portainer/filters/filters';
 
 interface Props {
@@ -10,8 +13,8 @@ export function useImagesTotalSizeComponent(imagesTotalSize: number) {
 
 export function ImagesTotalSize({ imagesTotalSize }: Props) {
   return (
-    <div>
-      <i className="fa fa-chart-pie space-right" />
+    <div className="vertical-center">
+      <Icon icon="pie-chart" className={clsx('space-right')} feather />
       {humanize(imagesTotalSize)}
     </div>
   );