From 7a76cf97681725f230587af9288b4fcc5e3957c1 Mon Sep 17 00:00:00 2001
From: Lukasz Sojka <lukasz.sojka@scylladb.com>
Date: Wed, 8 Jan 2025 18:31:58 +0100
Subject: [PATCH] improvement(graphs): add show graph button for each column in
 results

When viewing results tables users now can view graph for selected column
to see values from the past/future.

closes: https://github.com/scylladb/qa-tasks/issues/1822
---
 argus/backend/controller/api.py               |   3 +-
 argus/backend/service/results_service.py      |   6 +-
 .../TestRun/Components/ResultTable.svelte     | 253 ++++++++++++++----
 frontend/TestRun/ResultsGraph.svelte          |   3 +-
 frontend/TestRun/ResultsGraphs.svelte         |  71 ++---
 frontend/TestRun/ResultsTab.svelte            |   7 +-
 .../SummaryWidget/SummaryWidget.svelte        |   8 +-
 7 files changed, 250 insertions(+), 101 deletions(-)

diff --git a/argus/backend/controller/api.py b/argus/backend/controller/api.py
index 299781c2..4d2225a6 100644
--- a/argus/backend/controller/api.py
+++ b/argus/backend/controller/api.py
@@ -395,6 +395,7 @@ def test_results():
     test_id = request.args.get("testId")
     start_date_str = request.args.get("startDate")
     end_date_str = request.args.get("endDate")
+    table_names = request.args.getlist("tableNames[]")
 
     if not test_id:
         raise Exception("No testId provided")
@@ -407,7 +408,7 @@ def test_results():
         exists = service.is_results_exist(test_id=UUID(test_id))
         return Response(status=200 if exists else 404)
 
-    graphs, ticks, releases_filters = service.get_test_graphs(test_id=UUID(test_id), start_date=start_date, end_date=end_date)
+    graphs, ticks, releases_filters = service.get_test_graphs(test_id=UUID(test_id), start_date=start_date, end_date=end_date, table_names=table_names)
 
     return {
         "status": "ok",
diff --git a/argus/backend/service/results_service.py b/argus/backend/service/results_service.py
index 4ba00413..3d6a5152 100644
--- a/argus/backend/service/results_service.py
+++ b/argus/backend/service/results_service.py
@@ -500,9 +500,13 @@ def get_run_results(self, test_id: UUID, run_id: UUID, key_metrics: list[str] |
 
         return [{entry['table_name']: entry['table_data']} for entry in table_entries]
 
-    def get_test_graphs(self, test_id: UUID, start_date: datetime | None = None, end_date: datetime | None = None):
+    def get_test_graphs(self, test_id: UUID, start_date: datetime | None = None, end_date: datetime | None = None, table_names: list[str] | None = None):
         runs_details = self._get_runs_details(test_id)
         tables_meta = self._get_tables_metadata(test_id=test_id)
+
+        if table_names:
+            tables_meta = [table for table in tables_meta if table.name in table_names]
+
         graphs = []
         releases_filters = set()
         for table in tables_meta:
diff --git a/frontend/TestRun/Components/ResultTable.svelte b/frontend/TestRun/Components/ResultTable.svelte
index 4b9d7160..912a875c 100644
--- a/frontend/TestRun/Components/ResultTable.svelte
+++ b/frontend/TestRun/Components/ResultTable.svelte
@@ -1,16 +1,32 @@
 <script>
     import { faMarkdown } from "@fortawesome/free-brands-svg-icons";
-    import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+    import { faInfoCircle, faChartLine } from "@fortawesome/free-solid-svg-icons";
     import { ResultCellStatusStyleMap } from "../../Common/TestStatus";
     import Cell from "./Cell.svelte";
     import Fa from "svelte-fa";
     import { sendMessage } from "../../Stores/AlertStore";
+    import ResultsGraph from "../ResultsGraph.svelte";
+    import queryString from "query-string";
+    import { onMount, onDestroy } from "svelte";
+    import GraphFilters from "./GraphFilters.svelte";
+    import ModalWindow from "../../Common/ModalWindow.svelte";
 
     export let table_name;
     export let result;
     export let selectedScreenshot;
+    export let test_id;
 
     let showDescription = false;
+    let showGraphModal = false;
+    let graph = null;
+    let ticks = {};
+    let releasesFilters = {};
+    let selectedColumnName = "";
+    let dateRange = 6;
+    let startDate = "";
+    let endDate = "";
+    let showCustomInputs = false;
+    let redraw = 0;
 
     const tableStyleToColor = {
         "table-success": "green",
@@ -19,6 +35,11 @@
         "table-secondary": "gray",
     };
 
+    const dispatch_run_click = (e) => {
+        const runId = e.detail.runId;
+        window.open(`/tests/scylla-cluster-tests/${runId}`, "_blank", "popup");
+    };
+
     function styleToColor(classList) {
         const classes = classList.split(" ");
         for (let className of classes) {
@@ -37,32 +58,34 @@
             const rows = Array.from(table.querySelectorAll("tr"));
             rows.forEach((row, rowIndex) => {
                 const cells = Array.from(row.querySelectorAll("th, td"));
-                const markdownRow = cells.map(cell => {
-                    let cellText = cell.innerText.trim();
-                    let link = "";
+                const markdownRow = cells
+                    .map((cell) => {
+                        let cellText = cell.innerText.trim();
+                        let link = "";
 
-                    const linkElement = cell.querySelector("a");
-                    const buttonElement = cell.querySelector("button");
+                        const linkElement = cell.querySelector("a");
+                        const buttonElement = cell.querySelector("button");
 
-                    if (linkElement) {
-                        link = linkElement.href;
-                    } else if (buttonElement) {
-                        link = buttonElement.getAttribute("data-link");
-                    }
+                        if (linkElement) {
+                            link = linkElement.href;
+                        } else if (buttonElement) {
+                            link = buttonElement.getAttribute("data-link");
+                        }
 
-                    cellText = cellText.replace(/#/g, "#&#8203;");
+                        cellText = cellText.replace(/#/g, "#&#8203;");
 
-                    if (link) {
-                        cellText = `[${cellText}](${link})`;
-                    }
+                        if (link) {
+                            cellText = `[${cellText}](${link})`;
+                        }
 
-                    const color = styleToColor(cell.className);
-                    if (color) {
-                        cellText = `$$\{\\color{${color}}${cellText}}$$`;
-                    }
+                        const color = styleToColor(cell.className);
+                        if (color) {
+                            cellText = `$$\{\\color{${color}}${cellText}}$$`;
+                        }
 
-                    return cellText;
-                }).join(" | ");
+                        return cellText;
+                    })
+                    .join(" | ");
                 markdown += `| ${markdownRow} |\n`;
 
                 if (rowIndex === 0) {
@@ -83,14 +106,86 @@
     function toggleDescription() {
         showDescription = !showDescription;
     }
+
+    async function fetchGraphData() {
+        try {
+            const params = queryString.stringify({
+                testId: test_id,
+                startDate,
+                endDate,
+                "tableNames[]": [table_name],
+            });
+
+            let res = await fetch(`/api/v1/test-results?${params}`);
+            if (res.status !== 200) {
+                throw new Error(`HTTP Error ${res.status} trying to fetch test results`);
+            }
+            let results = await res.json();
+            if (results.status !== "ok") {
+                throw new Error(`API Error: ${results.message}`);
+            }
+
+            const response = results["response"];
+            if (!response.graphs || response.graphs.length === 0) {
+                throw new Error("No graph data available for this table");
+            }
+
+            graph = response["graphs"].find((graph) => graph.options.plugins.title.text.endsWith(selectedColumnName));
+            ticks = response["ticks"];
+            releasesFilters = Object.fromEntries(response["releases_filters"].map((key) => [key, true]));
+        } catch (error) {
+            console.log("Error:", error);
+            sendMessage("error", `Failed to load graph data: ${error.message}`);
+        }
+    }
+
+    async function openGraphModal(columnName = "") {
+        selectedColumnName = columnName;
+        showGraphModal = true;
+        await fetchGraphData();
+    }
+
+    function closeGraphModal() {
+        showGraphModal = false;
+        graph = null;
+        selectedColumnName = "";
+    }
+
+    async function handleDateChange(event) {
+        startDate = event.detail.startDate;
+        endDate = event.detail.endDate;
+        if (showGraphModal) {
+            await fetchGraphData();
+            redraw++;
+        }
+    }
+
+    async function handleReleaseChange(event) {
+        releasesFilters = event.detail.releasesFilters;
+        redraw++;
+    }
+
+    function handleKeydown(event) {
+        if (event.key === "Escape" && showGraphModal) {
+            closeGraphModal();
+        }
+    }
+
+    onMount(() => {
+        window.addEventListener("keydown", handleKeydown);
+    });
+
+    onDestroy(() => {
+        window.removeEventListener("keydown", handleKeydown);
+    });
 </script>
 
 <li class="result-item {result.table_status}">
     <div class="result-content">
         <div class="table-header">
             <h5>{table_name}</h5>
-            <button class="btn btn-outline-secondary btn-sm p-1" on:click={toggleDescription}>
-                <Fa icon={faInfoCircle} size="sm"/>
+            <button class="btn btn-link p-0 ms-1" on:click={toggleDescription}>
+                <Fa icon={faInfoCircle} size="sm" />
             </button>
         </div>
         {#if showDescription}
@@ -100,30 +195,49 @@
             <div class="table-container">
                 <table class="table table-sm table-bordered">
                     <thead class="thead-dark">
-                    <tr>
-                        <th>
-                            <button class="btn btn-outline-success btn-sm p-1" on:click={copyResultTableAsMarkdown}>
-                                <Fa icon={faMarkdown} size="sm"/>
-                            </button>
-                        </th>
-                        {#each result.columns as col}
-                            <th>{col.name} <span class="unit">{col.unit ? `[${col.unit}]` : ''}</span></th>
-                        {/each}
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {#each result.rows as row}
                         <tr>
-                            <td>{row}</td>
+                            <th>
+                                <button class="btn btn-link p-1" on:click={copyResultTableAsMarkdown}>
+                                    <Fa icon={faMarkdown} size="sm" />
+                                </button>
+                            </th>
                             {#each result.columns as col}
-                                {#key result.table_data[row][col.name]}
-                                    <td class="{ResultCellStatusStyleMap[result.table_data[row][col.name]?.status || 'NULL']}">
-                                        <Cell cell={result.table_data[row][col.name]} bind:selectedScreenshot/>
-                                    </td>
-                                {/key}
+                                <th>
+                                    <div class="column-header">
+                                        <span
+                                            >{col.name}
+                                            <span class="unit">{col.unit ? `[${col.unit}]` : ""}</span></span
+                                        >
+                                        {#if col.unit}
+                                            <button
+                                                class="btn btn-link p-0 ms-2"
+                                                on:click={() => openGraphModal(col.name)}
+                                            >
+                                                <Fa icon={faChartLine} size="sm" />
+                                            </button>
+                                        {/if}
+                                    </div>
+                                </th>
                             {/each}
                         </tr>
-                    {/each}
+                    </thead>
+                    <tbody>
+                        {#each result.rows as row}
+                            <tr>
+                                <td>{row}</td>
+                                {#each result.columns as col}
+                                    {#key result.table_data[row][col.name]}
+                                        <td
+                                            class={ResultCellStatusStyleMap[
+                                                result.table_data[row][col.name]?.status || "NULL"
+                                            ]}
+                                        >
+                                            <Cell cell={result.table_data[row][col.name]} bind:selectedScreenshot />
+                                        </td>
+                                    {/key}
+                                {/each}
+                            </tr>
+                        {/each}
                     </tbody>
                 </table>
             </div>
@@ -131,6 +245,40 @@
     </div>
 </li>
 
+{#if showGraphModal}
+    <ModalWindow widthClass="w-75" on:modalClose={closeGraphModal}>
+        <div slot="title">
+            {table_name}
+            {selectedColumnName ? `- ${selectedColumnName}` : ""}
+        </div>
+        <div slot="body" style="min-height: 800px;">
+            <GraphFilters
+                bind:dateRange
+                bind:startDate
+                bind:endDate
+                bind:showCustomInputs
+                bind:releasesFilters
+                on:dateChange={handleDateChange}
+                on:releaseChange={handleReleaseChange}
+            />
+            {#if graph}
+                {#key redraw}
+                    <ResultsGraph
+                        {graph}
+                        {ticks}
+                        {test_id}
+                        width={1400}
+                        height={700}
+                        {releasesFilters}
+                        responsive={true}
+                        on:runClick={dispatch_run_click}
+                    />
+                {/key}
+            {/if}
+        </div>
+    </ModalWindow>
+{/if}
+
 <style>
     .result-item {
         margin-bottom: 1rem;
@@ -194,7 +342,8 @@
         font-size: 0.85rem;
     }
 
-    th, td {
+    th,
+    td {
         text-align: center;
         padding: 0.25rem !important;
     }
@@ -208,5 +357,19 @@
     :global(.btn-sm) {
         font-size: 0.75rem;
     }
-</style>
 
+    .column-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+    }
+
+    .column-header button {
+        opacity: 0.6;
+    }
+
+    .column-header button:hover {
+        opacity: 1;
+    }
+</style>
diff --git a/frontend/TestRun/ResultsGraph.svelte b/frontend/TestRun/ResultsGraph.svelte
index e35a8cb7..7cb70090 100644
--- a/frontend/TestRun/ResultsGraph.svelte
+++ b/frontend/TestRun/ResultsGraph.svelte
@@ -11,6 +11,7 @@
     export let test_id = "";
     export let width = 500;
     export let height = 300;
+    export let responsive = false;
     export let releasesFilters = {};
     let chart;
     let showModal = false;
@@ -118,7 +119,7 @@
         const tickValues = calculateTickValues(xValues, width, ticksGapPx);
 
         graph.options.animation = false;
-        graph.options.responsive = false;
+        graph.options.responsive = responsive;
         graph.options.lazy = true;
         graph.options.plugins.tooltip = {
             position: "above",
diff --git a/frontend/TestRun/ResultsGraphs.svelte b/frontend/TestRun/ResultsGraphs.svelte
index d0db07b4..a600d5c8 100644
--- a/frontend/TestRun/ResultsGraphs.svelte
+++ b/frontend/TestRun/ResultsGraphs.svelte
@@ -2,6 +2,7 @@
     import {createEventDispatcher, onMount} from "svelte";
     import {sendMessage} from "../Stores/AlertStore";
     import ResultsGraph from "./ResultsGraph.svelte";
+    import GraphFilters from "./Components/GraphFilters.svelte";
     import dayjs from "dayjs";
     import queryString from "query-string";
 
@@ -91,6 +92,16 @@
         fetchTestResults(test_id);
     };
 
+    const handleDateChange = (event) => {
+        startDate = event.detail.startDate;
+        endDate = event.detail.endDate;
+        fetchTestResults(test_id);
+    };
+
+    const handleReleaseChange = () => {
+        filterGraphs();
+    };
+
     const extractTableFilters = () => {
         let fltrs = new Map();
         graphs.forEach(graph => {
@@ -182,56 +193,16 @@
         setDefaultDateRange();
     });
 </script>
-<div class="filters-container">
-    <span class="my-auto">Time range:</span>
-    <div class="input-group input-group-inline input-group-sm mx-2">
-        <button class="btn btn-outline-primary btn-sm"
-                class:active={dateRange === 1}
-                on:click={() => dateRange = 1}>
-            Last Month
-        </button>
-        <button class="btn btn-outline-primary btn-sm"
-                class:active={dateRange === 3}
-                on:click={() => dateRange = 3}>
-            Last 3 Months
-        </button>
-        <button class="btn btn-outline-primary btn-sm"
-                class:active={dateRange === 6}
-                on:click={() => dateRange = 6}>
-            Last 6 Months
-        </button>
-        <button class="btn btn-outline-primary btn-sm"
-                class:active={dateRange === 12}
-                on:click={() => dateRange = 12}>
-            Last year
-        </button>
-        <button class="btn btn-outline-primary btn-sm"
-                class:active={dateRange === 24}
-                on:click={() => dateRange = 24}>
-            Last 2 years
-        </button>
-        <button class="btn btn-outline-primary btn-sm"
-                on:click={() => dateRange = -1}
-                class:active={showCustomInputs}>
-            Custom
-        </button>
-        {#if showCustomInputs}
-            <input type="date" class="form-control date-input" bind:value={startDate} on:change={() => fetchTestResults(test_id)}/>
-            <input type="date" class="form-control date-input" bind:value={endDate} on:change={() => fetchTestResults(test_id)}/>
-        {/if}
-    </div>
-    <span class="my-auto">Releases:</span>
-    <div class="input-group input-group-inline input-group-sm mx-2">
-        {#each Object.keys(releasesFilters) as release}
-            <button class="btn btn-sm btn-outline-dark"
-                    on:click={() => toggleReleaseFilter(release)}
-                    class:active={releasesFilters[release]}
-            >
-                {release}
-            </button>
-        {/each}
-    </div>
-</div>
+
+<GraphFilters
+    bind:dateRange
+    bind:startDate
+    bind:endDate
+    bind:showCustomInputs
+    bind:releasesFilters
+    on:dateChange={handleDateChange}
+    on:releaseChange={handleReleaseChange}
+/>
 
 <span>Filters:</span>
 <div class="filters-container  ">
diff --git a/frontend/TestRun/ResultsTab.svelte b/frontend/TestRun/ResultsTab.svelte
index f94c4544..d481ad1e 100644
--- a/frontend/TestRun/ResultsTab.svelte
+++ b/frontend/TestRun/ResultsTab.svelte
@@ -144,7 +144,12 @@
         </div>
         <ul class="result-list">
             {#each Object.entries(filteredTables) as [table_name, result]}
-                <ResultTable table_name={table_name} result={result} bind:selectedScreenshot/>
+                <ResultTable
+                    table_name={table_name}
+                    result={result}
+                    test_id={test_id}
+                    bind:selectedScreenshot
+                />
             {/each}
         </ul>
     </div>
diff --git a/frontend/Views/Widgets/SummaryWidget/SummaryWidget.svelte b/frontend/Views/Widgets/SummaryWidget/SummaryWidget.svelte
index e2ab3ac8..8d5a365f 100644
--- a/frontend/Views/Widgets/SummaryWidget/SummaryWidget.svelte
+++ b/frontend/Views/Widgets/SummaryWidget/SummaryWidget.svelte
@@ -351,8 +351,12 @@
                                                     {#each results as tableEntry}
                                                         {#each Object.entries(tableEntry) as [table_name, result]}
                                                             <li class="list-group-item">
-                                                                <ResultTable table_name={table_name} result={result}
-                                                                             bind:selectedScreenshot/>
+                                                                <ResultTable
+                                                                    {table_name}
+                                                                    {result}
+                                                                    test_id={testId}
+                                                                    bind:selectedScreenshot
+                                                                />
                                                             </li>
                                                         {/each}
                                                     {/each}