refactor(app): redesign dashboard-item component [EE-3634] (#7175)

app/react/components/DashboardItem/DashboardGrid.css

@@ -0,0 +1,3 @@
+.dashboard-grid {
+  @apply grid grid-cols-2 gap-3;
+}

app/react/components/DashboardItem/DashboardGrid.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import './DashboardGrid.css';
+
+export function DashboardGrid({ children }: PropsWithChildren<unknown>) {
+  return <div className="dashboard-grid">{children}</div>;
+}

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -34,3 +34,11 @@ export function WithLink() {
     </Link>
   );
 }
+
+export function WithChildren() {
+  return (
+    <DashboardItem value={1} icon="fa fa-th-list" type="Example resource">
+      <div>Children</div>
+    </DashboardItem>
+  );
+}

app/react/components/DashboardItem/DashboardItem.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
+import clsx from 'clsx';
 
 import { Icon, IconProps } from '@/react/components/Icon';
-
-import { Widget, WidgetBody } from '@@/Widget';
+import { pluralize } from '@/portainer/helpers/strings';
 
 interface Props extends IconProps {
   value?: number;
@@ -18,21 +18,29 @@ export function DashboardItem({
   featherIcon,
 }: Props) {
   return (
-    <div className="col-sm-12 col-md-6" aria-label={type}>
-      <Widget>
-        <WidgetBody>
-          <div className="widget-icon blue pull-left">
-            <Icon icon={icon} feather={featherIcon} />
+    <div
+      className={clsx(
+        'border-solid rounded-lg border-2 hover:border-2 border-gray-5 hover:border-blue-7',
+        'bg-gray-2 hover:bg-blue-2',
+        'p-3'
+      )}
+    >
+      <div className="flex items-center" aria-label={type}>
+        <div className="icon-badge text-2xl bg-blue-3 text-blue-8 mr-4">
+          <Icon icon={icon} feather={featherIcon} className="feather" />
+        </div>
+
+        <div className="flex flex-col justify-around">
+          <div className="text-gray-9 font-medium text-2xl" aria-label="value">
+            {typeof value !== 'undefined' ? value : '-'}
           </div>
-          <div className="pull-right">{children}</div>
-          <div className="title" aria-label="value">
-            {value}
+          <div className="text-gray-7 text-xl" aria-label="resourceType">
+            {pluralize(value || 0, type)}
           </div>
-          <div className="comment" aria-label="resourceType">
-            {type}
-          </div>
-        </WidgetBody>
-      </Widget>
+        </div>
+
+        <div className="ml-auto">{children}</div>
+      </div>
     </div>
   );
 }

app/react/docker/DashboardView/ContainerStatus.tsx

@@ -0,0 +1,52 @@
+import { DockerContainer } from '../containers/types';
+
+interface Props {
+  containers: DockerContainer[];
+}
+
+export function useContainerStatusComponent(containers: DockerContainer[]) {
+  return <ContainerStatus containers={containers} />;
+}
+
+export function ContainerStatus({ containers }: Props) {
+  return (
+    <>
+      <div className="pull-right pl-1">
+        <div>
+          <i className="fa fa-power-off space-right green-icon" />
+          {runningContainersFilter(containers)} running
+        </div>
+        <div>
+          <i className="fa fa-power-off space-right red-icon" />
+          {stoppedContainersFilter(containers)} stopped
+        </div>
+      </div>
+      <div className="pull-right pr-5">
+        <div>
+          <i className="fa fa-heartbeat space-right green-icon" />
+          {healthyContainersFilter(containers)} healthy
+        </div>
+        <div>
+          <i className="fa fa-heartbeat space-right orange-icon" />
+          {unhealthyContainersFilter(containers)} unhealthy
+        </div>
+      </div>
+    </>
+  );
+}
+
+function runningContainersFilter(containers: DockerContainer[]) {
+  return containers.filter((container) => container.Status === 'running')
+    .length;
+}
+function stoppedContainersFilter(containers: DockerContainer[]) {
+  return containers.filter((container) => container.Status === 'exited').length;
+}
+function healthyContainersFilter(containers: DockerContainer[]) {
+  return containers.filter((container) => container.Status === 'healthy')
+    .length;
+}
+function unhealthyContainersFilter(containers: DockerContainer[]) {
+  return containers.filter((container) => container.Status === 'unhealthy')
+    .length;
+}

app/react/docker/DashboardView/ImagesTotalSize.tsx

@@ -0,0 +1,18 @@
+import { humanize } from '@/portainer/filters/filters';
+
+interface Props {
+  imagesTotalSize: number;
+}
+
+export function useImagesTotalSizeComponent(imagesTotalSize: number) {
+  return <ImagesTotalSize imagesTotalSize={imagesTotalSize} />;
+}
+
+export function ImagesTotalSize({ imagesTotalSize }: Props) {
+  return (
+    <div>
+      <i className="fa fa-chart-pie space-right" />
+      {humanize(imagesTotalSize)}
+    </div>
+  );
+}