Add Billing Page - CostByMonth - summary of topic per invoice month. #696
Conversation
|
Hey @illusional this is a simple page, as some stage we might want to add maybe sorting and export to csv. |
| <div> | ||
| <LoadingDucks /> | ||
| <p style={{ textAlign: 'center', marginTop: '5px' }}> | ||
| <em>This query takes a while...</em> |
There was a problem hiding this comment.
A bit nitpicky, but if this query doesn't take a while, we shouldn't add it (< 10 seconds)
There was a problem hiding this comment.
Well it can take longer, depending how many months you select. I would keep it there.
| if ( | ||
| start !== undefined && | ||
| start !== '' && | ||
| start !== null && | ||
| end !== undefined && | ||
| end !== '' && | ||
| end !== null | ||
| ) { |
There was a problem hiding this comment.
Maybe define a noValue method, or just use Javascript's falsey values: https://www.freecodecamp.org/news/what-are-falsey-values-in-javascript/#the-six-falsy-values-in-javascript
| if ( | |
| start !== undefined && | |
| start !== '' && | |
| start !== null && | |
| end !== undefined && | |
| end !== '' && | |
| end !== null | |
| ) { | |
| if (!!start && !!end) { |
There was a problem hiding this comment.
Great ide! Boolean(start) && Boolean(end) works like a charm here.
| <Input | ||
| label="Start" | ||
| fluid | ||
| type="date" |
There was a problem hiding this comment.
IMO this should be invoice months, probably by a select input, and just generate all those since a hardcoded June 2020 (or whenever the start of billing is).
There was a problem hiding this comment.
Well I would need to create a new component as input can be only "date", "month" is not supported.
There was a problem hiding this comment.
Maybe a select component (dropdown list)?
| const [searchParams] = useSearchParams() | ||
|
|
||
| const [start, setStart] = React.useState<string>( | ||
| searchParams.get('start') ?? getMonthStartDate() |
There was a problem hiding this comment.
Can this be start of year?
There was a problem hiding this comment.
Changed that to fixed 202201 - > 202301 as per slack chat.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## dev #696 +/- ##
==========================================
- Coverage 76.50% 76.50% -0.01%
==========================================
Files 143 143
Lines 11502 11504 +2
==========================================
+ Hits 8800 8801 +1
- Misses 2702 2703 +1 ☔ View full report in Codecov by Sentry. |
| searchParams.get('start') ?? getMonthStartDate() | ||
| ) | ||
| const [end, setEnd] = React.useState<string>(searchParams.get('end') ?? getMonthEndDate()) | ||
| const [start, setStart] = React.useState<string>(searchParams.get('start') ?? '2022-01-01') |
There was a problem hiding this comment.
Can we use the start / end of the current year? No stress if this was just a testing value
| start_date: start, | ||
| end_date: end, | ||
| start_date: getAdjustedDay(convertInvoiceMonth(start, true), -2), | ||
| end_date: getAdjustedDay(convertInvoiceMonth(end, false), 2), |
There was a problem hiding this comment.
For good measure haha
| end_date: getAdjustedDay(convertInvoiceMonth(end, false), 2), | |
| end_date: getAdjustedDay(convertInvoiceMonth(end, false), 3), |
| ].join('-') | ||
| } | ||
|
|
||
| const getCurrentInvoiceMonth = () => { |
There was a problem hiding this comment.
Some type annotations missing year + next function
| const currentDate = new Date(`${yearString}-${monthString}-01`) | ||
| if (currentDate >= dateStart && currentDate <= dateEnd) { |
There was a problem hiding this comment.
These are redundant right? The for loops should cover this pretty okay
…test_subset script when using 3.11
New Billing page to replace the Google spreadsheet with summary of Storage / Compute cost per topic per invoice month.