feat(web/ui): Show monthly simulation budget in UI

This change updates the OpenDC web UI to show the monthly simulation
budget of the user in the user dropdown. This provides the user with a
progress bar of the used simulation minutes.

2 files changed, 25 insertions, 8 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js b/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js
index e271accb..3a73d9ba 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js
@@ -28,26 +28,44 @@ import {
     DropdownItem,
     DropdownGroup,
     Avatar,
+    Progress,
+    ProgressSize,
+    DropdownSeparator,
 } from '@patternfly/react-core'
 import { useReducer } from 'react'
 import { useAuth } from '../auth'
+import useUser from '../data/user'
 
 export default function AppHeaderUser() {
     const { logout, user, isAuthenticated, isLoading } = useAuth()
     const username = isAuthenticated || isLoading ? user?.name : 'Anonymous'
     const avatar = isAuthenticated || isLoading ? user?.picture : '/img/avatar.svg'
 
+    const { data } = useUser()
+    const simulationBudget = data?.accounting?.simulationTimeBudget ?? 3600
+    const simulationTime = data?.accounting?.simulationTime | 0
+
     const [isDropdownOpen, toggleDropdown] = useReducer((t) => !t, false)
     const userDropdownItems = [
-        <DropdownGroup key="group 2">
-            <DropdownItem
-                key="group 2 logout"
-                isDisabled={!isAuthenticated}
-                onClick={() => logout({ returnTo: window.location.origin })}
-            >
-                Logout
+        <DropdownGroup key="budget" label="Monthly Simulation Budget">
+            <DropdownItem isDisabled>
+                <Progress
+                    min={0}
+                    max={simulationBudget}
+                    value={simulationTime}
+                    title={`${Math.ceil(simulationTime / 60)} of ${Math.ceil(simulationBudget / 60)} minutes`}
+                    size={ProgressSize.sm}
+                />
             </DropdownItem>
         </DropdownGroup>,
+        <DropdownSeparator key="separator" />,
+        <DropdownItem
+            key="group 2 logout"
+            isDisabled={!isAuthenticated}
+            onClick={() => logout({ returnTo: window.location.origin })}
+        >
+            Logout
+        </DropdownItem>,
     ]
 
     const avatarComponent = avatar ? (
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
index 8dc52f7a..64218a0a 100644
--- a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
@@ -64,7 +64,6 @@ function ScenarioTable({ portfolio, status }) {
                             ) : (
                                 'Unknown Topology'
                             )}
-                            ,
                         </Td>
                         <Td dataLabel="Workload">{`${scenario.workload.trace.name} (${
                             scenario.workload.samplingFraction * 100