From 2b2b8e66e7244592672c283fe7bb5d9a1fd9da99 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 8 Oct 2020 11:16:38 +0200
Subject: Minor changes

---
 frontend/src/views/Timeline.js | 215 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 frontend/src/views/Timeline.js

(limited to 'frontend/src/views/Timeline.js')

diff --git a/frontend/src/views/Timeline.js b/frontend/src/views/Timeline.js
new file mode 100644
index 0000000..3adbf88
--- /dev/null
+++ b/frontend/src/views/Timeline.js
@@ -0,0 +1,215 @@
+import React, {Component} from 'react';
+import './Timeline.scss';
+import {
+    ChartContainer,
+    ChartRow,
+    Charts,
+    LineChart,
+    MultiBrush,
+    Resizable,
+    styler,
+    YAxis
+} from "react-timeseries-charts";
+import {TimeRange, TimeSeries} from "pondjs";
+import backend from "../backend";
+import ChoiceField from "../components/fields/ChoiceField";
+import {withRouter} from "react-router-dom";
+import log from "../log";
+import dispatcher from "../dispatcher";
+
+const minutes = 60 * 1000;
+
+class Timeline extends Component {
+
+    state = {
+        metric: "connections_per_service"
+    };
+
+    constructor() {
+        super();
+
+        this.disableTimeSeriesChanges = false;
+        this.selectionTimeout = null;
+    }
+
+    filteredPort = () => {
+        const urlParams = new URLSearchParams(this.props.location.search);
+        return urlParams.get("service_port");
+    };
+
+    componentDidMount() {
+        const filteredPort = this.filteredPort();
+        this.setState({filteredPort});
+        this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount"));
+
+        dispatcher.register("connection_updates", payload => {
+            this.setState({
+                selection: new TimeRange(payload.from, payload.to),
+            });
+        });
+
+        dispatcher.register("notifications", payload => {
+            if (payload.event === "services.edit") {
+                this.loadServices().then(() => log.debug("Services reloaded after notification update"));
+            }
+        });
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const filteredPort = this.filteredPort();
+        if (this.state.filteredPort !== filteredPort) {
+            this.setState({filteredPort});
+            this.loadStatistics(this.state.metric, filteredPort).then(() =>
+                log.debug("Statistics reloaded after filtered port changes"));
+        }
+    }
+
+    loadStatistics = async (metric, filteredPort) => {
+        const urlParams = new URLSearchParams();
+        urlParams.set("metric", metric);
+
+        let services = await this.loadServices();
+        if (filteredPort && services[filteredPort]) {
+            const service = services[filteredPort];
+            services = {};
+            services[filteredPort] = service;
+        }
+
+        const ports = Object.keys(services);
+        ports.forEach(s => urlParams.append("ports", s));
+
+        const metrics = (await backend.get("/api/statistics?" + urlParams)).json;
+        const zeroFilledMetrics = [];
+        const toTime = m => new Date(m["range_start"]).getTime();
+
+        if (metrics.length > 0) {
+            let i = 0;
+            for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) {
+                if (interval === toTime(metrics[i])) {
+                    const m = metrics[i++];
+                    m["range_start"] = new Date(m["range_start"]);
+                    zeroFilledMetrics.push(m);
+                } else {
+                    const m = {};
+                    m["range_start"] = new Date(interval);
+                    m[metric] = {};
+                    ports.forEach(p => m[metric][p] = 0);
+                    zeroFilledMetrics.push(m);
+                }
+            }
+        }
+
+        const series = new TimeSeries({
+            name: "statistics",
+            columns: ["time"].concat(ports),
+            points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0)))
+        });
+        const start = series.range().begin();
+        const end = series.range().end();
+        start.setTime(start.getTime() - minutes);
+        end.setTime(end.getTime() + minutes);
+
+        this.setState({
+            metric,
+            series,
+            timeRange: new TimeRange(start, end),
+            start,
+            end
+        });
+        log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`);
+    };
+
+    loadServices = async () => {
+        const services = (await backend.get("/api/services")).json;
+        this.setState({services});
+        return services;
+    };
+
+    createStyler = () => {
+        return styler(Object.keys(this.state.services).map(port => {
+            return {key: port, color: this.state.services[port].color, width: 2};
+        }));
+    };
+
+    handleTimeRangeChange = (timeRange) => {
+        if (!this.disableTimeSeriesChanges) {
+            this.setState({timeRange});
+        }
+    };
+
+    handleSelectionChange = (timeRange) => {
+        this.disableTimeSeriesChanges = true;
+
+        this.setState({selection: timeRange});
+        if (this.selectionTimeout) {
+            clearTimeout(this.selectionTimeout);
+        }
+        this.selectionTimeout = setTimeout(() => {
+            dispatcher.dispatch("timeline_updates", {
+                from: timeRange.begin(),
+                to: timeRange.end()
+            });
+            this.selectionTimeout = null;
+            this.disableTimeSeriesChanges = false;
+        }, 1000);
+    };
+
+    aggregateSeries = (func) => {
+        const values = this.state.series.columns().map(c => this.state.series[func](c));
+        return Math[func](...values);
+    };
+
+    render() {
+        if (!this.state.series) {
+            return null;
+        }
+
+        return (
+            <footer className="footer">
+                <div className="time-line">
+                    <Resizable>
+                        <ChartContainer timeRange={this.state.timeRange} enableDragZoom={false}
+                                        paddingTop={5} minDuration={60000}
+                                        maxTime={this.state.end}
+                                        minTime={this.state.start}
+                                        paddingLeft={0} paddingRight={0} paddingBottom={0}
+                                        enablePanZoom={true} utc={false}
+                                        onTimeRangeChanged={this.handleTimeRangeChange}>
+
+                            <ChartRow height="125">
+                                <YAxis id="axis1" hideAxisLine
+                                       min={this.aggregateSeries("min")}
+                                       max={this.aggregateSeries("max")} width="35" type="linear" transition={300}/>
+                                <Charts>
+                                    <LineChart axis="axis1" series={this.state.series}
+                                               columns={Object.keys(this.state.services)}
+                                               style={this.createStyler()} interpolation="curveBasis"/>
+
+                                    <MultiBrush
+                                        timeRanges={[this.state.selection]}
+                                        allowSelectionClear={false}
+                                        allowFreeDrawing={false}
+                                        onTimeRangeChanged={this.handleSelectionChange}
+                                    />
+                                </Charts>
+                            </ChartRow>
+                        </ChartContainer>
+                    </Resizable>
+
+                    <div className="metric-selection">
+                        <ChoiceField inline small
+                                     keys={["connections_per_service", "client_bytes_per_service",
+                                         "server_bytes_per_service", "duration_per_service"]}
+                                     values={["connections_per_service", "client_bytes_per_service",
+                                         "server_bytes_per_service", "duration_per_service"]}
+                                     onChange={(metric) => this.loadStatistics(metric, this.state.filteredPort)
+                                         .then(() => log.debug("Statistics loaded after metric changes"))}
+                                     value={this.state.metric}/>
+                    </div>
+                </div>
+            </footer>
+        );
+    }
+}
+
+export default withRouter(Timeline);
-- 
cgit v1.2.3-70-g09d2