From d889a41487c1312ed11deb7e88f0214ac057727c Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 7 Oct 2022 14:04:28 +0200
Subject: 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.
---
 .../opendc-web-ui/src/components/AppHeaderUser.js  | 32 +++++++++++++++++-----
 1 file changed, 25 insertions(+), 7 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/AppHeaderUser.js')

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 ? (
-- 
cgit v1.2.3