@gen3/workspaces 0.12.78 → 0.12.80

package/dist/index/esm/index.js

@@ -4,7 +4,7 @@ import { mergeDefaultTailwindClassnames, ACTIVITY_CHANNEL, convertSecondsToMilli
 import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, Container, SimpleGrid, LoadingOverlay, Loader, Alert, Select, Divider, ActionIcon, Popover, Accordion, Radio, Progress, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
 import { Icon } from '@iconify-icon/react';
 import { useInterval, useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
-import { GEN3_API, GEN3_WORKSPACE_API, gen3Api, useCoreSelector, selectJEGActiveWorkspaceStatus, useCoreDispatch, setJEGActiveWorkspaceStatus, WorkspaceStatus, setJEGRequestedWorkspaceStatus, RequestedWorkspaceStatus, setJEGActiveWorkspaceId, isFetchBaseQueryError, selectJEGRequestedWorkspaceStatus, selectJEGRequestedWorkspaceStatusTimestamp, isTimeGreaterThan, formatUptimeInMinutes, selectJEGKernelIds, removeManyJEGActiveKernels, upsertManyJEGActiveKernels, normalizeRtkError, selectAllJEGKernels, addJEGActiveKernel, selectWorkspaceTier, setWorkspaceTier, useGetWorkspacePayModelsQuery, useSetCurrentPayModelMutation, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
+import { GEN3_API, GEN3_WORKSPACE_API, gen3Api, useCoreSelector, selectJEGActiveWorkspaceStatus, useCoreDispatch, setJEGActiveWorkspaceStatus, WorkspaceStatus, setJEGRequestedWorkspaceStatus, RequestedWorkspaceStatus, setJEGActiveWorkspaceId, isFetchBaseQueryError, selectJEGRequestedWorkspaceStatus, selectJEGRequestedWorkspaceStatusTimestamp, isTimeGreaterThan, formatUptimeInMinutes, selectJEGKernelIds, removeManyJEGActiveKernels, upsertManyJEGActiveKernels, normalizeRtkError, selectAllJEGKernels, addJEGActiveKernel, selectWorkspaceTier, setWorkspaceTier, useGetWorkspacePayModelsQuery, useGetActivePayModelQuery, useSetCurrentPayModelMutation, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
 import { useDeepCompareEffect, useDeepCompareCallback, useDeepCompareMemo } from 'use-deep-compare';
 import { notifications } from '@mantine/notifications';
 import { MdExpandMore, MdOpenInNew, MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
@@ -2426,30 +2426,66 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
     });
 };
 
-const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
+// TODO rework once requirements are made
+const usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+});
+const paymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
     if (typeof x !== 'number' || Number.isNaN(x)) return undefinedValue;
-    return x.toFixed(precision);
+    return usdFormatter.format(x);
 };
 const isNoPayModelError = (error)=>{
     return 'status' in error && error.status === 'PARSING_ERROR' && error.originalStatus === 404;
 };
 const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
-    const { data, isLoading, isFetching, isError, error } = useGetWorkspacePayModelsQuery(undefined, {
+    const { data, isLoading, isFetching, isError, error, isSuccess } = useGetWorkspacePayModelsQuery(undefined, {
         pollingInterval: 120000,
         refetchOnMountOrArgChange: true
     });
-    const [setWorkspacePayModel] = useSetCurrentPayModelMutation();
+    const { data: currentPaymodelData, isFetching: isCurrentPayModelFetching } = useGetActivePayModelQuery();
+    const [setWorkspacePayModel, result] = useSetCurrentPayModelMutation();
     const [selectedPayModel, setSelectedPayModel] = useState(null);
     const [opened, setOpened] = useState(false);
-    useDeepCompareCallback((id)=>{
-        void setWorkspacePayModel(id); // triggers the call to the service to select the pay model
+    const setPayModel = useDeepCompareCallback((id)=>{
+        void setWorkspacePayModel(id).unwrap(); // triggers the call to the service to select the pay model
         setSelectedPayModel(id); // set the paymodel value for the select component
     }, [
         setWorkspacePayModel,
         selectedPayModel
     ]);
     const { usersPayModels, workspaceName, hardLimit, totalUsage } = useDeepCompareMemo(()=>{
-        if (!(data && data.currentPayModel !== null)) {
+        if (isSuccess && data) {
+            const usersPayModels = data?.allPayModels.map((payModel)=>{
+                return {
+                    value: payModel.bmh_workspace_id ?? payModel.workspace_type,
+                    label: payModel.workspace_type,
+                    totalUsage: payModel['total-usage'],
+                    currentPayModel: payModel.current_pay_model ?? null,
+                    icon: payModel.request_status === 'active' ? /*#__PURE__*/ jsx(FaUser, {}) : /*#__PURE__*/ jsx(FaExclamationCircle, {})
+                };
+            });
+            let currentPayModel = null;
+            if (data?.currentPayModel) {
+                currentPayModel = data?.currentPayModel.bmh_workspace_id ?? data?.currentPayModel.workspace_type;
+            }
+            setSelectedPayModel(currentPayModel);
+            let workspaceName = 'Not Set';
+            let totalUsage = undefined;
+            let hardLimit = undefined;
+            if (data.currentPayModel !== null) {
+                workspaceName = data.currentPayModel.bmh_workspace_id.length > 0 ? data.currentPayModel.bmh_workspace_id : data.currentPayModel.workspace_type;
+                totalUsage = data.currentPayModel?.['total-usage'];
+                hardLimit = data.currentPayModel?.['hard-limit'];
+            }
+            return {
+                usersPayModels,
+                workspaceName,
+                selectedPayModel,
+                totalUsage,
+                hardLimit
+            };
+        } else {
             return {
                 usersPayModels: [],
                 selectedPayModel: [],
@@ -2458,22 +2494,6 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
                 hardLimit: undefined
             };
         }
-        const usersPayModels = data.allPayModels.map((payModel)=>{
-            return {
-                value: payModel.bmh_workspace_id ?? payModel.workspace_type,
-                label: payModel.workspace_type,
-                totalUsage: payModel['total-usage'],
-                currentPayModel: payModel['current_pay_model'],
-                icon: payModel.request_status === 'active' ? /*#__PURE__*/ jsx(FaUser, {}) : /*#__PURE__*/ jsx(FaExclamationCircle, {})
-            };
-        });
-        setSelectedPayModel(data.currentPayModel.bmh_workspace_id ?? data.currentPayModel.workspace_type);
-        return {
-            usersPayModels,
-            workspaceName: data.currentPayModel.bmh_workspace_id.length > 0 ? data.currentPayModel.bmh_workspace_id : data.currentPayModel.workspace_type,
-            totalUsage: data.currentPayModel['total-usage'],
-            hardLimit: data.currentPayModel['hard-limit']
-        };
     }, [
         data
     ]);
@@ -2553,8 +2573,8 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
             size: "sm",
             radius: "xl",
             "aria-label": "Monthly Workflow Limit",
-            value: !hardLimit ? 100 : hardLimit / totalUsage * 100,
-            color: !hardLimit || totalUsage >= hardLimit ? 'red.5' : 'green.1',
+            value: !hardLimit || !totalUsage ? 100 : hardLimit / totalUsage * 100,
+            color: !hardLimit || totalUsage && totalUsage >= hardLimit ? 'red.5' : 'green.1',
             className: className
         });
     return /*#__PURE__*/ jsxs(Popover, {
@@ -2583,18 +2603,15 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
                     }),
                     children: [
                         ProgressBar('w-[110px]'),
-                        /*#__PURE__*/ jsxs("span", {
-                            className: "font-black pl-3 pr-2",
-                            children: [
-                                "$",
-                                PaymentNumberToString(totalUsage)
-                            ]
+                        /*#__PURE__*/ jsx("span", {
+                            className: "font-black pl-3 pr-1",
+                            children: paymentNumberToString(totalUsage)
                         }),
                         /*#__PURE__*/ jsxs("span", {
                             className: "font-normal",
                             children: [
-                                "/$",
-                                PaymentNumberToString(hardLimit)
+                                "/",
+                                paymentNumberToString(hardLimit)
                             ]
                         })
                     ]
@@ -2620,13 +2637,11 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
                         size: "sm",
                         className: "uppercase pb-2 px-2",
                         children: [
-                            "Limit ",
-                            /*#__PURE__*/ jsxs("span", {
+                            "Limit",
+                            ' ',
+                            /*#__PURE__*/ jsx("span", {
                                 className: "font-black pl-1",
-                                children: [
-                                    "$",
-                                    PaymentNumberToString(hardLimit)
-                                ]
+                                children: paymentNumberToString(hardLimit)
                             })
                         ]
                     }),
@@ -2653,22 +2668,19 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
                             value: "accountInformation",
                             children: [
                                 /*#__PURE__*/ jsx(Accordion.Control, {
-                                    children: /*#__PURE__*/ jsxs(Text, {
+                                    children: /*#__PURE__*/ jsx(Text, {
                                         size: "sm",
                                         className: "font-black",
-                                        children: [
-                                            workspaceName,
-                                            " - $",
-                                            PaymentNumberToString(totalUsage)
-                                        ]
+                                        children: `${workspaceName} - ${paymentNumberToString(totalUsage)}`
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(Accordion.Panel, {
                                     children: /*#__PURE__*/ jsx(Radio.Group, {
                                         className: "pt-2",
+                                        onChange: setPayModel,
+                                        value: selectedPayModel,
                                         children: usersPayModels.map((obj)=>/*#__PURE__*/ jsx(Radio.Card, {
-                                                checked: obj.currentPayModel,
-                                                disabled: true,
+                                                value: obj.value,
                                                 className: "p-2 border-none data-checked:bg-primary-lightest data-checked:border-primary-darker data-checked:font-black hover:bg-primary-max ",
                                                 children: /*#__PURE__*/ jsxs(Group, {
                                                     wrap: "nowrap",
@@ -2679,12 +2691,9 @@ const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
                                                             className: "grow",
                                                             children: obj.label
                                                         }),
-                                                        /*#__PURE__*/ jsxs(Text, {
+                                                        /*#__PURE__*/ jsx(Text, {
                                                             size: "sm",
-                                                            children: [
-                                                                "$",
-                                                                PaymentNumberToString(obj.totalUsage)
-                                                            ]
+                                                            children: `${paymentNumberToString(obj.totalUsage)}`
                                                         }),
                                                         /*#__PURE__*/ jsx(Radio.Indicator, {
                                                             color: "accent"
@@ -4487,5 +4496,5 @@ const WorkspacesCenterPageGetServerSideProps = async ()=>{
     }
 };
 
-export { WorkspacesCenterPage, WorkspacesCenterPageGetServerSideProps };
+export { CostTracker, WorkspacesCenterPage, WorkspacesCenterPageGetServerSideProps };
 //# sourceMappingURL=index.js.map