Billing - fixing styling issues after the first Billing release

db/python/layers/billing_db.py

@@ -84,6 +84,8 @@ async def get_topics(self):
         WHERE day > TIMESTAMP_ADD(
             CURRENT_TIMESTAMP(), INTERVAL @days DAY
         )
+        -- TODO put this back when reloading is fixed
+        AND NOT topic IN ('seqr', 'hail')
         ORDER BY topic ASC;
         """
 
@@ -794,6 +796,7 @@ async def get_running_cost(
             BillingColumn.TOPIC,
             BillingColumn.PROJECT,
             BillingColumn.DATASET,
+            BillingColumn.STAGE,
             BillingColumn.COMPUTE_CATEGORY,
             BillingColumn.WDL_TASK_NAME,
             BillingColumn.CROMWELL_SUB_WORKFLOW_NAME,

web/src/index.css

@@ -200,3 +200,44 @@ html[data-theme='dark-mode'] .ui.table {
 [class^='language-'] {
     border: none;
 }
+
+#group-by-dropdown .menu {
+    background: #ffffff !important;
+}
+
+.field-selector-label {
+    width: 200px !important;
+}
+
+.field-selector-dropdown {
+    width: 80% !important;
+}
+
+.donut-chart {
+    margin-top: 20px;
+}
+
+/* missing styles regarding dark/light theme */
+.ui.fluid.card {
+    color: var(--color-text-primary);
+    background: var(--color-bg);
+    fill: var(--color-text-primary);
+}
+
+.ui.header {
+    color: var(--color-text-primary);
+}
+
+.ui.input > input {
+    color: var(--color-text-primary);
+    background: var(--color-bg-card);
+}
+
+.ui.toggle.checkbox label {
+    color: var(--color-text-primary);
+}
+
+.ui.toggle.checkbox input:checked ~ .box,
+.ui.toggle.checkbox input:checked ~ label {
+    color: var(--color-text-primary) !important;
+}

web/src/pages/billing/BillingCostByTime.tsx

@@ -230,6 +230,7 @@ const BillingCostByTime: React.FunctionComponent = () => {
                             fieldName="Group"
                             onClickFunction={onGroupBySelect}
                             selected={groupBy}
+                            autoSelect={false}
                         />
                     </Grid.Column>
 
@@ -240,6 +241,7 @@ const BillingCostByTime: React.FunctionComponent = () => {
                             onClickFunction={onSelect}
                             selected={selectedData}
                             includeAll={true}
+                            autoSelect={true}
                         />
                     </Grid.Column>
                 </Grid>

web/src/pages/billing/BillingInvoiceMonthCost.tsx

@@ -2,14 +2,10 @@ import * as React from 'react'
 import { Link, useSearchParams, useNavigate, useLocation } from 'react-router-dom'
 import { Table as SUITable, Message, Button, Checkbox, Dropdown, Grid } from 'semantic-ui-react'
 import _ from 'lodash'
-
 import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
 import Table from '../../shared/components/Table'
 import { BillingApi, BillingColumn, BillingCostBudgetRecord } from '../../sm-api'
-
-import './Billing.css'
 import FieldSelector from './components/FieldSelector'
-
 import { convertFieldName } from '../../shared/utilities/fieldName'
 
 const BillingCurrentCost = () => {
@@ -56,7 +52,7 @@ const BillingCurrentCost = () => {
     const [lastLoadedDay, setLastLoadedDay] = React.useState<string>()
 
     const getCosts = (grp: BillingColumn, invoiceMth: string | undefined) => {
-        updateNav(groupBy, invoiceMth)
+        updateNav(grp, invoiceMth)
         setIsLoading(true)
         setError(undefined)
         let source = 'aggregate'

web/src/pages/billing/components/FieldSelector.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react'
-
 import { Dropdown, Input, Message } from 'semantic-ui-react'
-
 import { BillingApi, BillingColumn } from '../../../sm-api'
-
-import '../Billing.css'
-
 import { convertFieldName } from '../../../shared/utilities/fieldName'
 
 interface FieldSelectorProps {
     label: string
     fieldName: string
     selected?: string
     includeAll?: boolean
+    autoSelect?: boolean
     onClickFunction: (_: any, { value }: any) => void
 }
 
@@ -21,20 +17,28 @@ const FieldSelector: React.FunctionComponent<FieldSelectorProps> = ({
     fieldName,
     selected,
     includeAll,
+    autoSelect,
     onClickFunction,
 }) => {
     const [loading, setLoading] = React.useState<boolean>(true)
     const [error, setError] = React.useState<string | undefined>()
     const [records, setRecords] = React.useState<string[]>([])
 
-    const extendRecords = (records: string[]) => {
+    const extendRecords = (recs: string[]) => {
         if (includeAll) {
-            if (fieldName === 'GCP-Project') {
-                return [`All ${convertFieldName(fieldName)}`, ...records]
-            }
-            return [`All ${convertFieldName(fieldName)}s`, ...records]
+            return [`All ${convertFieldName(fieldName)}s`, ...recs]
+        }
+        return recs
+    }
+
+    const processResponse = (response_data: string[]) => {
+        setLoading(false)
+        const extRecords = extendRecords(response_data)
+        setRecords(extRecords)
+        if (!selected && autoSelect) {
+            // set the first option as the default
+            onClickFunction(undefined, { value: extRecords[0] })
         }
-        return records
     }
 
     const getTopics = () => {
@@ -43,8 +47,7 @@ const FieldSelector: React.FunctionComponent<FieldSelectorProps> = ({
         new BillingApi()
             .getTopics()
             .then((response) => {
-                setLoading(false)
-                setRecords(extendRecords(response.data))
+                processResponse(response.data)
             })
             .catch((er) => setError(er.message))
     }
@@ -55,8 +58,7 @@ const FieldSelector: React.FunctionComponent<FieldSelectorProps> = ({
         new BillingApi()
             .getGcpProjects()
             .then((response) => {
-                setLoading(false)
-                setRecords(extendRecords(response.data))
+                processResponse(response.data)
             })
             .catch((er) => setError(er.message))
     }
@@ -67,23 +69,34 @@ const FieldSelector: React.FunctionComponent<FieldSelectorProps> = ({
         new BillingApi()
             .getInvoiceMonths()
             .then((response) => {
-                setLoading(false)
-                setRecords(extendRecords(response.data))
+                processResponse(response.data)
+            })
+            .catch((er) => setError(er.message))
+    }
+
+    const getStages = () => {
+        setLoading(true)
+        setError(undefined)
+        new BillingApi()
+            .getStages()
+            .then((response) => {
+                processResponse(response.data)
             })
             .catch((er) => setError(er.message))
     }
 
     React.useEffect(() => {
         if (fieldName === BillingColumn.Topic) getTopics()
+        else if (fieldName === BillingColumn.GcpProject) getGcpProjects()
         else if (fieldName === BillingColumn.InvoiceMonth) getInvoiceMonths()
+        else if (fieldName === BillingColumn.Stage) getStages()
         else if (fieldName === 'Group') {
-            setRecords([BillingColumn.GcpProject, BillingColumn.Topic])
+            setRecords([BillingColumn.GcpProject, BillingColumn.Topic, BillingColumn.Stage])
             setLoading(false)
-        } else if (fieldName === BillingColumn.GcpProject) getGcpProjects()
-        else {
+        } else {
             setError(`Could not load records for ${fieldName}`)
         }
-    }, [label, fieldName])
+    }, [fieldName])
 
     const capitalize = (str: string): string => {
         if (str === 'gcp_project') {