Fix project selector usage + fail tests on tsc build failure (#847)

* Fix onProjectSelect call * Add tsc to catch compile errors in tests * Fix some errors * Remove TT examples * Fixing typescript check issues. * Linting. * Increasing vite.config.build.chunkSizeWarningLimit to 3000 bytes. * Remove the exit --------- Co-authored-by: Michael Franklin <[email protected]> Co-authored-by: Milo Hyben <[email protected]>
populationgenomics · Jul 1, 2024 · 1162776 · 1162776
1 parent 59848bb
commit 1162776
Show file tree

Hide file tree

Showing 25 changed files with 331 additions and 186 deletions.
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -82,12 +82,22 @@ jobs:
           # installs package-lock, not what it thinks it should be
           npm ci
           npm run build
+          rc=$?
+
+          echo "web_rc=$rc" >> $GITHUB_OUTPUT
           # eventually run web front-end tests
           popd
 
-      - name: Fail if tests are not passing
-        if: ${{ steps.runtests.outputs.rc != 0 }}
+      - name: Fail if unit tests are not passing
+        if: ${{ steps.runtests.outputs.rc != 0}}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            core.setFailed('Unittests failed with rc = ${{ steps.runtests.outputs.rc }}')
+
+      - name: Fail if web build fails
+        if: ${{ steps.runtests.outputs.rc != 0}}
         uses: actions/github-script@v6
         with:
           script: |
-            core.setFailed('Unit tests failed with rc = ${{ steps.runtests.outputs.rc }}')
+            core.setFailed('Web failed to build with rc = ${{ steps.runtests.outputs.web_rc }}')
diff --git a/web/package.json b/web/package.json
@@ -47,7 +47,7 @@
     "scripts": {
         "start": "vite --config vite.config.js",
         "prebuild": "npm run compile",
-        "build": "vite build --config vite.config.js",
+        "build": "tsc && vite build --config vite.config.js",
         "preview": "vite preview --config vite.config.js",
         "postbuild": "npm run copy:buildartifacts",
         "copy:buildartifacts": "rm -rf ../api/public/ && mkdir -p ../api/public && cp -r dist/* ../api/public/",

diff --git a/web/src/pages/billing/BillingCostByAnalysis.tsx b/web/src/pages/billing/BillingCostByAnalysis.tsx
@@ -1,15 +1,14 @@
+import SearchIcon from '@mui/icons-material/Search'
 import * as React from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
-import { Button, Card, Grid, Input, Message, Select, Dropdown } from 'semantic-ui-react'
-import SearchIcon from '@mui/icons-material/Search'
+import { Button, Card, Dropdown, Grid, Input, Message } from 'semantic-ui-react'
 
 import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
-import { BillingApi, AnalysisCostRecord } from '../../sm-api'
+import { AnalysisCostRecord, BillingApi } from '../../sm-api'
 import BatchGrid from './components/BatchGrid'
 
-import { getMonthStartDate } from '../../shared/utilities/monthStartEndDate'
 import generateUrl from '../../shared/utilities/generateUrl'
-import { List } from 'lodash'
+import { getMonthStartDate } from '../../shared/utilities/monthStartEndDate'
 
 enum SearchType {
     Ar_guid,
@@ -35,7 +34,7 @@ const BillingCostByAnalysis: React.FunctionComponent = () => {
         if (!records || records.length === 0) {
             // nothing found
             setIsLoading(false)
-            setData(null)
+            setData(undefined)
             return
         }
         setIsLoading(false)
@@ -56,11 +55,11 @@ const BillingCostByAnalysis: React.FunctionComponent = () => {
     )
 
     // use navigate and update url params
-    const location = useLocation()
+    const loc = useLocation()
     const navigate = useNavigate()
 
     const updateNav = (sType: SearchType, sTxt: string | undefined) => {
-        const url = generateUrl(location, {
+        const url = generateUrl(loc, {
             searchType: SearchType[sType],
             searchTxt: sTxt,
         })

diff --git a/web/src/pages/billing/BillingCostByCategory.tsx b/web/src/pages/billing/BillingCostByCategory.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { Button, Card, Checkbox, Grid, Input, Message } from 'semantic-ui-react'
-import CostByTimeBarChart from './components/CostByTimeBarChart'
-import FieldSelector from './components/FieldSelector'
 import {
     BillingApi,
     BillingColumn,
+    BillingCostBudgetRecord,
+    BillingTimePeriods,
     BillingTotalCostQueryModel,
     BillingTotalCostRecord,
-    BillingTimePeriods,
 } from '../../sm-api'
+import CostByTimeBarChart from './components/CostByTimeBarChart'
+import FieldSelector from './components/FieldSelector'
 
-import { convertFieldName } from '../../shared/utilities/fieldName'
-import { getMonthStartDate, getMonthEndDate } from '../../shared/utilities/monthStartEndDate'
 import { IStackedAreaByDateChartData } from '../../shared/components/Graphs/StackedAreaByDateChart'
+import { convertFieldName } from '../../shared/utilities/fieldName'
 import generateUrl from '../../shared/utilities/generateUrl'
+import { getMonthEndDate, getMonthStartDate } from '../../shared/utilities/monthStartEndDate'
 
 const BillingCostByCategory: React.FunctionComponent = () => {
     const [searchParams] = useSearchParams()
@@ -124,10 +125,12 @@ const BillingCostByCategory: React.FunctionComponent = () => {
                 const recTotals: { [key: string]: number } = {}
                 response.data.forEach((item: BillingTotalCostRecord) => {
                     const { sku, cost } = item
-                    if (!recTotals[sku]) {
-                        recTotals[sku] = 0
+                    // if sku is not a string, set to unknown
+                    const _sku = typeof sku === 'string' ? sku : 'unknown'
+                    if (!(_sku in recTotals)) {
+                        recTotals[_sku] = 0
                     }
-                    recTotals[sku] += cost
+                    recTotals[_sku] += cost
                 })
                 const sortedRecTotals: { [key: string]: number } = Object.fromEntries(
                     Object.entries(recTotals).sort(([, a], [, b]) => b - a)
@@ -176,7 +179,7 @@ const BillingCostByCategory: React.FunctionComponent = () => {
                 end_date: end,
                 filters: selFilters,
                 order_by: { day: false },
-                time_periods: selectedPeriod,
+                time_periods: selectedPeriod as BillingTimePeriods,
                 // show only records with cost > 0.01
                 min_cost: 0.01,
             })

diff --git a/web/src/pages/billing/BillingCostByMonth.tsx b/web/src/pages/billing/BillingCostByMonth.tsx
@@ -1,26 +1,32 @@
 import * as React from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
-import { Button, Card, Grid, Input, Message, Table as SUITable } from 'semantic-ui-react'
+import { Button, Card, Grid, Message } from 'semantic-ui-react'
 import {
     BillingApi,
     BillingColumn,
     BillingSource,
+    BillingTimePeriods,
     BillingTotalCostQueryModel,
     BillingTotalCostRecord,
 } from '../../sm-api'
 
+import { IStackedAreaByDateChartData } from '../../shared/components/Graphs/StackedAreaByDateChart'
+import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
 import {
-    getAdjustedDay,
     generateInvoiceMonths,
+    getAdjustedDay,
     getCurrentInvoiceMonth,
     getCurrentInvoiceYearStart,
 } from '../../shared/utilities/formatDates'
-import { IStackedAreaByDateChartData } from '../../shared/components/Graphs/StackedAreaByDateChart'
-import BillingCostByMonthTable from './components/BillingCostByMonthTable'
-import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
 import generateUrl from '../../shared/utilities/generateUrl'
+import BillingCostByMonthTable from './components/BillingCostByMonthTable'
 import FieldSelector from './components/FieldSelector'
 
+enum CloudSpendCategory {
+    STORAGE_COST = 'Storage Cost',
+    COMPUTE_COST = 'Compute Cost',
+}
+
 const BillingCostByTime: React.FunctionComponent = () => {
     const [searchParams] = useSearchParams()
 
@@ -36,7 +42,7 @@ const BillingCostByTime: React.FunctionComponent = () => {
     const [error, setError] = React.useState<string | undefined>()
     const [message, setMessage] = React.useState<string | undefined>()
     const [months, setMonths] = React.useState<string[]>([])
-    const [data, setData] = React.useState<IStackedAreaByDateChartData[]>([])
+    const [data, setData] = React.useState<any>([])
 
     // use navigate and update url params
     const location = useLocation()
@@ -69,11 +75,11 @@ const BillingCostByTime: React.FunctionComponent = () => {
         return `${year}-${month}-${lastDay}`
     }
 
-    const convertCostCategory = (costCategory: string) => {
-        if (costCategory.startsWith('Cloud Storage')) {
-            return 'Storage Cost'
+    const convertCostCategory = (costCategory: string | null | undefined) => {
+        if (costCategory?.startsWith('Cloud Storage')) {
+            return CloudSpendCategory.STORAGE_COST
         }
-        return 'Compute Cost'
+        return CloudSpendCategory.COMPUTE_COST
     }
 
     const getData = (query: BillingTotalCostQueryModel) => {
@@ -86,25 +92,43 @@ const BillingCostByTime: React.FunctionComponent = () => {
                 setIsLoading(false)
 
                 // calc totals per topic, month and category
-                const recTotals: { [key: string]: { [key: string]: number } } = {}
+                interface RecTotals {
+                    [topic: string]: {
+                        [day: string]: {
+                            [category in CloudSpendCategory]?: number
+                        }
+                    }
+                }
+                const recTotals: RecTotals = {}
                 const recMonths: string[] = []
 
                 response.data.forEach((item: BillingTotalCostRecord) => {
                     const { day, cost_category, topic, cost } = item
                     const ccat = convertCostCategory(cost_category)
+                    const _topic = topic || ''
+                    if (!day) return
                     if (recMonths.indexOf(day) === -1) {
                         recMonths.push(day)
                     }
-                    if (!recTotals[topic]) {
-                        recTotals[topic] = {}
+                    if (!recTotals[_topic]) {
+                        recTotals[_topic] = {}
+                    }
+                    if (!recTotals[_topic][day]) {
+                        recTotals[_topic][day] = {}
+                    }
+                    if (!recTotals[_topic][day][ccat]) {
+                        recTotals[_topic][day][ccat] = 0
                     }
-                    if (!recTotals[topic][day]) {
-                        recTotals[topic][day] = {}
+                    // Ensure recTotals[_topic] is initialized
+                    if (!recTotals[_topic]) {
+                        recTotals[_topic] = {}
                     }
-                    if (!recTotals[topic][day][ccat]) {
-                        recTotals[topic][day][ccat] = 0
+                    // Ensure recTotals[_topic][day] is initialized
+                    if (!recTotals[_topic][day]) {
+                        recTotals[_topic][day] = {}
                     }
-                    recTotals[topic][day][ccat] += cost
+                    // Ensure recTotals[_topic][day][ccat] is initialized and add cost
+                    recTotals[_topic][day][ccat] = (recTotals[_topic][day][ccat] || 0) + cost
                 })
 
                 setMonths(recMonths)
@@ -198,7 +222,7 @@ const BillingCostByTime: React.FunctionComponent = () => {
                 end_date: getAdjustedDay(convertInvoiceMonth(end, false), 3),
                 order_by: { day: false },
                 source: BillingSource.Aggregate,
-                time_periods: 'invoice_month',
+                time_periods: BillingTimePeriods.InvoiceMonth,
                 filters: {
                     invoice_month: generateInvoiceMonths(start, end),
                 },

diff --git a/web/src/pages/billing/BillingCostByTime.tsx b/web/src/pages/billing/BillingCostByTime.tsx
@@ -102,10 +102,12 @@ const BillingCostByTime: React.FunctionComponent = () => {
                 const recTotals: { [key: string]: number } = {}
                 response.data.forEach((item: BillingTotalCostRecord) => {
                     const { cost_category, cost } = item
-                    if (!recTotals[cost_category]) {
-                        recTotals[cost_category] = 0
+                    if (cost_category !== undefined && cost_category !== null) {
+                        if (!recTotals[cost_category]) {
+                            recTotals[cost_category] = 0
+                        }
+                        recTotals[cost_category] += cost
                     }
-                    recTotals[cost_category] += cost
                 })
                 const sortedRecTotals: { [key: string]: number } = Object.fromEntries(
                     Object.entries(recTotals).sort(([, a], [, b]) => b - a)
@@ -114,7 +116,12 @@ const BillingCostByTime: React.FunctionComponent = () => {
                 const records: { [key: string]: { [key: string]: number } } = {}
                 response.data.forEach((item: BillingTotalCostRecord) => {
                     const { day, cost_category, cost } = item
-                    if (day !== undefined) {
+                    if (
+                        day !== undefined &&
+                        day !== null &&
+                        cost_category !== undefined &&
+                        cost_category !== null
+                    ) {
                         if (!records[day]) {
                             // initial day structure
                             records[day] = {}