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

* add icon to homepage

app/assets/css/app.css

@@ -245,7 +245,6 @@ a[ng-click] {
   cursor: pointer;
   border: 1px solid var(--border-blocklist);
   border-radius: 8px;
-  box-shadow: var(--shadow-box-color);
   margin-right: 10px;
 }
 

app/assets/css/bootstrap-override.css

@@ -1,4 +1,15 @@
 /* Label, Section Title */
+.label {
+  border-radius: 5px;
+}
+
+.label-success {
+  background-color: var(--ui-success-7);
+}
+
+.label-danger {
+  background-color: var(--ui-error-6);
+}
 
 .control-label {
   color: var(--ui-gray-7);

app/assets/ico/memory.svg

@@ -1,3 +1 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M60.4167 76.2503V87M70.8333 46V33.5M22.9167 76.2503V87M41.6667 76.2503V87M41.6667 76.2503H63.3333C70.334 76.2503 82.7428 76.2503 85.4167 74.8879C87.7687 73.6895 89.681 71.7772 90.8794 69.4252C91.8916 67.4386 92.1518 64.4957 92.2187 60.5M41.6667 76.2503H36.6667C29.666 76.2503 17.8324 76.2503 15.1585 74.8879C12.8064 73.6895 10.8942 71.7772 9.69576 69.4252C8.68352 67.4386 8.42335 64.4957 8.35648 60.5M79.1667 76.2503V87M50.5 46V33.5M29.5 46V33.5M8.35648 60.5C8.33334 59.1177 8.33334 58.0496 8.33334 56.2503V36.667C8.33334 29.6663 8.33334 26.166 9.69576 23.4921C10.8942 21.1401 12.8064 19.2278 15.1585 18.0294C17.8324 16.667 29.666 16.667 36.6667 16.667H63.3333C70.334 16.667 82.7428 16.667 85.4167 18.0294C87.7687 19.2278 89.681 21.1401 90.8794 23.4921C92.2418 26.166 92.2418 29.6663 92.2418 36.667V56.2503C92.2418 58.0496 92.2418 59.1177 92.2187 60.5M8.35648 60.5H92.2187" stroke="black" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.5 18.3V20.8799M17 11.0399V8.03992M5.5 18.3V20.8799M10 18.3V20.8799M10 18.3H15.2C16.8802 18.3 19.8583 18.3 20.5 17.973C21.0645 17.6854 21.5234 17.2265 21.811 16.662C22.054 16.1852 22.1164 15.4789 22.1325 14.5199M10 18.3H8.8C7.11984 18.3 4.27976 18.3 3.63803 17.973C3.07354 17.6854 2.6146 17.2265 2.32698 16.662C2.08404 16.1852 2.0216 15.4789 2.00555 14.5199M19 18.3V20.8799M12.12 11.0399V8.03992M7.08 11.0399V8.03992M2.00555 14.5199C2 14.1882 2 13.9318 2 13.5V8.8C2 7.11984 2 6.27976 2.32698 5.63803C2.6146 5.07354 3.07354 4.6146 3.63803 4.32698C4.27976 4 7.11984 4 8.8 4H15.2C16.8802 4 19.8583 4 20.5 4.32698C21.0645 4.6146 21.5234 5.07354 21.811 5.63803C22.138 6.27976 22.138 7.11984 22.138 8.8V13.5C22.138 13.9318 22.138 14.1882 22.1325 14.5199M2.00555 14.5199H22.1325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>

app/assets/ico/object-group.svg

@@ -1,3 +1 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M79.1667 29.1667V70.8333M20.8333 29.1667V70.8333M70.8333 20.8333L29.1667 20.8333M70.8333 79.1667H29.1667M19.1667 29.1667H22.5C24.8336 29.1667 26.0003 29.1667 26.8916 28.7125C27.6756 28.3131 28.3131 27.6756 28.7125 26.8916C29.1667 26.0003 29.1667 24.8336 29.1667 22.5V19.1667C29.1667 16.8331 29.1667 15.6663 28.7125 14.775C28.3131 13.991 27.6756 13.3536 26.8916 12.9541C26.0003 12.5 24.8336 12.5 22.5 12.5H19.1667C16.8331 12.5 15.6663 12.5 14.775 12.9541C13.991 13.3536 13.3536 13.991 12.9541 14.775C12.5 15.6663 12.5 16.8331 12.5 19.1667V22.5C12.5 24.8336 12.5 26.0003 12.9541 26.8916C13.3536 27.6756 13.991 28.3131 14.775 28.7125C15.6663 29.1667 16.8331 29.1667 19.1667 29.1667ZM19.1667 87.5H22.5C24.8336 87.5 26.0003 87.5 26.8916 87.0459C27.6756 86.6464 28.3131 86.009 28.7125 85.225C29.1667 84.3337 29.1667 83.1669 29.1667 80.8333V77.5C29.1667 75.1664 29.1667 73.9997 28.7125 73.1084C28.3131 72.3244 27.6756 71.6869 26.8916 71.2875C26.0003 70.8333 24.8336 70.8333 22.5 70.8333H19.1667C16.8331 70.8333 15.6663 70.8333 14.775 71.2875C13.991 71.6869 13.3536 72.3244 12.9541 73.1084C12.5 73.9997 12.5 75.1664 12.5 77.5V80.8333C12.5 83.1669 12.5 84.3337 12.9541 85.225C13.3536 86.009 13.991 86.6464 14.775 87.0459C15.6663 87.5 16.8331 87.5 19.1667 87.5ZM77.5 29.1667H80.8333C83.1669 29.1667 84.3337 29.1667 85.225 28.7125C86.009 28.3131 86.6464 27.6756 87.0459 26.8916C87.5 26.0003 87.5 24.8336 87.5 22.5V19.1667C87.5 16.8331 87.5 15.6663 87.0459 14.775C86.6464 13.991 86.009 13.3536 85.225 12.9541C84.3337 12.5 83.1669 12.5 80.8333 12.5H77.5C75.1664 12.5 73.9997 12.5 73.1084 12.9541C72.3244 13.3536 71.6869 13.991 71.2875 14.775C70.8333 15.6663 70.8333 16.8331 70.8333 19.1667V22.5C70.8333 24.8336 70.8333 26.0003 71.2875 26.8916C71.6869 27.6756 72.3244 28.3131 73.1084 28.7125C73.9997 29.1667 75.1664 29.1667 77.5 29.1667ZM77.5 87.5H80.8333C83.1669 87.5 84.3337 87.5 85.225 87.0459C86.009 86.6464 86.6464 86.009 87.0459 85.225C87.5 84.3337 87.5 83.1669 87.5 80.8333V77.5C87.5 75.1664 87.5 73.9997 87.0459 73.1084C86.6464 72.3244 86.009 71.6869 85.225 71.2875C84.3337 70.8333 83.1669 70.8333 80.8333 70.8333H77.5C75.1664 70.8333 73.9997 70.8333 73.1084 71.2875C72.3244 71.6869 71.6869 72.3244 71.2875 73.1084C70.8333 73.9997 70.8333 75.1664 70.8333 77.5V80.8333C70.8333 83.1669 70.8333 84.3337 71.2875 85.225C71.6869 86.009 72.3244 86.6464 73.1084 87.0459C73.9997 87.5 75.1664 87.5 77.5 87.5Z" stroke="black" stroke-width="8.2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 7V17M5 7V17M17 5L7 5M17 19H7M4.6 7H5.4C5.96005 7 6.24008 7 6.45399 6.89101C6.64215 6.79513 6.79513 6.64215 6.89101 6.45399C7 6.24008 7 5.96005 7 5.4V4.6C7 4.03995 7 3.75992 6.89101 3.54601C6.79513 3.35785 6.64215 3.20487 6.45399 3.10899C6.24008 3 5.96005 3 5.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V5.4C3 5.96005 3 6.24008 3.10899 6.45399C3.20487 6.64215 3.35785 6.79513 3.54601 6.89101C3.75992 7 4.03995 7 4.6 7ZM4.6 21H5.4C5.96005 21 6.24008 21 6.45399 20.891C6.64215 20.7951 6.79513 20.6422 6.89101 20.454C7 20.2401 7 19.9601 7 19.4V18.6C7 18.0399 7 17.7599 6.89101 17.546C6.79513 17.3578 6.64215 17.2049 6.45399 17.109C6.24008 17 5.96005 17 5.4 17H4.6C4.03995 17 3.75992 17 3.54601 17.109C3.35785 17.2049 3.20487 17.3578 3.10899 17.546C3 17.7599 3 18.0399 3 18.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21ZM18.6 7H19.4C19.9601 7 20.2401 7 20.454 6.89101C20.6422 6.79513 20.7951 6.64215 20.891 6.45399C21 6.24008 21 5.96005 21 5.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3H18.6C18.0399 3 17.7599 3 17.546 3.10899C17.3578 3.20487 17.2049 3.35785 17.109 3.54601C17 3.75992 17 4.03995 17 4.6V5.4C17 5.96005 17 6.24008 17.109 6.45399C17.2049 6.64215 17.3578 6.79513 17.546 6.89101C17.7599 7 18.0399 7 18.6 7ZM18.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.0399 21 17.7599 20.891 17.546C20.7951 17.3578 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H18.6C18.0399 17 17.7599 17 17.546 17.109C17.3578 17.2049 17.2049 17.3578 17.109 17.546C17 17.7599 17 18.0399 17 18.6V19.4C17 19.9601 17 20.2401 17.109 20.454C17.2049 20.6422 17.3578 20.7951 17.546 20.891C17.7599 21 18.0399 21 18.6 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>

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}>