Merge pull request #76 from grafana/refactor/update-report-to-typescript

[refactor] Update report package to use TS
grafana · Oct 17, 2023 · fb6c358 · fb6c358
2 parents afb8e12 + 5717ad5
commit fb6c358
Show file tree

Hide file tree

Showing 29 changed files with 332 additions and 127 deletions.
diff --git a/dashboard/assets/packages/report/.eslintrc.json b/dashboard/assets/packages/report/.eslintrc.json
@@ -3,7 +3,8 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
   "plugins": ["react", "prettier"],
   "parserOptions": {
     "ecmaVersion": "latest",

diff --git a/dashboard/assets/packages/report/.prettierignore b/dashboard/assets/packages/report/.prettierignore
@@ -0,0 +1,6 @@
+# SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+#
+# SPDX-License-Identifier: AGPL-3.0-only
+
+dist/
+*.md
diff --git a/dashboard/assets/packages/report/dist/index.html b/dashboard/assets/packages/report/dist/index.html
diff --git a/dashboard/assets/packages/report/index.html b/dashboard/assets/packages/report/index.html
@@ -4,21 +4,23 @@
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgNjcuNzMzIDY3LjczMyIgZmlsbD0iIzdiNjVmYSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy45MDIgNjMuODMxVjEwLjI2NiIvPjxwYXRoIGQ9Ik0zLjAwNSAxMC4yNjZWNjMuODNoMS43OTNWMTAuMjY2eiIvPjxwYXRoIGQ9Ik0zLjkwMiAzLjA5NWwyLjM5MyA3LjE3MUgxLjUwOXoiLz48cGF0aCBkPSJNMy45MDEuMjY0TC4yNjUgMTEuMTYySDcuNTR6bS0uOTM4IDYzLjU2N2g1NC41MDQiLz48cGF0aCBkPSJNMi45NjQgNjIuOTI2djEuODA5aDU0LjUwNHYtMS44MDl6Ii8+PHBhdGggZD0iTTY0LjYzOCA2My44MzFsLTcuMTcxIDIuMzkzdi00Ljc4NnoiLz48cGF0aCBkPSJNNTYuNTcxIDYwLjE5M3Y3LjI3NUw2Ny40NyA2My44M2wtMTAuODk4LTMuNjM3eiIvPjxwYXRoIGQ9Ik01NC4xOTMgNjMuNjg1SDQuNjhsMTYuNDgzLTM1LjE2IDkuOTI5IDcuMjk5IDEyLjk1MS0yMC4xOTJ6IiBmaWxsLW9wYWNpdHk9Ii41MDIiIHN0cm9rZT0iIzdiNjVmYSIgc3Ryb2tlLXdpZHRoPSIxLjg3MyIvPjwvc3ZnPg==" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>k6 report</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml"
-    href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgNjcuNzMzIDY3LjczMyIgZmlsbD0iIzdiNjVmYSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy45MDIgNjMuODMxVjEwLjI2NiIvPjxwYXRoIGQ9Ik0zLjAwNSAxMC4yNjZWNjMuODNoMS43OTNWMTAuMjY2eiIvPjxwYXRoIGQ9Ik0zLjkwMiAzLjA5NWwyLjM5MyA3LjE3MUgxLjUwOXoiLz48cGF0aCBkPSJNMy45MDEuMjY0TC4yNjUgMTEuMTYySDcuNTR6bS0uOTM4IDYzLjU2N2g1NC41MDQiLz48cGF0aCBkPSJNMi45NjQgNjIuOTI2djEuODA5aDU0LjUwNHYtMS44MDl6Ii8+PHBhdGggZD0iTTY0LjYzOCA2My44MzFsLTcuMTcxIDIuMzkzdi00Ljc4NnoiLz48cGF0aCBkPSJNNTYuNTcxIDYwLjE5M3Y3LjI3NUw2Ny40NyA2My44M2wtMTAuODk4LTMuNjM3eiIvPjxwYXRoIGQ9Ik01NC4xOTMgNjMuNjg1SDQuNjhsMTYuNDgzLTM1LjE2IDkuOTI5IDcuMjk5IDEyLjk1MS0yMC4xOTJ6IiBmaWxsLW9wYWNpdHk9Ii41MDIiIHN0cm9rZT0iIzdiNjVmYSIgc3Ryb2tlLXdpZHRoPSIxLjg3MyIvPjwvc3ZnPg==" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>k6 report</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-  <script id="data" type="application/json; charset=utf-8; gzip; base64">{{{ testdata }}}</script>
-<body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script id="data" type="application/json; charset=utf-8; gzip; base64">
+      {{{ testdata }}}
+    </script>
+  </body>
 </html>
diff --git a/dashboard/assets/packages/report/package.json b/dashboard/assets/packages/report/package.json
@@ -6,13 +6,17 @@
   "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": {
     "@xk6-dashboard/config": "0.0.1",
     "@xk6-dashboard/model": "0.0.1",
     "@xk6-dashboard/view": "0.0.1",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "^5.3.2",
     "preact": "^10.16.0",
     "react": "npm:@preact/compat",
     "react-dom": "npm:@preact/compat",
@@ -22,9 +26,15 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "sass": "^1.65.1",
-    "vite": "^4.4.5",
+    "vite": "^4.4.11",
     "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-singlefile": "^0.13.5"
+    "vite-plugin-singlefile": "^0.13.5",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }
diff --git a/dashboard/assets/packages/report/src/App.css → ...ackages/report/src/components/App/App.css b/dashboard/assets/packages/report/src/App.css → ...ackages/report/src/components/App/App.css
diff --git a/dashboard/assets/packages/report/src/App.jsx → ...ackages/report/src/components/App/App.tsx b/dashboard/assets/packages/report/src/App.jsx → ...ackages/report/src/components/App/App.tsx
@@ -5,11 +5,16 @@
 // SPDX-License-Identifier: MIT
 
 import React from "react"
+import { Digest } from "@xk6-dashboard/model"
+
+import Tab from "components/Tab"
 import "./App.css"
 
-import Tab from "./Tab"
+interface AppProps {
+  digest: Digest
+}
 
-export default function App({ digest }) {
+export default function App({ digest }: AppProps) {
   return (
     <article className="container-fluid report">
       <h1>k6 report</h1>

diff --git a/dashboard/assets/packages/report/src/components/App/index.ts b/dashboard/assets/packages/report/src/components/App/index.ts
@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export { default } from "./App"
diff --git a/...oard/assets/packages/report/src/Chart.css → ...ges/report/src/components/Chart/Chart.css b/...oard/assets/packages/report/src/Chart.css → ...ges/report/src/components/Chart/Chart.css
diff --git a/...oard/assets/packages/report/src/Chart.jsx → ...ges/report/src/components/Chart/Chart.tsx b/...oard/assets/packages/report/src/Chart.jsx → ...ges/report/src/components/Chart/Chart.tsx
@@ -2,29 +2,39 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from "react"
+import React, { Ref } from "react"
 import { useRef, useState, useLayoutEffect } from "preact/hooks"
 
 import "uplot/dist/uPlot.min.css"
 import UplotReact from "uplot-react"
-import uPlot from "uplot"
+import uPlot, { AlignedData, Options, Series } from "uplot"
 
-import { SeriesPlot, tooltipPlugin, dateFormats, format } from "@xk6-dashboard/view"
+import { Digest } from "@xk6-dashboard/model"
+import { Panel, SeriesPlot, tooltipPlugin, dateFormats, format } from "@xk6-dashboard/view"
 
+import colors from "utils/colors"
 import "./Chart.css"
 
-import colors from "./colors"
-
 const sync = uPlot.sync("chart")
 
-export default function Chart({ panel, digest }) {
+interface ChartProps {
+  panel: Panel
+  digest: Digest
+}
+
+export default function Chart({ panel, digest }: ChartProps) {
   const plot = new SeriesPlot(digest, panel, colors)
-  const ref = useRef(null)
+  const ref = useRef<HTMLSpanElement | HTMLDivElement>(null)
 
   const [width, setWidth] = useState(0)
 
   useLayoutEffect(() => {
-    let updateWidth = () => setWidth(ref.current.offsetWidth)
+    const updateWidth = () => {
+      if (ref.current) {
+        setWidth(ref.current.offsetWidth)
+      }
+    }
+
     updateWidth()
     window.addEventListener("resize", updateWidth)
 
@@ -35,13 +45,13 @@ export default function Chart({ panel, digest }) {
     return <span ref={ref} />
   }
 
-  let options = {
+  const options: Options = {
     width: width,
     height: 250,
     title: panel.title,
     cursor: { sync: { key: sync.key } },
     legend: { live: false },
-    series: plot.series,
+    series: plot.series as Series[],
     axes: [{}],
     plugins: [tooltipPlugin("#fafafa")]
   }
@@ -51,7 +61,7 @@ export default function Chart({ panel, digest }) {
       stroke: "#808080",
       grid: { stroke: "#f0f0f0" },
       ticks: { stroke: "#f0f0f0" },
-      values: (self, ticks) => ticks.map((val) => format(unit, val)),
+      values: (_, ticks) => ticks.map((val) => format(unit, val)),
       size: 70,
       scale: unit
     }
@@ -65,8 +75,8 @@ export default function Chart({ panel, digest }) {
   }
 
   return (
-    <div ref={ref} className="chart panel">
-      <UplotReact options={options} data={plot.data} />
+    <div ref={ref as Ref<HTMLDivElement>} className="chart panel">
+      <UplotReact options={options} data={plot.data as AlignedData} />
     </div>
   )
 }
diff --git a/dashboard/assets/packages/report/src/components/Chart/index.ts b/dashboard/assets/packages/report/src/components/Chart/index.ts
@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export { default } from "./Chart"
diff --git a/...oard/assets/packages/report/src/Panel.jsx → .../packages/report/src/components/Panel.tsx b/...oard/assets/packages/report/src/Panel.jsx → .../packages/report/src/components/Panel.tsx
@@ -3,13 +3,18 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from "react"
+import { Digest } from "@xk6-dashboard/model"
+import { Panel as PanelClass, PanelKind } from "@xk6-dashboard/view"
 
-import { PanelKind } from "@xk6-dashboard/view"
+import Chart from "components/Chart"
+import Summary from "components/Summary"
 
-import Chart from "./Chart"
-import Summary from "./Summary"
+interface PanelProps {
+  panel: PanelClass
+  digest: Digest
+}
 
-export default function Panel({ panel, digest }) {
+export default function Panel({ panel, digest }: PanelProps) {
   if (panel.kind == PanelKind.chart) {
     return <Chart panel={panel} digest={digest} />
   }

diff --git a/...rd/assets/packages/report/src/Section.jsx → ...ackages/report/src/components/Section.tsx b/...rd/assets/packages/report/src/Section.jsx → ...ackages/report/src/components/Section.tsx
@@ -3,19 +3,24 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from "react"
-
-import { SummaryTable, isEmptySection } from "@xk6-dashboard/view"
+import { Digest } from "@xk6-dashboard/model"
+import { Panel as PanelClass, Section as SectionClass, SummaryTable, isEmptySection } from "@xk6-dashboard/view"
 
 import Panel from "./Panel"
 
-export default function Section({ section, digest }) {
+interface SectionProps {
+  section: SectionClass
+  digest: Digest
+}
+
+export default function Section({ section, digest }: SectionProps) {
   const empty = isEmptySection(section, digest)
 
   if (empty) {
     return <></>
   }
 
-  const foo = (panel) => {
+  const createClassName = (panel: PanelClass) => {
     if (panel.kind == "chart") {
       return "col-lg-6 rcol-md-12"
     }
@@ -40,8 +45,8 @@ export default function Section({ section, digest }) {
       <p>{section.summary}</p>
       <div className="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-2" key={section.id + "row"}>
         {section.panels.map((panel) => (
-          <div key={panel.id + "col"} className={"col " + foo(panel)}>
-            <Panel key={panel.id} panel={panel} digest={digest} columns={section.columns} />
+          <div key={panel.id + "col"} className={"col " + createClassName(panel)}>
+            <Panel key={panel.id} panel={panel} digest={digest} />
           </div>
         ))}
       </div>

diff --git a/...rd/assets/packages/report/src/Summary.css → ...report/src/components/Summary/Summary.css b/...rd/assets/packages/report/src/Summary.css → ...report/src/components/Summary/Summary.css
diff --git a/...rd/assets/packages/report/src/Summary.jsx → ...report/src/components/Summary/Summary.tsx b/...rd/assets/packages/report/src/Summary.jsx → ...report/src/components/Summary/Summary.tsx
@@ -3,12 +3,17 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from "react"
+import { Digest } from "@xk6-dashboard/model"
+import { Panel, SummaryTable } from "@xk6-dashboard/view"
 
 import "./Summary.css"
 
-import { SummaryTable } from "@xk6-dashboard/view"
+interface SummaryProps {
+  panel: Panel
+  digest: Digest
+}
 
-export default function Summary({ panel, digest }) {
+export default function Summary({ panel, digest }: SummaryProps) {
   const table = new SummaryTable(panel, digest)
 
   if (table.empty) {

diff --git a/dashboard/assets/packages/report/src/components/Summary/index.ts b/dashboard/assets/packages/report/src/components/Summary/index.ts
@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export { default } from "./Summary"
diff --git a/dashboard/assets/packages/report/src/Tab.jsx → ...ts/packages/report/src/components/Tab.tsx b/dashboard/assets/packages/report/src/Tab.jsx → ...ts/packages/report/src/components/Tab.tsx
@@ -3,9 +3,17 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from "react"
+import { Digest } from "@xk6-dashboard/model"
+
+import { Tab as TabType } from "types/config"
 import Section from "./Section"
 
-export default function Tab({ tab, digest }) {
+interface TabProps {
+  tab: TabType
+  digest: Digest
+}
+
+export default function Tab({ tab, digest }: TabProps) {
   return (
     <section className="chapter" id="tab.id">
       <h2 id={tab.id}>{tab.title}</h2>

diff --git a/...board/assets/packages/report/src/main.jsx → ...board/assets/packages/report/src/main.tsx b/...board/assets/packages/report/src/main.jsx → ...board/assets/packages/report/src/main.tsx
@@ -6,11 +6,11 @@
 
 import React from "react"
 import { render } from "preact"
-import digest from "./digest"
-
 import "uplot/dist/uPlot.min.css"
-import "./styles.scss"
 
-import App from "./App.jsx"
+import digest from "utils/digest"
+import App from "components/App"
+import "theme/styles.scss"
 
-digest().then((d) => render(<App digest={d} />, document.getElementById("root")))
+const rootElement = document.getElementById("root") as HTMLDivElement
+digest().then((d) => render(<App digest={d} />, rootElement))