feat(ui): portainer new ui for homepage EE-3554 (#7328)

* add icon to homepage

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentIcon.tsx

@@ -5,6 +5,8 @@ import dockerEdge from '@/assets/images/edge_endpoint.png';
 import kube from '@/assets/images/kubernetes_endpoint.png';
 import kubeEdge from '@/assets/images/kubernetes_edge_endpoint.png';
 import { EnvironmentType } from '@/portainer/environments/types';
+import azure from '@/assets/ico/vendor/azure.svg';
+import docker from '@/assets/ico/vendor/docker.svg';
 
 interface Props {
   type: EnvironmentType;
@@ -12,6 +14,15 @@ interface Props {
 
 export function EnvironmentIcon({ type }: Props) {
   switch (type) {
+    case EnvironmentType.AgentOnDocker:
+    case EnvironmentType.Docker:
+      return (
+        <img src={docker} width="60" alt="azure endpoint" aria-hidden="true" />
+      );
+    case EnvironmentType.Azure:
+      return (
+        <img src={azure} width="60" alt="azure endpoint" aria-hidden="true" />
+      );
     case EnvironmentType.EdgeAgentOnDocker:
       return (
         <img src={dockerEdge} alt="docker edge endpoint" aria-hidden="true" />

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import _ from 'lodash';
+import { Edit2, Tag, Cpu } from 'react-feather';
 
 import {
   isoDateFromTimestamp,
@@ -16,8 +17,9 @@ import type { TagId } from '@/portainer/tags/types';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
 import { useTags } from '@/portainer/tags/queries';
 
-import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
 import { Link } from '@@/Link';
+import { Button } from '@@/buttons';
 
 import { EnvironmentIcon } from './EnvironmentIcon';
 import { EdgeIndicator } from './EdgeIndicator';
@@ -91,24 +93,35 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
               </div>
               <EnvironmentStats environment={environment} />
               <div className="blocklist-item-line endpoint-item">
-                <span className="small text-muted">
+                <span className="small text-muted space-x-2">
                   {isDockerEnvironment(environment.Type) && (
                     <span>
                       {environment.Snapshots.length > 0 && (
-                        <span className="small text-muted">
-                          <i className="fa fa-microchip space-right" />
-                          {environment.Snapshots[0].TotalCPU}
-                          <i className="fa fa-memory space-left space-right" />
-                          {humanize(environment.Snapshots[0].TotalMemory)}
-                          <i className="fa fa-digital-tachograph space-left space-right" />
-                          {environment.Gpus?.length}
+                        <span className="small text-muted vertical-center">
+                          <Cpu
+                            className="icon icon-sm space-right"
+                            aria-hidden="true"
+                          />
+                          {environment.Snapshots[0].TotalCPU} CPU
+                          <Icon
+                            icon="svg-memory"
+                            className="icon icon-sm space-right"
+                          />
+                          {humanize(environment.Snapshots[0].TotalMemory)} RAM
+                          <Cpu
+                            className="icon icon-sm space-right"
+                            aria-hidden="true"
+                          />
+                          {environment.Gpus?.length} GPU
                         </span>
                       )}
-                      <span className="space-left space-right">-</span>
                     </span>
                   )}
-                  <span>
-                    <i className="fa fa-tags space-right" aria-hidden="true" />
+                  <span className="vertical-center">
+                    <Tag
+                      className="icon icon-sm space-right"
+                      aria-hidden="true"
+                    />
                     {tags}
                   </span>
                 </span>
@@ -129,7 +142,7 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
           className={styles.editButton}
         >
           <Button color="link">
-            <i className="fa fa-pencil-alt" />
+            <Edit2 className="icon icon-md" aria-hidden="true" />
           </Button>
         </Link>
       )}

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx

@@ -1,3 +1,5 @@
+import { Zap } from 'react-feather';
+
 import {
   DockerSnapshot,
   EnvironmentType,
@@ -24,16 +26,18 @@ export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
 
   return (
     <div className="blocklist-item-line endpoint-item">
-      <span className="blocklist-item-desc space-x-4">
+      <span className="blocklist-item-desc">
         <Stat
           value={addPlural(snapshot.StackCount, 'stack')}
-          icon="fa-th-list"
+          icon="layers"
+          featherIcon
         />
 
         {!!snapshot.Swarm && (
           <Stat
             value={addPlural(snapshot.ServiceCount, 'service')}
-            icon="fa-list-alt"
+            icon="shuffle"
+            featherIcon
           />
         )}
 
@@ -43,21 +47,34 @@ export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
           healthy={snapshot.HealthyContainerCount}
           unhealthy={snapshot.UnhealthyContainerCount}
         />
-
-        <Stat value={addPlural(snapshot.VolumeCount, 'volume')} icon="fa-hdd" />
-        <Stat value={addPlural(snapshot.ImageCount, 'image')} icon="fa-clone" />
+        <Stat
+          value={addPlural(snapshot.VolumeCount, 'volume')}
+          icon="database"
+          featherIcon
+        />
+        <Stat
+          value={addPlural(snapshot.ImageCount, 'image')}
+          icon="list"
+          featherIcon
+        />
       </span>
 
-      <span className="small text-muted space-x-3">
+      <span className="small text-muted space-x-2 vertical-center">
         <span>{snapshot.Swarm ? 'Swarm' : 'Standalone'}</span>
         <span>{snapshot.DockerVersion}</span>
         {type === EnvironmentType.AgentOnDocker && (
           <span>
-            + <i className="fa fa-bolt" aria-hidden="true" /> Agent
+            +{' '}
+            <Zap className="icon icon-xs vertical-center" aria-hidden="true" />{' '}
+            Agent
           </span>
         )}
         {snapshot.Swarm && (
-          <Stat value={addPlural(snapshot.NodeCount, 'node')} icon="fa-hdd" />
+          <Stat
+            value={addPlural(snapshot.NodeCount, 'node')}
+            icon="hard-drive"
+            featherIcon
+          />
         )}
       </span>
     </div>
@@ -80,15 +97,37 @@ function ContainerStats({
   const containersCount = running + stopped;
 
   return (
-    <Stat value={addPlural(containersCount, 'container')} icon="fa-cubes">
+    <Stat
+      value={addPlural(containersCount, 'container')}
+      icon="box"
+      featherIcon
+    >
       {containersCount > 0 && (
-        <span className="space-x-2">
-          <span>-</span>
-          <Stat value={running} icon="fa-power-off green-icon" />
-          <Stat value={stopped} icon="fa-power-off red-icon" />
-          <span>/</span>
-          <Stat value={healthy} icon="fa-heartbeat green-icon" />
-          <Stat value={unhealthy} icon="fa-heartbeat orange-icon" />
+        <span className="space-x-2 space-right">
+          <Stat
+            value={running}
+            icon="power"
+            featherIcon
+            iconClass="icon-success"
+          />
+          <Stat
+            value={stopped}
+            icon="power"
+            featherIcon
+            iconClass="icon-danger"
+          />
+          <Stat
+            value={healthy}
+            icon="heart"
+            featherIcon
+            iconClass="icon-success"
+          />
+          <Stat
+            value={unhealthy}
+            icon="heart"
+            featherIcon
+            iconClass="icon-warning"
+          />
         </span>
       )}
     </Stat>

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { Icon, IconProps } from '@/react/components/Icon';
@@ -5,6 +6,7 @@ import { Icon, IconProps } from '@/react/components/Icon';
 interface Props extends IconProps {
   value: string | number;
   icon: string;
+  iconClass?: string;
 }
 
 export function Stat({
@@ -12,10 +14,15 @@ export function Stat({
   icon,
   children,
   featherIcon,
+  iconClass,
 }: PropsWithChildren<Props>) {
   return (
-    <span>
-      <Icon className="space-right" icon={icon} feather={featherIcon} />
+    <span className="vertical-center space-right">
+      <Icon
+        className={clsx('icon icon-sm space-right', iconClass)}
+        icon={icon}
+        feather={featherIcon}
+      />
       <span>{value}</span>
       {children && <span className="space-left">{children}</span>}
     </span>

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx

@@ -21,17 +21,23 @@ export function EnvironmentStatsKubernetes({ snapshots = [] }: Props) {
 
   return (
     <div className="blocklist-item-line endpoint-item">
-      <span className="blocklist-item-desc space-x-4">
-        <Stat icon="fa-microchip" value={`${snapshot.TotalCPU} CPU`} />
+      <span className="blocklist-item-desc space-x-1">
+        <Stat icon="cpu" featherIcon value={`${snapshot.TotalCPU} CPU`} />
+
         <Stat
-          icon="fa-memory"
+          icon="svg-memory"
+          featherIcon
           value={`${humanize(snapshot.TotalMemory)} RAM`}
         />
       </span>
 
-      <span className="small text-muted space-x-3">
+      <span className="small text-muted space-x-2 vertical-center">
         <span>Kubernetes {snapshot.KubernetesVersion}</span>
-        <Stat value={addPlural(snapshot.NodeCount, 'node')} icon="fa-hdd" />
+        <Stat
+          value={addPlural(snapshot.NodeCount, 'node')}
+          icon="hard-drive"
+          featherIcon
+        />
       </span>
     </div>
   );

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -277,7 +277,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
       <div className="row">
         <div className="col-sm-12">
           <TableContainer>
-            <TableTitle icon="fa-plug" label="Environments" />
+            <TableTitle icon="hard-drive" featherIcon label="Environments" />
 
             <TableActions className={styles.actionBar}>
               <div className={styles.description}>