feat: hint banners in /status page #307

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;

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>

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 />