Scripted check scene rev2 (#658)

* feat: add collapsing assertions table

* chore: add results by url table

* chore: more url specific charts, scope assertion logs to errors

* chore: style tables like panels

* chore: make assertion expand a timeseries of success rate

* chore: handle no assertions

package.json

@@ -14,7 +14,7 @@
     "release": "release-it",
     "release:ci": "release-it --ci",
     "release:test": "release-it --dry-run --ci --no-git.requireCleanWorkingDir",
-    "server": "docker-compose up --build",
+    "server": "docker-compose rm -f && docker-compose up --build",
     "server-dev": "GRAFANA_IMAGE='grafana-dev' GRAFANA_VERSION='10.2.0-131258-ubuntu' yarn server",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "spellcheck": "cspell -c cspell.config.json \"**/*.{ts,tsx,js,go,md,mdx,yml,yaml,json,scss,css}\"",
@@ -111,6 +111,7 @@
     "punycode": "^2.1.1",
     "react": "18.2.0",
     "react-async-hook": "^3.6.1",
+    "react-data-table-component": "^7.5.4",
     "react-dom": "18.2.0",
     "react-hook-form": "7.2.3",
     "react-popper": "^2.2.5",

src/components/Table/Table.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import DataTable, { ExpanderComponentProps, TableColumn } from 'react-data-table-component';
+import { GrafanaConfig, GrafanaTheme2 } from '@grafana/data';
+import { Icon, Pagination, Tooltip, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+import { createTableTheme } from './tableTheme';
+
+interface Props<T> {
+  // Data to be displayed in the table
+  data: T[];
+  // Column definitions
+  columns: Array<TableColumn<T>>;
+  noDataText: string;
+  // Actions to be performed when a row is clicked
+  onRowClicked?(row: T): void;
+  // Show pagination component, uses pagination from Grafana UI
+  pagination: boolean;
+  paginationPerPage?: number;
+  pointerOnHover?: boolean;
+  id: string;
+  name: string;
+  className?: string;
+  dataTableProps?: any;
+  defaultSortField?: string;
+  expandableRows?: boolean;
+  // Component to be displayed when a row is expanded
+  expandableComponent?: React.FC<ExpanderComponentProps<T>> | null;
+  // Requires config object from '@grafana/runtime'
+  config: GrafanaConfig;
+  expandTooltipText?: string;
+}
+
+export const Table = <T extends unknown>({
+  data,
+  className,
+  columns,
+  noDataText,
+  onRowClicked,
+  pagination,
+  paginationPerPage = 15,
+  pointerOnHover = true,
+  id,
+  name,
+  dataTableProps = {},
+  defaultSortField = undefined,
+  expandableRows = false,
+  expandableComponent = null,
+  config,
+  expandTooltipText = 'Actions and additional data',
+}: Props<T>) => {
+  const styles = useStyles2(getStyles);
+  // Uses light/dark theme based on user config in Grafana
+  createTableTheme(config.theme2.isDark);
+  const expandColor = config.theme2.isDark ? 'white' : 'black';
+
+  return (
+    <DataTable
+      className={className}
+      paginationDefaultPage={1}
+      pagination={pagination}
+      noDataComponent={noDataText}
+      columns={columns}
+      data={data}
+      id={id}
+      name={name}
+      theme={config.theme2.isDark ? 'grafana-dark' : 'grafana-light'}
+      defaultSortFieldId={defaultSortField}
+      highlightOnHover
+      pointerOnHover={pointerOnHover}
+      onRowClicked={(row: T) => (onRowClicked ? onRowClicked(row) : undefined)}
+      paginationPerPage={paginationPerPage}
+      expandableRows={expandableRows}
+      expandableRowsComponent={expandableComponent}
+      expandableIcon={{
+        collapsed: (
+          <Tooltip content={expandTooltipText} placement="top">
+            <Icon size="lg" name="angle-right" style={{ color: expandColor }} />
+          </Tooltip>
+        ),
+        expanded: <Icon size="lg" name="angle-down" style={{ color: expandColor }} />,
+      }}
+      paginationComponent={({ currentPage, rowCount, rowsPerPage, onChangePage }) => (
+        <div className={styles.paginationWrapper}>
+          <Pagination
+            currentPage={currentPage}
+            numberOfPages={Math.ceil(rowCount / rowsPerPage)}
+            onNavigate={(toPage) => {
+              onChangePage(toPage, rowCount);
+            }}
+          />
+        </div>
+      )}
+      {...dataTableProps}
+    />
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  paginationWrapper: css`
+    display: flex;
+    margin: ${theme.spacing(2)} 0 ${theme.spacing(1)};
+    align-items: flex-end;
+    justify-content: flex-end;
+    position: relative;
+  `,
+  pageSize: css`
+    margin-right: ${theme.spacing(1)};
+  `,
+  expandRow: css`
+    padding: 20px 20px 20px 65px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background: ${theme.colors.background.secondary};
+  `,
+  expandRowData: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    div {
+      margin-right: 50px;
+
+      p:first-child {
+        font-weight: bold;
+      }
+    }
+  `,
+  expandRowActions: css`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  `,
+});
+
+export type { TableColumn, ExpanderComponentProps };

src/components/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';

src/components/Table/tableTheme.ts

@@ -0,0 +1,52 @@
+import { createTheme } from 'react-data-table-component';
+
+export const createTableTheme = (isDark: boolean) => {
+  if (isDark) {
+    createTheme('grafana-dark', {
+      text: {
+        primary: 'rgb(204, 204, 220)',
+        secondary: '#2aa198',
+      },
+      background: {
+        default: '#181b1f;',
+      },
+      context: {
+        background: '#cb4b16',
+        text: '#FFFFFF',
+      },
+      divider: {
+        default: 'rgba(204, 204, 220, 0.07)',
+      },
+      highlightOnHover: {
+        default: '#111217',
+        text: '#FFFFFF',
+      },
+      sortFocus: {
+        default: '#2aa198',
+      },
+    });
+  } else {
+    createTheme('grafana-light', {
+      text: {
+        primary: 'rgb(36, 41, 46);',
+        secondary: '#2aa198',
+      },
+      background: {
+        default: 'rgb(255, 255, 255);',
+      },
+      context: {
+        background: '#cb4b16',
+        text: '#FFFFFF',
+      },
+      divider: {
+        default: 'rgba(36, 41, 46, 0.12)',
+      },
+      highlightOnHover: {
+        default: 'rgb(247, 247, 247)',
+      },
+      sortFocus: {
+        default: '#2aa198',
+      },
+    });
+  }
+};

src/scenes/MULTIHTTP/assertionTable.ts

@@ -9,7 +9,27 @@ function getQueryRunner(logs: DataSourceRef) {
     queries: [
       {
         editorMode: 'code',
-        expr: 'sum (\n    min_over_time (\n        {job="$job", instance="$instance"}\n        | logfmt method, url, check, value, msg\n        | __error__ = ""\n        | msg = "check result"\n        | unwrap value\n        [$__range]\n    )\n) by (method, url, check)\n/\ncount (\n    min_over_time (\n        {job="$job", instance="$instance"}\n        | logfmt method, url, check, value, msg\n        | __error__ = ""\n        | msg = "check result"\n        | unwrap value\n        [$__range]\n    )\n) by (method, url, check)',
+        expr: `sum (
+            min_over_time (
+                {job="$job", instance="$instance"}
+                | logfmt method, url, check, value, msg
+                | __error__ = ""
+                | msg = "check result"
+                | unwrap value
+                [$__range]
+            )
+        ) by (method, url, check)
+        /
+        count (
+            min_over_time (
+                {job="$job", instance="$instance"}
+                | logfmt method, url, check, value, msg
+                | __error__ = ""
+                | msg = "check result"
+                | unwrap value
+                [$__range]
+            )
+        ) by (method, url, check)`,
         queryType: 'instant',
         refId: 'A',
       },