[refactor] Update ui/model types

- update model constructor types
- Refactored ui types

dashboard/assets/packages/model/dist/index.d.ts

@@ -1,7 +1,3 @@
-// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
-//
-// SPDX-License-Identifier: AGPL-3.0-only
-
 declare const enum UnitType {
     bytes = "bytes",
     bps = "bps",
@@ -179,8 +175,8 @@ declare class Digest implements EventListenerObject {
     constructor({ config, param, start, stop, metrics, samples, summary }?: {
         config?: Config | undefined;
         param?: Param | undefined;
-        start?: undefined;
-        stop?: undefined;
+        start?: Date | undefined;
+        stop?: Date | undefined;
         metrics?: Metrics | undefined;
         samples?: Samples | undefined;
         summary?: Summary | undefined;

dashboard/assets/packages/model/dist/index.js

@@ -1,7 +1,3 @@
-// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
-//
-// SPDX-License-Identifier: AGPL-3.0-only
-
 // src/UnitType.ts
 var UnitType = /* @__PURE__ */ ((UnitType2) => {
   UnitType2["bytes"] = "bytes";

dashboard/assets/packages/model/src/Digest.ts

@@ -43,8 +43,8 @@ export class Digest implements EventListenerObject {
   constructor({
     config = {} as Config,
     param = {} as Param,
-    start = undefined,
-    stop = undefined,
+    start = undefined as Date | undefined,
+    stop = undefined as Date | undefined,
     metrics = new Metrics(),
     samples = new Samples(),
     summary = new Summary()

dashboard/assets/packages/ui/.eslintrc.json

@@ -24,5 +24,10 @@
     "prettier/prettier": "error",
     "react/prop-types": 0,
     "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }]
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // React version. "detect" automatically picks the version you have installed.
+    }
   }
 }

dashboard/assets/packages/ui/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+*.md

dashboard/assets/packages/ui/package.json

@@ -6,7 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --emptyOutDir",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:eslint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:format": "prettier --ignore-unknown --check \"./**/*\"",
+    "lint:types": "tsc --noEmit",
+    "lint": "yarn lint:eslint && yarn lint:types && yarn lint:format"
   },
   "dependencies": {
     "@emotion/react": "^11.11.0",

dashboard/assets/packages/ui/src/components/App/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './App'
+export { default } from "./App"

dashboard/assets/packages/ui/src/components/Chart/Chart.tsx

@@ -5,18 +5,19 @@
 import React, { useRef, useState, useLayoutEffect } from "react"
 import { Grid, useTheme } from "@mui/material"
 import "uplot/dist/uPlot.min.css"
-import uPlot, { Options } from "uplot"
+import uPlot, { AlignedData, Options, Series } from "uplot"
 import UplotReact from "uplot-react"
-import { tooltipPlugin, format, dateFormats, SeriesPlot } from "@xk6-dashboard/view"
+import { tooltipPlugin, format, dateFormats, Panel, SeriesPlot } from "@xk6-dashboard/view"
 
+import { ColorParams } from "types/theme"
 import { useDigest } from "store/digest"
 
 import "./Chart.css"
 
 const sync = uPlot.sync("chart")
 
 interface ChartProps {
-  panel: any
+  panel: Panel
 }
 
 export default function Chart({ panel }: ChartProps) {
@@ -38,7 +39,7 @@ export default function Chart({ panel }: ChartProps) {
     return () => window.removeEventListener("resize", updateWidth)
   })
 
-  const plot = new SeriesPlot(digest, panel, theme.palette.color)
+  const plot = new SeriesPlot(digest, panel, theme.palette.color as Required<ColorParams>[])
 
   if (plot.empty) {
     return <div ref={ref} />
@@ -50,7 +51,7 @@ export default function Chart({ panel }: ChartProps) {
     title: panel.title,
     cursor: { sync: { key: sync.key } },
     legend: { live: false },
-    series: plot.series,
+    series: plot.series as Series[],
     axes: [{}],
     plugins: [tooltipPlugin(theme.palette.background.paper)]
   }
@@ -86,7 +87,7 @@ export default function Chart({ panel }: ChartProps) {
 
   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} />
     </Grid>
   )
 }

dashboard/assets/packages/ui/src/components/Chart/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './Chart'
+export { default } from "./Chart"

dashboard/assets/packages/ui/src/components/Header/Header.tsx

@@ -4,16 +4,16 @@
 
 import React, { useContext } from "react"
 import { Button, IconButton, AppBar, Typography, Toolbar, useTheme } from "@mui/material"
-import { Config } from "@xk6-dashboard/model"
 
+import { DigestConfig } from "types/config"
 import { ColorModeContext } from "components/Themed/Themed"
 import { ReactComponent as DarkModeIcon } from "assets/icons/dark_mode.svg"
 import { ReactComponent as LightModeIcon } from "assets/icons/light_mode.svg"
 
 import "./Header.css"
 
 interface HeaderProps {
-  config: Config
+  config: DigestConfig
 }
 
 export default function Header({ config }: HeaderProps) {

dashboard/assets/packages/ui/src/components/Header/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './Header'
+export { default } from "./Header"

dashboard/assets/packages/ui/src/components/Panel.tsx

@@ -4,14 +4,14 @@
 
 import React from "react"
 
-import { PanelKind } from "@xk6-dashboard/view"
+import { PanelKind, Panel as ViewPanel } from "@xk6-dashboard/view"
 
 import Chart from "components/Chart"
 import Stat from "components/Stat"
 import Summary from "components/Summary"
 
 interface PanelProps {
-  panel: any
+  panel: ViewPanel
 }
 
 export default function Panel({ panel }: PanelProps) {
@@ -29,4 +29,4 @@ export default function Panel({ panel }: PanelProps) {
       return null
     }
   }
-}
+}

dashboard/assets/packages/ui/src/components/Section.tsx

@@ -4,7 +4,7 @@
 
 import React, { useState } from "react"
 import { Box, Collapse, Typography, Grid } from "@mui/material"
-import { isEmptySection } from "@xk6-dashboard/view"
+import { isEmptySection, Section as ViewSection } from "@xk6-dashboard/view"
 
 import { useDigest } from "store/digest"
 import { ReactComponent as ExpandLessIcon } from "assets/icons/expand_less.svg"
@@ -13,7 +13,7 @@ import { ReactComponent as ExpandMoreIcon } from "assets/icons/expand_more.svg"
 import Panel from "./Panel"
 
 interface SectionBodyProps {
-  section: any
+  section: ViewSection
 }
 
 function SectionBody({ section }: SectionBodyProps) {
@@ -27,7 +27,7 @@ function SectionBody({ section }: SectionBodyProps) {
 }
 
 interface SectionProps {
-  section: any
+  section: ViewSection
 }
 
 export default function Section({ section }: SectionProps) {

dashboard/assets/packages/ui/src/components/Stat/Stat.tsx

@@ -5,16 +5,17 @@
 import React, { useRef, useState, useLayoutEffect } from "react"
 import { Grid, Typography, useTheme } from "@mui/material"
 import "uplot/dist/uPlot.min.css"
-import { Options } from "uplot"
+import { AlignedData, Options, Series } from "uplot"
 import UplotReact from "uplot-react"
-import { format, SeriesPlot } from "@xk6-dashboard/view"
+import { format, Panel, SeriesPlot } from "@xk6-dashboard/view"
 
+import { ColorParams } from "types/theme"
 import { useDigest } from "store/digest"
 
 import "./Stat.css"
 
 interface StatProps {
-  panel: any
+  panel: Panel
 }
 
 export default function Stat({ panel }: StatProps) {
@@ -38,7 +39,7 @@ export default function Stat({ panel }: StatProps) {
 
   const query = panel.series[0].query
 
-  const plot = new SeriesPlot(digest, panel, theme.palette.color)
+  const plot = new SeriesPlot(digest, panel, theme.palette.color as Required<ColorParams>[])
 
   if (plot.empty) {
     return <div ref={ref} />
@@ -55,7 +56,7 @@ export default function Stat({ panel }: StatProps) {
     width: width,
     height: 32,
     title: value,
-    series: plot.series,
+    series: plot.series as Series[],
     axes: [{ show: false }, { show: false }],
     legend: { show: false },
     cursor: { show: false }
@@ -67,7 +68,7 @@ export default function Stat({ panel }: StatProps) {
         {panel.title}
       </Typography>
       <div ref={ref}>
-        <UplotReact options={options} data={plot.data} />
+        <UplotReact options={options} data={plot.data as AlignedData} />
       </div>
     </Grid>
   )

dashboard/assets/packages/ui/src/components/Stat/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './Stat'
+export { default } from "./Stat"

dashboard/assets/packages/ui/src/components/Summary/Summary.tsx

@@ -4,14 +4,14 @@
 
 import React from "react"
 import { Grid, Table, TableContainer, TableCell, TableHead, TableRow, TableBody, useTheme } from "@mui/material"
-import { SummaryTable } from "@xk6-dashboard/view"
+import { Panel, SummaryTable } from "@xk6-dashboard/view"
 
 import { useDigest } from "store/digest"
 
 import "./Summary.css"
 
 interface SummaryProps {
-  panel: any
+  panel: Panel
 }
 
 export default function Summary({ panel }: SummaryProps) {

dashboard/assets/packages/ui/src/components/Summary/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './Summary'
+export { default } from "./Summary"

dashboard/assets/packages/ui/src/components/Tab.tsx

@@ -3,10 +3,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from "react"
-import Section from "./Section"
+
+import { Tab } from "types/config"
+import Section from "components/Section"
 
 interface TabProps {
-  tab: any
+  tab: Tab
 }
 
 export default function Tab({ tab }: TabProps) {

dashboard/assets/packages/ui/src/components/Themed/Themed.tsx

@@ -3,7 +3,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { createContext, useMemo, useState, ReactNode } from "react"
-import { CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material"
+import { CssBaseline, ThemeProvider, useMediaQuery } from "@mui/material"
+import { createTheme } from "@mui/material/styles"
 import {
   red,
   pink,
@@ -26,11 +27,13 @@ import {
   blueGrey
 } from "@mui/material/colors"
 
+import { Color } from "types/theme"
+
 import "./Themed.css"
 
 export const ColorModeContext = createContext({ toggleColorMode: () => {} })
 
-const colors = {
+const colors: Record<string, Color> = {
   red,
   pink,
   purple,
@@ -92,9 +95,9 @@ export default function Themed({ children }: ThemedProps) {
   )
 
   const theme = useMemo(() => {
-    let extra = []
+    const extra = []
 
-    for (var i = 0; i < order.length; i++) {
+    for (let i = 0; i < order.length; i++) {
       const name = order[i]
       const color = {
         stroke: mode == "dark" ? colors[name][500] : colors[name][800],
@@ -103,10 +106,9 @@ export default function Themed({ children }: ThemedProps) {
 
       colors[name].stroke = mode ? "dark" : colors[name][500]
       extra.push(color)
-      extra[name] = color
     }
 
-    let theme = createTheme({
+    const theme = createTheme({
       palette: {
         mode,
         primary: {

dashboard/assets/packages/ui/src/components/Themed/index.ts

@@ -2,4 +2,4 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-export { default } from './Themed'
+export { default } from "./Themed"

dashboard/assets/packages/ui/src/store/digest.tsx

@@ -6,7 +6,7 @@ import React, { createContext, useContext, useEffect, useState, ReactNode } from
 import defaultConfig from "@xk6-dashboard/config"
 import { Digest, Config, EventType } from "@xk6-dashboard/model"
 
-const DigestContext = createContext(() => new Digest({ config: defaultConfig }))
+const DigestContext = createContext(() => new Digest({ config: defaultConfig } as Digest))
 DigestContext.displayName = "Digest"
 
 interface DigestProviderProps {

dashboard/assets/packages/ui/src/types/config.ts

@@ -0,0 +1,14 @@
+import { Section } from "@xk6-dashboard/view"
+
+export interface Tab {
+  title?: string
+  id?: string
+  summary?: string
+  report: boolean
+  sections: Section[]
+}
+
+export interface DigestConfig {
+  title?: string
+  tabs: Tab[]
+}