From 8b8e12c4aee480cd2295bc843e40fd4b8df2123a Mon Sep 17 00:00:00 2001
From: mickol34 <80098155+mickol34@users.noreply.github.com>
Date: Thu, 17 Oct 2024 13:14:52 +0200
Subject: [PATCH] Hint banners in /status page (#418)

---
 src/mqueryfront/src/components/WarningPage.js | 18 +++++++++
 .../src/status/DatabaseTopology.js            | 21 ++++++++++
 src/mqueryfront/src/status/StatusPage.js      | 40 ++++++++++++++++++-
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/mqueryfront/src/components/WarningPage.js

diff --git a/src/mqueryfront/src/components/WarningPage.js b/src/mqueryfront/src/components/WarningPage.js
new file mode 100644
index 00000000..946c7bbc
--- /dev/null
+++ b/src/mqueryfront/src/components/WarningPage.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+const WarningPage = (props) => (
+    <div className="alert alert-warning alert-dismissible fade show">
+        <h2>Warning</h2>
+        {props.msg}
+        {props.dismissable && (
+            <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="alert"
+                aria-label="Close"
+            />
+        )}
+    </div>
+);
+
+export default WarningPage;
diff --git a/src/mqueryfront/src/status/DatabaseTopology.js b/src/mqueryfront/src/status/DatabaseTopology.js
index d67f5f07..91c42361 100644
--- a/src/mqueryfront/src/status/DatabaseTopology.js
+++ b/src/mqueryfront/src/status/DatabaseTopology.js
@@ -3,6 +3,7 @@ import { filesize } from "filesize";
 
 import ErrorBoundary from "../components/ErrorBoundary";
 import api from "../api";
+import WarningPage from "../components/WarningPage";
 
 class DatasetRow extends Component {
     render() {
@@ -71,6 +72,19 @@ class DatabaseTopology extends Component {
             });
     }
 
+    getDatasetsCompactingWarning(datasets) {
+        var fileCountThreshold = 1000 * 1000;
+        var amountThreshhold = 20;
+        var smallDatasets = datasets.filter(
+            (dataset) => dataset.file_count < fileCountThreshold
+        );
+        if (smallDatasets.length < amountThreshhold) {
+            return null;
+        }
+        return `At least ${amountThreshhold} datasets have less \
+        than ${fileCountThreshold} samples - consider compacting them.`;
+    }
+
     render() {
         const datasetRows = Object.keys(
             this.state.datasets
@@ -93,9 +107,16 @@ class DatabaseTopology extends Component {
         const totalSize = filesize(totalBytes, { standard: "iec" });
         const filesTooltip = `Total files: ${totalCount} (${totalSize})`;
 
+        const datasetsCompactingWarning = this.getDatasetsCompactingWarning(
+            datasets
+        );
+
         return (
             <ErrorBoundary error={this.state.error}>
                 <h2 className="text-center mq-bottom">Topology</h2>
+                {datasetsCompactingWarning && (
+                    <WarningPage msg={datasetsCompactingWarning} dismissable />
+                )}
                 <div className="table-responsive">
                     <table className="table table-bordered table-topology">
                         <thead>
diff --git a/src/mqueryfront/src/status/StatusPage.js b/src/mqueryfront/src/status/StatusPage.js
index 0bf82a89..419a6b28 100644
--- a/src/mqueryfront/src/status/StatusPage.js
+++ b/src/mqueryfront/src/status/StatusPage.js
@@ -4,6 +4,7 @@ import BackendStatus from "./BackendStatus";
 import DatabaseTopology from "./DatabaseTopology";
 import VersionStatus from "./VersionStatus";
 import api from "../api";
+import WarningPage from "../components/WarningPage";
 
 class StatusPage extends Component {
     constructor(props) {
@@ -26,19 +27,56 @@ class StatusPage extends Component {
             .catch((error) => {
                 this.setState({ error: error });
             });
+        this._ismounted = true;
+    }
+
+    getAgentsUrsaURLDuplicatesWarning(agentgroups) {
+        var ursaURLS = agentgroups.map((agent) => agent.spec.ursadb_url);
+        var duplicateURLS = ursaURLS.filter(
+            (url, index) => ursaURLS.indexOf(url) !== index
+        );
+        if (!duplicateURLS.length) {
+            return null;
+        }
+        return `At least two agents share the same UrsaDB URL(s): \
+        ${duplicateURLS.join(
+            ", "
+        )}. Something might be wrong with backend configuration.`;
+    }
+
+    getNoAgentsWarning(agentgroups) {
+        if (agentgroups.length) {
+            return null;
+        }
+        return "There are no connected agents! Check your backend configuration.";
     }
 
     render() {
+        const ursaURLWarning = this.getAgentsUrsaURLDuplicatesWarning(
+            this.state.backend.agents
+        );
+        const noAgentsWarning = this.getNoAgentsWarning(
+            this.state.backend.agents
+        );
         return (
             <ErrorBoundary error={this.state.error}>
                 <div className="container-fluid">
+                    {this._ismounted && ursaURLWarning && (
+                        <WarningPage msg={ursaURLWarning} dismissable />
+                    )}
                     <h1 className="text-center mq-bottom">Status</h1>
                     <div className="row">
                         <div className="col-md-6">
                             <VersionStatus
                                 components={this.state.backend.components}
                             />
-                            <BackendStatus agents={this.state.backend.agents} />
+                            {this._ismounted && noAgentsWarning ? (
+                                <WarningPage msg={noAgentsWarning} />
+                            ) : (
+                                <BackendStatus
+                                    agents={this.state.backend.agents}
+                                />
+                            )}
                         </div>
                         <div className="col-md-6">
                             <DatabaseTopology />