UI: redesign resource cards

CHANGELOG.md

@@ -18,6 +18,8 @@ FEATURES:
 * Display workspace and shared services total costs for admin role in UI [#2738](https://github.com/microsoft/AzureTRE/pull/2772)
 * Automatically validate all resources have tre_id tag via TFLint [#2774](https://github.com/microsoft/AzureTRE/pull/2774)
 * Add metadata endpoint and simplify `tre` CLI login (also adds API version to UI) (#2794)
+* Updated resource card in UI with visual improvements, disabled state badge and resource ID in info popout [#2846](https://github.com/microsoft/AzureTRE/pull/2846)
+* Add health information for backend services to UI info popout in footer [#2846](https://github.com/microsoft/AzureTRE/pull/2846)
 
 ENHANCEMENTS:
 * Renamed several airlock fields to make them more descriptive and added a createdBy field. Included migration for backwards compatibility ([#2779](https://github.com/microsoft/AzureTRE/pull/2779))

ui/app/package.json

@@ -18,7 +18,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "moment": "^2.29.4",
-    "node-sass": "^7.0.1",
+    "node-sass": "^8.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-markdown": "^8.0.3",

ui/app/src/App.scss

@@ -223,10 +223,12 @@ input[readonly]{
 // Classes for rendering power state badges
 .tre-power-badge {
   text-align: center;
+  color: #636262;
+  margin: 6px;
 
   .tre-power-on, .tre-power-off {
-    height: 10px;
-    width: 10px;
+    height: 8px;
+    width: 8px;
     background-color: #006600;
     border-radius: 50%;
     display: inline-block;

ui/app/src/App.tsx

@@ -75,24 +75,24 @@ export const App: React.FunctionComponent = () => {
                   </Stack.Item>
                   <Stack.Item grow={100} className='tre-body'>
                     <GenericErrorBoundary>
-                    <CostsContext.Provider value={{
-                           costs: costs,
-                           setCosts: (costs: Array<CostResource>) => { setCosts(costs)},
-                        }}>
-                      <Routes>
-                        <Route path="*" element={<RootLayout />} />
-                        <Route path="/workspaces/:workspaceId//*" element={
-                          <WorkspaceContext.Provider value={{
-                            roles: workspaceRoles,
-                            setRoles: (roles: Array<string>) => { console.info("Workspace roles", roles); setWorkspaceRoles(roles) },
-                            workspace: selectedWorkspace,
-                            setWorkspace: (w: Workspace) => { console.info("Workspace set", w); setSelectedWorkspace(w) },
-                            workspaceApplicationIdURI: selectedWorkspace.properties?.scope_id
-                          }}>
-                            <WorkspaceProvider />
-                          </WorkspaceContext.Provider>
-                        } />
-                      </Routes>
+                      <CostsContext.Provider value={{
+                        costs: costs,
+                        setCosts: (costs: Array<CostResource>) => {setCosts(costs)},
+                      }}>
+                        <Routes>
+                          <Route path="*" element={<RootLayout />} />
+                          <Route path="/workspaces/:workspaceId//*" element={
+                            <WorkspaceContext.Provider value={{
+                              roles: workspaceRoles,
+                              setRoles: (roles: Array<string>) => {setWorkspaceRoles(roles)},
+                              workspace: selectedWorkspace,
+                              setWorkspace: (w: Workspace) => {setSelectedWorkspace(w)},
+                              workspaceApplicationIdURI: selectedWorkspace.properties?.scope_id
+                            }}>
+                              <WorkspaceProvider />
+                            </WorkspaceContext.Provider>
+                          } />
+                        </Routes>
                       </CostsContext.Provider>
                     </GenericErrorBoundary>
                   </Stack.Item>

ui/app/src/components/root/RootLayout.tsx

@@ -20,13 +20,12 @@ import config from "../../config.json";
 
 export const RootLayout: React.FunctionComponent = () => {
   const [workspaces, setWorkspaces] = useState([] as Array<Workspace>);
-  const appRolesCtx = useContext(AppRolesContext)
-
   const [loadingState, setLoadingState] = useState(LoadingState.Loading);
   const [loadingCostState, setLoadingCostState] = useState(LoadingState.Loading);
   const [apiError, setApiError] = useState({} as APIError);
   const [costApiError, setCostApiError] = useState({} as APIError);
   const apiCall = useAuthApiCall();
+  const appRolesCtx = useContext(AppRolesContext);
   const costsWriteCtx = useRef(useContext(CostsContext));
 
   useEffect(() => {
@@ -43,7 +42,6 @@ export const RootLayout: React.FunctionComponent = () => {
     };
 
     getWorkspaces();
-
   }, [apiCall]);
 
 
@@ -54,8 +52,8 @@ export const RootLayout: React.FunctionComponent = () => {
 
         costsWriteCtx.current.setCosts([
           ...r.workspaces,
-          ...r.shared_services]
-          );
+          ...r.shared_services
+        ]);
 
         setLoadingCostState(LoadingState.Ok);
       }
@@ -77,36 +75,33 @@ export const RootLayout: React.FunctionComponent = () => {
       getCosts();
     }
 
-    let ctx = costsWriteCtx.current;
+    const ctx = costsWriteCtx.current;
 
-    // run this on onmount - to clear the context
-    return (() => {
-      ctx.setCosts([]);
-    });
+    // run this on unmount - to clear the context
+    return (() => ctx.setCosts([]));
   }, [apiCall, appRolesCtx.roles]);
 
   const addWorkspace = (w: Workspace) => {
-    let ws = [...workspaces]
+    const ws = [...workspaces]
     ws.push(w);
     setWorkspaces(ws);
   }
 
   const updateWorkspace = (w: Workspace) => {
-    let i = workspaces.findIndex((f: Workspace) => f.id === w.id);
-    let ws = [...workspaces]
+    const i = workspaces.findIndex((f: Workspace) => f.id === w.id);
+    const ws = [...workspaces]
     ws.splice(i, 1, w);
     setWorkspaces(ws);
   }
 
   const removeWorkspace = (w: Workspace) => {
-    let i = workspaces.findIndex((f: Workspace) => f.id === w.id);
-    let ws = [...workspaces];
+    const i = workspaces.findIndex((f: Workspace) => f.id === w.id);
+    const ws = [...workspaces];
     ws.splice(i, 1);
     setWorkspaces(ws);
   }
 
   switch (loadingState) {
-
     case LoadingState.Ok:
       return (
         <>

ui/app/src/components/shared/CostsTag.tsx

@@ -0,0 +1,27 @@
+import { Stack } from "@fluentui/react";
+import { useContext } from "react";
+import { CostsContext } from "../../contexts/CostsContext";
+
+interface CostsTagProps {
+  resourceId: string
+}
+
+export const CostsTag: React.FunctionComponent<CostsTagProps> = (props: CostsTagProps) => {
+  const costsCtx = useContext(CostsContext);
+  const resourceCosts = costsCtx?.costs?.find((resourceCost) => {
+    return resourceCost.id === props.resourceId;
+  });
+  let costBadge = <></>;
+  if (resourceCosts && resourceCosts.costs.length > 0) {
+    const formattedCost = new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: resourceCosts?.costs[0].currency,
+      currencyDisplay: 'narrowSymbol',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(resourceCosts?.costs[0].cost);
+    costBadge = <Stack.Item style={{maxHeight: 18}} className="tre-badge">{formattedCost}</Stack.Item>
+  }
+
+  return (costBadge);
+}

ui/app/src/components/shared/Footer.tsx

@@ -1,36 +1,46 @@
 import React, { useEffect, useState } from 'react';
-import { AnimationClassNames, Callout, IconButton, FontWeights, Stack, Text, getTheme, mergeStyles, mergeStyleSets, StackItem } from '@fluentui/react';
+import { AnimationClassNames, Callout, IconButton, FontWeights, Stack, Text, getTheme, mergeStyles, mergeStyleSets, StackItem, IButtonStyles } from '@fluentui/react';
 import { HttpMethod, useAuthApiCall } from '../../hooks/useAuthApiCall';
 import { ApiEndpoint } from '../../models/apiEndpoints';
 
 // TODO:
 // - change text to link
 // - include any small print
 
-
-
 export const Footer: React.FunctionComponent = () => {
   const [showInfo, setShowInfo] = useState(false);
-  const [apiMetadata, setApiMetadata] = useState({} as any);
+  const [apiMetadata, setApiMetadata] = useState<any>();
+  const [health, setHealth] = useState<{services: [{service: string, status: string}]}>();
   const apiCall = useAuthApiCall();
 
   useEffect(() => {
     const getMeta = async() => {
       const result = await apiCall(ApiEndpoint.Metadata, HttpMethod.Get);
       setApiMetadata(result);
-    }
+    };
+    const getHealth = async() => {
+      const result = await apiCall(ApiEndpoint.Health, HttpMethod.Get);
+      setHealth(result);
+    };
     getMeta();
+    getHealth();
   }, [apiCall]);
 
   return (
     <div className={contentClass}>
-      <Stack horizontal>
+      <Stack horizontal style={{alignItems:'center'}}>
         <StackItem grow={1}>Azure Trusted Research Environment</StackItem>
-        <StackItem><IconButton style={{color:'#fff'}} iconProps={{ iconName: 'Info' }} id="info" onClick={() => setShowInfo(!showInfo)} /></StackItem>
+        <StackItem>
+          <IconButton
+            styles={iconButtonStyles}
+            iconProps={{iconName:'Info'}}
+            id="info"
+            onClick={() => setShowInfo(!showInfo)}
+          />
+        </StackItem>
       </Stack>
-
-      {apiMetadata.api_version && showInfo &&
-        <Callout
+      {
+        showInfo && <Callout
           className={styles.callout}
           ariaLabelledBy="info-label"
           ariaDescribedBy="info-description"
@@ -43,58 +53,56 @@ export const Footer: React.FunctionComponent = () => {
           <Text block variant="xLarge" className={styles.title} id="info-label">
             Azure TRE
           </Text>
-          <Text block variant="small" id="version-description">
-            <Stack>
-              <Stack.Item>
-                <Stack horizontal tokens={{ childrenGap: 5 }}>
-                  <Stack.Item style={calloutKeyStyles}>API Version:</Stack.Item>
-                  <Stack.Item style={calloutValueStyles}>{apiMetadata.api_version}</Stack.Item>
-                </Stack>
-              </Stack.Item>
-            </Stack>
-          </Text>
+          <Stack tokens={{childrenGap: 5}}>
+            {
+              apiMetadata?.api_version && <Stack horizontal horizontalAlign='space-between'>
+                <Stack.Item>API Version:</Stack.Item>
+                <Stack.Item>{apiMetadata.api_version}</Stack.Item>
+              </Stack>
+            }
+            {
+                health?.services.map(s => {
+                  return <Stack horizontal horizontalAlign='space-between' key={s.service}>
+                    <Stack.Item>{s.service}:</Stack.Item>
+                    <Stack.Item>{s.status}</Stack.Item>
+                  </Stack>
+                })
+              }
+          </Stack>
         </Callout>
       }
-
     </div>
   );
 };
 
 const theme = getTheme();
 const contentClass = mergeStyles([
   {
+    alignItems: 'center',
     backgroundColor: theme.palette.themeDark,
     color: theme.palette.white,
-    lineHeight: '30px',
+    lineHeight: '25px',
     padding: '0 20px',
   },
-  AnimationClassNames.scaleUpIn100,
+  AnimationClassNames.scaleUpIn100
 ]);
 
-
-
-const calloutKeyStyles: React.CSSProperties = {
-  width: 120
-}
-
-const calloutValueStyles: React.CSSProperties = {
-  width: 180
-}
+const iconButtonStyles: Partial<IButtonStyles> = {
+  root: {
+    color: theme.palette.white,
+  },
+  rootHovered: {
+    color: theme.palette.neutralDark,
+  },
+};
 
 const styles = mergeStyleSets({
-  button: {
-    width: 130,
-  },
   callout: {
-    width: 350,
+    width: 250,
     padding: '20px 24px',
   },
   title: {
     marginBottom: 12,
     fontWeight: FontWeights.semilight
-  },
-  link: {
-    display: 'block',
-    marginTop: 20,
   }
 });

ui/app/src/components/shared/PowerStateBadge.tsx

@@ -6,15 +6,17 @@ interface PowerStateBadgeProps {
 }
 
 export const PowerStateBadge: React.FunctionComponent<PowerStateBadgeProps> = (props: PowerStateBadgeProps) => {
-
   let stateClass = "tre-power-off";
   if (props.state === VMPowerStates.Running) stateClass = " tre-power-on";
 
   return (
     <>
-      {props.state && <span className="tre-power-badge">
-        <span className={stateClass}></span>{props.state}
-      </span>}
+      {
+        props.state && <span className="tre-power-badge">
+          <span className={stateClass}></span>
+          <small>{props.state.replace('VM ', '')}</small>
+        </span>
+      }
     </>
   );
 };