[refactor] Update UI package to typescript #75
Conversation
- Create components directory - Create store directory - Add TS and config
- update model constructor types - Refactored ui types
|
|
| @@ -0,0 +1,15 @@ | |||
| // SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs | |||
There was a problem hiding this comment.
I would be interested to know if the class would allow generics so that we don't have to do this.
https://www.tutorialsteacher.com/typescript/typescript-generic-class
|
|
||
| import { Section } from "@xk6-dashboard/view" | ||
|
|
||
| export interface Tab { |
There was a problem hiding this comment.
Could @xk6-dashboard/view export the Tab type?
| extra.push(color) | ||
| extra[name] = color |
There was a problem hiding this comment.
I assume this was a mistake since extra is an array
There was a problem hiding this comment.
It was by intention, array may have properties as well, and in this way we can access colors by name. It is a bit hacky, but it started as JavaScript (not TS)... so feel free to refactor...
| width: width, | ||
| height: 250, | ||
| title: panel.title, | ||
| cursor: { sync: { key: sync.key } }, | ||
| legend: { live: false }, | ||
| series: plot.series, | ||
| series: plot.series as Series[], |
There was a problem hiding this comment.
Perhaps we could find a way for SeriesPlot to return the correct type? Type 'object | undefined' is not assignable to type 'Series[]'
| } | ||
|
|
||
| return ( | ||
| <Grid ref={ref} className="chart panel" item md={12} lg={6}> | ||
| <UplotReact options={options} data={plot.data} onCreate={onCreate} /> | ||
| <UplotReact options={options} data={plot.data as AlignedData} onCreate={onCreate} /> |
There was a problem hiding this comment.
Perhaps we could find a way for SeriesPlot to return the correct type? Type '(number | undefined)[][]' is not assignable to type 'AlignedData'.
| width: width, | ||
| height: 32, | ||
| title: value, | ||
| series: plot.series, | ||
| series: plot.series as Series[], |
There was a problem hiding this comment.
Perhaps we could find a way for SeriesPlot to return the correct type? Type 'object | undefined' is not assignable to type 'Series[]'
| @@ -59,12 +67,8 @@ export default function Stat({ panel }) { | |||
| {panel.title} | |||
| </Typography> | |||
| <div ref={ref}> | |||
| <UplotReact options={options} data={plot.data} /> | |||
| <UplotReact options={options} data={plot.data as AlignedData} /> | |||
There was a problem hiding this comment.
Perhaps we could find a way for SeriesPlot to return the correct type? Type '(number | undefined)[][]' is not assignable to type 'AlignedData'.
# Conflicts: # dashboard/assets/packages/ui/dist/assets/index-6b9b59c9.js # dashboard/assets/packages/ui/dist/index.html
…/xk6-dashboard into refactor/update-ui-to-typescript # Conflicts: # dashboard/assets/packages/ui/dist/assets/index-7b45f5e3.js
What?
This PR updates the UI package to use Typescript
Why?
Add type safety
Checklist
go run mage.go lint) and all checks pass.go run mage.go test) and all tests pass.