Utilization notification

biome.json

@@ -11,7 +11,8 @@
       "dist/",
       "src/store/*.ts",
       ".idea",
-      "src/utils/config/index.ts"
+      "src/utils/config/index.ts",
+      ".git"
     ]
   },
   "formatter": {

docker-compose-host-macos.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: node:20.9-alpine
+    image: node:22.12-alpine3.21
     container_name: radix-web_container
     read_only: true
     working_dir: /app
@@ -31,7 +31,7 @@ services:
       test: "exit 0"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.26-alpine
+    image: nginxinc/nginx-unprivileged:1.27-alpine
     container_name: radix-proxy_container
     read_only: true
     depends_on:
@@ -103,7 +103,7 @@ services:
 
   # for use with development
   auth-state:
-    image: redis:5-alpine
+    image: redis:7-alpine
     container_name: radix-auth-state_container
     networks:
       - radix

docker-compose-host.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: node:20.9-alpine
+    image: node:22.12-alpine3.21
     container_name: radix-web_container
     read_only: true
     working_dir: /app
@@ -18,7 +18,7 @@ services:
       - "9222:9222"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.26-alpine
+    image: nginxinc/nginx-unprivileged:1.27-alpine
     container_name: radix-proxy_container
     read_only: true
     volumes:
@@ -73,7 +73,7 @@ services:
 
   # for use with development
   auth-state:
-    image: redis:5-alpine
+    image: redis:7-alpine
     container_name: radix-auth-state_container
     network_mode: host
     ports:

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: node:20.9-alpine
+    image: node:22.12-alpine3.21
     container_name: radix-web_container
     read_only: true
     working_dir: /app
@@ -24,7 +24,7 @@ services:
       - "9222:9222"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.26-alpine
+    image: nginxinc/nginx-unprivileged:1.27-alpine
     container_name: radix-proxy_container
     read_only: true
     volumes:
@@ -85,7 +85,7 @@ services:
 
   # for use with development
   auth-state:
-    image: redis:5-alpine
+    image: redis:7-alpine
     container_name: radix-auth-state_container
     networks:
       - radix

src/components/app-badge/index.tsx

@@ -1,12 +1,10 @@
 import { type JdenticonConfig, configure, toSvg } from 'jdenticon';
-import type { FunctionComponent } from 'react';
-
 import './style.css';
 
-export interface AppBadgeProps {
+type AppBadgeProps = {
   appName: string;
   size?: number;
-}
+};
 
 const badgeConfig: JdenticonConfig = {
   hues: [207, 283, 64],
@@ -21,14 +19,11 @@ const badgeConfig: JdenticonConfig = {
   backColor: '#ffffff00',
 };
 
-export const AppBadge: FunctionComponent<AppBadgeProps> = ({
-  size = 64,
-  ...rest
-}) => {
+export const AppBadge = ({ size = 64, appName }: AppBadgeProps) => {
   const previousConfig = configure();
 
   configure(badgeConfig);
-  const badge = { __html: toSvg(rest.appName, size) };
+  const badge = { __html: toSvg(appName, size) };
   configure(previousConfig);
 
   return <div className="app-badge" dangerouslySetInnerHTML={badge} />;

src/components/app-list-item/dev.tsx

@@ -1,64 +1,105 @@
 import { Typography } from '@equinor/eds-core-react';
 
+import { addMinutes } from 'date-fns';
 import {
-  AppListItem,
-  type AppListItemProps,
+  AppListItemLayout,
+  type AppListItemLayoutProps,
   type FavouriteClickedHandler,
 } from '.';
 
 const noop: FavouriteClickedHandler = (evt) => evt.preventDefault();
 
-const testData: Array<{ description: string } & AppListItemProps> = [
+const testData = [
   {
     description: 'App',
-    app: { name: 'test-app' },
+    isLoading: false,
     handler: noop,
-    isLoaded: true,
-    name: 'some-app',
+    appName: 'some-app',
   },
   {
     description: 'App, marked Favourite, with Job',
-    app: {
-      name: 'toast-app',
-      latestJob: {
-        name: 'test-job',
-        created: new Date().toISOString(),
-        started: new Date().toISOString(),
-        status: 'Running',
-        pipeline: 'build-deploy',
+    isLoading: false,
+    latestJob: {
+      name: 'running-job-app',
+      created: addMinutes(new Date(), -15).toISOString(),
+      started: addMinutes(new Date(), -14).toISOString(),
+      status: 'Running',
+      pipeline: 'build-deploy',
+    },
+    vulnerabilitySummary: [
+      {
+        components: {
+          web: {
+            image: 'test:test',
+            scanSuccess: true,
+            scanTime: '2020-02-02T12:00:00Z',
+            vulnerabilitySummary: {
+              critical: 2,
+              high: 1,
+              medium: 2,
+              low: 5,
+            },
+          },
+        },
+        name: 'dev',
+      },
+    ],
+    utilization: {
+      environments: {
+        dev: {
+          components: {
+            web: {
+              replicas: {
+                'web-abcd-1': {
+                  cpuAverage: 1.1,
+                  cpuRequests: 1.0,
+                  memoryMaximum: 900,
+                  memoryRequests: 1000,
+                },
+              },
+            },
+          },
+        },
       },
     },
     handler: noop,
     isFavourite: true,
     showStatus: true,
-    isLoaded: true,
-    name: 'some-app',
+    appName: 'favorite-app-with-problems',
   },
   {
     description: 'App, marked Favourite, without Job',
-    app: { name: 'app-test' },
+    isLoading: false,
     handler: noop,
     isFavourite: true,
     showStatus: true,
-    isLoaded: true,
-    name: 'some-app',
+    appName: 'fav-app-without-job',
   },
   {
     description: 'App, marked Placeholder',
-    app: { name: 'app-placeholder' },
+    isLoading: false,
     handler: noop,
     isPlaceholder: true,
-    isLoaded: true,
-    name: 'some-app',
+    appName: 'placeholder-app',
+  },
+  {
+    description: 'Deleted App',
+    isLoading: false,
+    handler: noop,
+    isPlaceholder: false,
+    isFavourite: true,
+    showStatus: true,
+    isDeleted: true,
+    appName: 'deleted-app',
   },
-];
+] satisfies Array<{ description: string } & AppListItemLayoutProps>;
 
 export default (
   <div style={{ background: '#eee', padding: 'var(--eds_spacing_medium)' }}>
     {testData.map(({ description, ...rest }, i) => (
       <div key={i} style={{ padding: 'var(--eds_spacing_medium)' }}>
         <Typography variant="h4">{description}</Typography>
-        <AppListItem {...rest} />
+        <AppListItemLayout {...rest} />
       </div>
     ))}
   </div>