@gen3/workspaces 0.12.65 → 0.12.67

package/dist/index/esm/index.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useRef, useEffect, createContext, useImperativeHandle, forwardRef } from 'react';
 import { mergeDefaultTailwindClassnames, ACTIVITY_CHANNEL, convertSecondsToMilliseconds, InfoRolloverButton, OverflowTooltippedLabel, PanelErrorBoundary, ProtectedContent, FixedNavPageLayout, ContentSource, getNavPageLayoutPropsFromConfig } from '@gen3/frontend';
-import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, Container, SimpleGrid, LoadingOverlay, Loader, Alert, Select, Divider, ActionIcon, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
+import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, Container, SimpleGrid, LoadingOverlay, Loader, Alert, Select, Divider, ActionIcon, Center, Popover, Accordion, Radio, Progress, TextInput, Textarea, Table, Scroller, Tabs } 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, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
-import { useDeepCompareEffect } from 'use-deep-compare';
+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 { useDeepCompareEffect, useDeepCompareCallback, useDeepCompareMemo } from 'use-deep-compare';
 import { notifications } from '@mantine/notifications';
-import { MdExpandMore, MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
+import { MdExpandMore, MdOpenInNew, MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
+import { FaUser, FaExclamationCircle } from 'react-icons/fa';
 import { IoSettingsSharp } from 'react-icons/io5';
 import { BsFillInfoCircleFill } from 'react-icons/bs';
 import { merge } from 'lodash';
@@ -2425,11 +2426,239 @@ 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 NoPayModel = ()=>{
+    return /*#__PURE__*/ jsx(Group, {
+        className: "p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-16",
+        justify: "space-between",
+        children: /*#__PURE__*/ jsx(Text, {
+            className: "pl-4",
+            size: "md",
+            classNames: {
+                root: 'font-heading text-utility-warning'
+            },
+            children: "No pay model defined"
+        })
+    });
+};
+const CostTracker = ({ workspaceAccountManagerTarget = '' })=>{
+    const { data, isLoading, isFetching, isError, error } = useGetWorkspacePayModelsQuery(undefined, {
+        pollingInterval: 120000,
+        refetchOnMountOrArgChange: true
+    });
+    const [setWorkspacePayModel] = 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
+        setSelectedPayModel(id); // set the paymodel value for the select component
+    }, [
+        setWorkspacePayModel,
+        selectedPayModel
+    ]);
+    const { usersPayModels, workspaceName, hardLimit, totalUsage } = 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__*/ 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
+    ]);
+    if (isLoading && isFetching) return /*#__PURE__*/ jsx("div", {
+        className: "flex justify-center p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-14",
+        children: /*#__PURE__*/ jsx(Loader, {})
+    });
+    if (isError) {
+        if (isNoPayModelError(error)) {
+            return /*#__PURE__*/ jsx(NoPayModel, {});
+        } else return /*#__PURE__*/ jsx(Center, {
+            children: "Unable to get Payment information"
+        });
+    }
+    const ProgressBar = (className = '')=>/*#__PURE__*/ jsx(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__*/ jsxs(Popover, {
+        width: "target",
+        position: "bottom",
+        shadow: "lg",
+        trapFocus: true,
+        opened: opened,
+        onChange: setOpened,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Target, {
+                children: /*#__PURE__*/ jsxs(Button, {
+                    onClick: ()=>setOpened((o)=>!o),
+                    size: "xs",
+                    radius: "xl",
+                    variant: "default",
+                    className: "h-[--badge-height]",
+                    rightSection: /*#__PURE__*/ jsx(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__*/ jsxs("span", {
+                            className: "font-black pl-3 pr-2",
+                            children: [
+                                "$",
+                                PaymentNumberToString(totalUsage)
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            className: "font-normal",
+                            children: [
+                                "/$",
+                                PaymentNumberToString(hardLimit)
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Popover.Dropdown, {
+                className: "px-2",
+                children: [
+                    workspaceAccountManagerTarget && /*#__PURE__*/ jsx(Button, {
+                        component: "a",
+                        href: workspaceAccountManagerTarget,
+                        target: "_blank",
+                        variant: "outline",
+                        leftSection: /*#__PURE__*/ jsx(MdOpenInNew, {
+                            size: "1.1em",
+                            "aria-label": "external"
+                        }),
+                        size: "xs",
+                        className: "w-full mb-4",
+                        children: "Workspace Account Manager"
+                    }),
+                    /*#__PURE__*/ jsxs(Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: [
+                            "Limit ",
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "font-black pl-1",
+                                children: [
+                                    "$",
+                                    PaymentNumberToString(hardLimit)
+                                ]
+                            })
+                        ]
+                    }),
+                    ProgressBar('mx-2'),
+                    /*#__PURE__*/ jsx(Divider, {
+                        my: "sm"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        className: "uppercase pb-2 px-2",
+                        children: "Account & Charges"
+                    }),
+                    /*#__PURE__*/ jsx(Accordion, {
+                        variant: "unstyled",
+                        classNames: {
+                            root: '',
+                            control: 'p-0 px-2',
+                            label: 'p-0',
+                            chevron: 'text-accent',
+                            panel: 'p-0',
+                            content: 'p-0'
+                        },
+                        children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                            value: "accountInformation",
+                            children: [
+                                /*#__PURE__*/ jsx(Accordion.Control, {
+                                    children: /*#__PURE__*/ jsxs(Text, {
+                                        size: "sm",
+                                        className: "font-black",
+                                        children: [
+                                            workspaceName,
+                                            " - $",
+                                            PaymentNumberToString(totalUsage)
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Accordion.Panel, {
+                                    children: /*#__PURE__*/ jsx(Radio.Group, {
+                                        className: "pt-2",
+                                        children: usersPayModels.map((obj)=>/*#__PURE__*/ jsx(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__*/ jsxs(Group, {
+                                                    wrap: "nowrap",
+                                                    align: "flex-start",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Text, {
+                                                            size: "sm",
+                                                            className: "grow",
+                                                            children: obj.label
+                                                        }),
+                                                        /*#__PURE__*/ jsxs(Text, {
+                                                            size: "sm",
+                                                            children: [
+                                                                "$",
+                                                                PaymentNumberToString(obj.totalUsage)
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Radio.Indicator, {
+                                                            color: "accent"
+                                                        })
+                                                    ]
+                                                })
+                                            }, obj.value))
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 const WorkspaceToolbar = /*#__PURE__*/ forwardRef(({ toolbarConfiguration }, ref)=>{
     const workspaceTier = useCoreSelector((state)=>selectWorkspaceTier(state));
     const workspaceStatus = useCoreSelector((state)=>selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = useCoreSelector((state)=>selectWorkspaceFullscreen(state));
-    const { showStatus, showStop, tierLabel } = toolbarConfiguration || {};
+    const { showStatus, showStop, tierLabel, requirePayModel, workspaceAccountManagerTarget } = toolbarConfiguration || {};
     const coreDispatch = useCoreDispatch();
     const toggleFullscreen = useCallback(()=>{
         coreDispatch(setWorkspaceFullscreen(!isFullscreen));
@@ -2484,6 +2713,9 @@ const WorkspaceToolbar = /*#__PURE__*/ forwardRef(({ toolbarConfiguration }, ref
                                     /*#__PURE__*/ jsx(Badge, {
                                         "aria-label": `Workspace tier: ${tierLabel ?? workspaceTier}`,
                                         children: tierLabel ?? workspaceTier
+                                    }),
+                                    requirePayModel && /*#__PURE__*/ jsx(CostTracker, {
+                                        workspaceAccountManagerTarget: workspaceAccountManagerTarget
                                     })
                                 ]
                             })