@gen3/workspaces 0.12.66 → 0.12.68

package/dist/index/cjs/index.js

@@ -10,6 +10,7 @@ var core$1 = require('@gen3/core');
 var useDeepCompare = require('use-deep-compare');
 var notifications = require('@mantine/notifications');
 var md = require('react-icons/md');
+var fa = require('react-icons/fa');
 var io5 = require('react-icons/io5');
 var bs = require('react-icons/bs');
 var lodash = require('lodash');
@@ -2427,11 +2428,286 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
     });
 };
 
+const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
+    if (typeof x !== 'number' || Number.isNaN(x)) return undefinedValue;
+    return x.toFixed(precision);
+};
+const isNoPayModelError = (error)=>{
+    return 'status' in error && error.status === 'PARSING_ERROR' && error.originalStatus === 404;
+};
+const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
+    const { data, isLoading, isFetching, isError, error } = core$1.useGetWorkspacePayModelsQuery(undefined, {
+        pollingInterval: 120000,
+        refetchOnMountOrArgChange: true
+    });
+    const [setWorkspacePayModel] = core$1.useSetCurrentPayModelMutation();
+    const [selectedPayModel, setSelectedPayModel] = React.useState(null);
+    const [opened, setOpened] = React.useState(false);
+    useDeepCompare.useDeepCompareCallback((id)=>{
+        void setWorkspacePayModel(id); // 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 } = useDeepCompare.useDeepCompareMemo(()=>{
+        if (!data) return {
+            usersPayModels: [],
+            selectedPayModel: [],
+            workspaceName: 'Not Set',
+            totalUsage: undefined,
+            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__*/ jsxRuntime.jsx(fa.FaUser, {}) : /*#__PURE__*/ jsxRuntime.jsx(fa.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
+    ]);
+    if (isLoading && isFetching) return /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
+        leftSection: /*#__PURE__*/ jsxRuntime.jsx(core.Loader, {
+            size: "xs",
+            type: "dots",
+            className: "m-1"
+        }),
+        variant: "default",
+        children: "Loading..."
+    });
+    const PayModelError = (message)=>{
+        // dropdown error state to provide user access to Account Manager if available
+        if (workspaceAccountManagerTarget) {
+            return /*#__PURE__*/ jsxRuntime.jsxs(core.Popover, {
+                width: "target",
+                position: "bottom",
+                shadow: "lg",
+                trapFocus: true,
+                opened: opened,
+                onChange: setOpened,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Popover.Target, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core.Button, {
+                            onClick: ()=>setOpened((o)=>!o),
+                            size: "xs",
+                            radius: "xl",
+                            className: "h-[--badge-height] uppercase",
+                            color: "utility.3",
+                            rightSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdExpandMore, {
+                                size: "1.5em",
+                                "aria-label": opened ? 'close' : 'open',
+                                style: {
+                                    transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    transition: 'transform 200ms ease'
+                                }
+                            }),
+                            children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "font-black",
+                                children: message
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Popover.Dropdown, {
+                        className: "px-2",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core.Button, {
+                            component: "a",
+                            href: workspaceAccountManagerTarget,
+                            target: "_blank",
+                            variant: "outline",
+                            leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdOpenInNew, {
+                                size: "1.1em",
+                                "aria-label": "external"
+                            }),
+                            size: "xs",
+                            className: "w-full",
+                            children: "Workspace Account Manager"
+                        })
+                    })
+                ]
+            });
+        }
+        return /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
+            color: "utility.3",
+            children: message
+        });
+    };
+    if (isError) {
+        if (isNoPayModelError(error)) {
+            return PayModelError('No pay model defined');
+        } else {
+            return PayModelError('Unable to get Payment information');
+        }
+    }
+    const ProgressBar = (className = '')=>/*#__PURE__*/ jsxRuntime.jsx(core.Progress, {
+            size: "sm",
+            radius: "xl",
+            "aria-label": "Monthly Workflow Limit",
+            value: !hardLimit ? 100 : hardLimit / totalUsage * 100,
+            color: !hardLimit || totalUsage >= hardLimit ? 'red.5' : 'green.1',
+            className: className
+        });
+    return /*#__PURE__*/ jsxRuntime.jsxs(core.Popover, {
+        width: "target",
+        position: "bottom",
+        shadow: "lg",
+        trapFocus: true,
+        opened: opened,
+        onChange: setOpened,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core.Popover.Target, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core.Button, {
+                    onClick: ()=>setOpened((o)=>!o),
+                    size: "xs",
+                    radius: "xl",
+                    variant: "default",
+                    className: "h-[--badge-height]",
+                    rightSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdExpandMore, {
+                        className: "text-accent",
+                        size: "1.5em",
+                        "aria-label": opened ? 'close' : 'open',
+                        style: {
+                            transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
+                            transition: 'transform 200ms ease'
+                        }
+                    }),
+                    children: [
+                        ProgressBar('w-[110px]'),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            className: "font-black pl-3 pr-2",
+                            children: [
+                                "$",
+                                PaymentNumberToString(totalUsage)
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            className: "font-normal",
+                            children: [
+                                "/$",
+                                PaymentNumberToString(hardLimit)
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core.Popover.Dropdown, {
+                className: "px-2",
+                children: [
+                    workspaceAccountManagerTarget && /*#__PURE__*/ jsxRuntime.jsx(core.Button, {
+                        component: "a",
+                        href: workspaceAccountManagerTarget,
+                        target: "_blank",
+                        variant: "outline",
+                        leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdOpenInNew, {
+                            size: "1.1em",
+                            "aria-label": "external"
+                        }),
+                        size: "xs",
+                        className: "w-full mb-4",
+                        children: "Workspace Account Manager"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: [
+                            "Limit ",
+                            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                                className: "font-black pl-1",
+                                children: [
+                                    "$",
+                                    PaymentNumberToString(hardLimit)
+                                ]
+                            })
+                        ]
+                    }),
+                    ProgressBar('mx-2'),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Divider, {
+                        my: "sm"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: "Account & Charges"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core.Accordion, {
+                        variant: "unstyled",
+                        classNames: {
+                            root: '',
+                            control: 'p-0 px-2',
+                            label: 'p-0',
+                            chevron: 'text-accent',
+                            panel: 'p-0',
+                            content: 'p-0'
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(core.Accordion.Item, {
+                            value: "accountInformation",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(core.Accordion.Control, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                                        size: "sm",
+                                        className: "font-black",
+                                        children: [
+                                            workspaceName,
+                                            " - $",
+                                            PaymentNumberToString(totalUsage)
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core.Accordion.Panel, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core.Radio.Group, {
+                                        className: "pt-2",
+                                        children: usersPayModels.map((obj)=>/*#__PURE__*/ jsxRuntime.jsx(core.Radio.Card, {
+                                                checked: obj.currentPayModel,
+                                                disabled: true,
+                                                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__*/ jsxRuntime.jsxs(core.Group, {
+                                                    wrap: "nowrap",
+                                                    align: "flex-start",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core.Text, {
+                                                            size: "sm",
+                                                            className: "grow",
+                                                            children: obj.label
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsxs(core.Text, {
+                                                            size: "sm",
+                                                            children: [
+                                                                "$",
+                                                                PaymentNumberToString(obj.totalUsage)
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core.Radio.Indicator, {
+                                                            color: "accent"
+                                                        })
+                                                    ]
+                                                })
+                                            }, obj.value))
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration }, ref)=>{
     const workspaceTier = core$1.useCoreSelector((state)=>core$1.selectWorkspaceTier(state));
     const workspaceStatus = core$1.useCoreSelector((state)=>core$1.selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = core$1.useCoreSelector((state)=>core$1.selectWorkspaceFullscreen(state));
-    const { showStatus, showStop, tierLabel } = toolbarConfiguration || {};
+    const { showStatus, showStop, tierLabel, requirePayModel, workspaceAccountManagerTarget } = toolbarConfiguration || {};
     const coreDispatch = core$1.useCoreDispatch();
     const toggleFullscreen = React.useCallback(()=>{
         coreDispatch(core$1.setWorkspaceFullscreen(!isFullscreen));
@@ -2486,6 +2762,9 @@ const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration
                                     /*#__PURE__*/ jsxRuntime.jsx(core.Badge, {
                                         "aria-label": `Workspace tier: ${tierLabel ?? workspaceTier}`,
                                         children: tierLabel ?? workspaceTier
+                                    }),
+                                    requirePayModel && /*#__PURE__*/ jsxRuntime.jsx(CostTracker, {
+                                        workspaceAccountManagerTarget: workspaceAccountManagerTarget
                                     })
                                 ]
                             })