158 |
181 |
159 |
160 |
161 |
174 |
179 |
180 | 
6 |
7 | ### Table of Contents
8 | * [Getting Started](#getting-started)
9 | * [Prerequisites](#prerequisites)
10 | * [Installation](#installation)
11 | * [How To Use](#how-to-use)
12 | * [Adding Workspaces](#adding-workspaces)
13 | * [Using the Monitoring Tool](#using-the-monitoring-tool)
14 | * [Using the Simulation Tool](#using-the-simulation-tool)
15 | * [Configuring Alerts](#configuring-alerts)
16 | * [Tech Stack](#tech-stack)
17 | * [Authors](#authors)
18 |
19 | ## Getting Started
20 |
21 | ### Prerequisites
22 |
23 | - Node.js v18^
24 | - Docker
25 |
26 | ### Installation
27 |
28 | This tool requires the npm package `express-endpoints-monitor` to detect and gather metrics for endpoints in your Express application. To understand how to use this plugin, see the full documentation.
29 |
30 | 1. Run the following terminal command in your project directory that you would like to begin monitoring:
31 |
32 | ```
33 | npm install express-endpoints-monitor
34 | ```
35 |
36 | This should have created a `express-endpoints-monitor/` folder in your `node_modules/` directory
37 |
38 | 2. WIP: Clone this repository. Unzip the file in a separate folder and open a terminal in this directory. Run the following commands:
39 |
40 | ```
41 | npm install
42 | npm run build
43 | ```
44 |
45 | This will install the needed dependences and build the desktop application.
46 |
47 | ### Exposing Endpoints to the Monitoring Tool
48 |
49 | 1. Open your Express application file in a text editor. At the top of the file, import the plugin by adding:
50 |
51 | ```
52 | const expMonitor = require("express-endpoints-monitor");
53 | ```
54 |
55 | This module comes with several functions to register endpoints with the monitoring application and begin log requests made to those endpoints.
56 |
57 | 2. In your file, include the following line:
58 |
59 | ```
60 | app.use(expMonitor.gatherMetrics);
61 | ```
62 |
63 | This will record metrics for incoming requests and make them available to the metrics API which will be set up later.
64 |
65 | 3. Under an endpoint that you would like to begin monitoring, include the `expMonitor.registerEndpoint` middleware. For example, this may look like:
66 |
67 | ```
68 | app.get(...,
69 | expMonitor.registerEndpoint,
70 | ...
71 | );
72 | ```
73 |
74 | The order of this function in the middleware chain is not important. This middleware will stage this particular endpoint for exporting, and can be used in multiple endpoints.
75 |
76 | 4. Once all desired endpoints have been registered, they must be exported on the metrics server. In your `app.listen` declaration, add these lines to the passed-in callback function:
77 |
78 | ```
79 | app.listen(..., function callback() {
80 | ...
81 | expMonitor.exportEndpoints();
82 | startMetricsServer(
145 |
146 | 
147 |
148 | 
149 |
150 | 
151 |
152 | 
153 |
154 | 
155 |
156 | 
157 |
158 | 
159 |
160 | 
161 |
162 | 
163 |
164 | 
165 |
166 | 
167 |
168 | ## Authors
169 |
170 | - Jo Huang LinkedIn | GitHub
171 | - Jonathan Huang LinkedIn | GitHub
172 | - Jamie Schiff LinkedIn | GitHub
173 | - Mariam Zakariadze LinkedIn | GitHub
174 |
--------------------------------------------------------------------------------
/server/controllers/influxController.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config();
2 | const { InfluxDB } = require("@influxdata/influxdb-client");
3 | const path = require("path");
4 | const influxClient = require("../models/influx-client.js");
5 |
6 | const token = process.env.DB_INFLUXDB_INIT_ADMIN_TOKEN;
7 | const org = process.env.DB_INFLUXDB_INIT_ORG;
8 | const bucket = process.env.DB_INFLUXDB_INIT_BUCKET;
9 |
10 | const queryApi = new InfluxDB({
11 | url: "http://localhost:8086",
12 | token: token
13 | }).getQueryApi({
14 | org,
15 | gzip: true,
16 | headers: {
17 | "Content-Encoding": "gzip"
18 | }
19 | });
20 |
21 | const influxController = {};
22 |
23 | let range = "1m";
24 |
25 | // declare a data object to store chart data
26 | const data = {
27 | respTimeLineData: [],
28 | respTimeHistData: [],
29 | reqFreqLineData: [],
30 | statusPieData: []
31 | };
32 |
33 | influxController.updateRange = (req, res, next) => {
34 | range = req.body.range || range;
35 | console.log(`Updated range to: ${range}`)
36 | return next();
37 | }
38 |
39 | influxController.getRespTimeLineData = (req, res, next) => {
40 | const fluxQuery = `
41 | from(bucket: "dev-bucket")
42 | |> range(start: -${range})
43 | |> filter(fn: (r) => r["_measurement"] == "monitoring${req.query?.workspaceId ? '_' + req.query.workspaceId : ''}")
44 | |> filter(fn: (r) => r["_field"] == "res_time")
45 | |> filter(fn: (r) => r["method"] == "${req.query.method}")
46 | |> filter(fn: (r) => r["path"] == "${req.query.path}")
47 | |> yield(name: "mean")
48 | `;
49 |
50 | // declare a metrics object to collect labels and data
51 | const metrics = [];
52 |
53 | queryApi.queryRows(fluxQuery, {
54 | next(row, tableMeta) {
55 | const o = tableMeta.toObject(row);
56 | metrics.push({ x: o._time, y: o._value });
57 | },
58 | error(error) {
59 | console.log("Query Finished ERROR");
60 | return next(error);
61 | },
62 | complete() {
63 | data.respTimeLineData = metrics;
64 | res.locals.data = data;
65 | // console.log("Query Finished SUCCESS");
66 | return next();
67 | }
68 | });
69 | };
70 |
71 | influxController.getRespTimeHistData = (req, res, next) => {
72 | const fluxQuery = `
73 | from(bucket: "dev-bucket")
74 | |> range(start: -${range})
75 | |> filter(fn: (r) => r["_measurement"] == "monitoring${req.query?.workspaceId ? '_' + req.query.workspaceId : ''}")
76 | |> filter(fn: (r) => r["_field"] == "res_time")
77 | |> filter(fn: (r) => r["method"] == "${req.query.method}")
78 | |> filter(fn: (r) => r["path"] == "${req.query.path}")
79 | |> histogram(bins: [0.1, 0.5, 1.0, 5.0, 10.0, 50.0, 100.0, 500.0, 1000.0, 5000.0])
80 | `;
81 |
82 | // declare a metrics object to collect labels and data
83 | const metrics = [];
84 |
85 | // declare a variable 'le' (lower than or equal to) and 'respFreq' to collect labels and data
86 | const le = [];
87 | const respFreq = [];
88 |
89 | queryApi.queryRows(fluxQuery, {
90 | next(row, tableMeta) {
91 | const o = tableMeta.toObject(row);
92 | le.push(o.le);
93 | respFreq.push(o._value);
94 | },
95 | error(error) {
96 | console.log("Query Finished ERROR");
97 | return next(error);
98 | },
99 | complete() {
100 | const newResFreq = respFreq.map((el, i) => {
101 | if (i === 0) return respFreq[i];
102 | return respFreq[i] - respFreq[i - 1];
103 | });
104 | for (let i = 0; i < newResFreq.length; i++) {
105 | metrics.push({ x: le[i], y: newResFreq[i] });
106 | }
107 | data.respTimeHistData = metrics;
108 | res.locals.data = data;
109 | // console.log("Query Finished SUCCESS");
110 | return next();
111 | }
112 | });
113 | };
114 |
115 | influxController.getReqFreqLineData = (req, res, next) => {
116 | const fluxQuery = `
117 | from(bucket: "dev-bucket")
118 | |> range(start: -${range})
119 | |> filter(fn: (r) => r["_measurement"] == "monitoring${req.query?.workspaceId ? '_' + req.query.workspaceId : ''}")
120 | |> filter(fn: (r) => r["_field"] == "res_time")
121 | |> filter(fn: (r) => r["method"] == "${req.query.method}")
122 | |> filter(fn: (r) => r["path"] == "${req.query.path}")
123 | |> aggregateWindow(every: ${(() => {switch (range) {
124 | case "1m": return "10s"
125 | case "5m": return "1m"
126 | case "30m": return "5m"
127 | default: return "10s"
128 | }
129 | })()}, fn: count, createEmpty: false)
130 | `;
131 |
132 | // declare a metrics object to collect labels and data
133 | const metrics = [];
134 |
135 | queryApi.queryRows(fluxQuery, {
136 | next(row, tableMeta) {
137 | const o = tableMeta.toObject(row);
138 | metrics.push({ x: o._time, y: o._value });
139 | },
140 | error(error) {
141 | console.log("Query Finished ERROR");
142 | return next(error);
143 | },
144 | complete() {
145 | data.reqFreqLineData = metrics;
146 | res.locals.data = data;
147 | // console.log("Query Finished SUCCESS");
148 | return next();
149 | }
150 | });
151 | };
152 |
153 | influxController.getStatusPieData = (req, res, next) => {
154 | const influxQuery = `
155 | from(bucket: "dev-bucket")
156 | |> range(start: -${range})
157 | |> filter(fn: (r) => r["_measurement"] == "monitoring${req.query?.workspaceId ? '_' + req.query.workspaceId : ''}")
158 | |> filter(fn: (r) => r["_field"] == "status_code")
159 | |> filter(fn: (r) => r["method"] == "${req.query.method}")
160 | |> filter(fn: (r) => r["path"] == "${req.query.path}")
161 | |> group(columns: ["_value"])
162 | |> count(column: "_field")
163 | |> group()
164 | `;
165 |
166 | // declare a metrics object to collect labels and data
167 | const metrics = [];
168 |
169 | // declare a stats object to collect labels and data
170 | queryApi.queryRows(influxQuery, {
171 | next(row, tableMeta) {
172 | const o = tableMeta.toObject(row);
173 | metrics.push({ x: o._value, y: o._field });
174 | },
175 | error(error) {
176 | console.log("Query Finished ERROR");
177 | return next(error);
178 | },
179 | complete() {
180 | data.statusPieData = metrics;
181 | res.locals.data = data;
182 | // console.log("Query Finished SUCCESS");
183 | return next();
184 | }
185 | });
186 | };
187 |
188 | influxController.getEndpointLogs = (req, res, next) => {
189 | const influxQuery = `
190 | from(bucket: "dev-bucket")
191 | |> range(start: -${range})
192 | |> filter(fn: (r) => r["_measurement"] == "monitoring")
193 | |> filter(fn: (r) => r["_field"] == "res_time" or r["_field"] == "status_code")
194 | |> filter(fn: (r) => r["method"] == "${req.query.method}")
195 | |> filter(fn: (r) => r["path"] == "${req.query.path}")
196 | `;
197 |
198 | // declare a logs object to collect labels and data
199 | const logs = {};
200 |
201 | // declare a stats object to collect labels and data
202 | queryApi.queryRows(influxQuery, {
203 | next(row, tableMeta) {
204 | const dataObject = tableMeta.toObject(row);
205 | if (logs[dataObject._time] === undefined) logs[dataObject._time] = {};
206 | logs[dataObject._time].timestamp = dataObject._time;
207 | logs[dataObject._time][dataObject._field] = dataObject._value;
208 | },
209 | error(error) {
210 | console.log("Query Finished ERROR");
211 | return next(error);
212 | },
213 | complete() {
214 | res.locals.logs = Object.values(logs);
215 | return next();
216 | }
217 | });
218 | };
219 |
220 | module.exports = influxController;
221 |
--------------------------------------------------------------------------------
/client/components/WorkspaceInfo.jsx:
--------------------------------------------------------------------------------
1 | import { PlayArrow, Stop, TimerOutlined } from "@mui/icons-material";
2 | import {
3 | Box,
4 | Button,
5 | ButtonGroup,
6 | Input, Typography
7 | } from "@mui/material";
8 | import React, { useState } from "react";
9 | import FlashError from "./FlashError.jsx";
10 |
11 | const WorkspaceInfo = (props) => {
12 | const {
13 | URIList,
14 | setURIList,
15 | workspaceId,
16 | name,
17 | domain,
18 | port,
19 | metricsPort,
20 | isMonitoring,
21 | setIsMonitoring,
22 | getURIListFromServer
23 | } = props;
24 | const [errorMessage, setErrorMessage] = useState("");
25 | const [searchInput, setSearchInput] = useState("");
26 | const [pingInterval, setPingInterval] = useState(1);
27 |
28 | const minPingInterval = 0.5;
29 |
30 | // const inputHandler = (e) => {
31 | // // * Convert input text to lower case
32 | // let lowerCase = e.target.value.toLowerCase();
33 | // setSearch(lowerCase);
34 | // };
35 |
36 | // const getURIListFromServer = () => {
37 | // fetch(
38 | // `http://localhost:${process.env.PORT}/routes/server?metrics_port=${metricsPort}`
39 | // )
40 | // .then((response) => response.json())
41 | // .then((data) => {
42 | // setURIList(data);
43 | // })
44 | // .catch((err) => {
45 | // setErrorMessage("Invalid server fetch request for the URI List");
46 | // // * reset the error message
47 | // setTimeout(() => setErrorMessage(""), 5000);
48 | // });
49 | // };
50 |
51 | // const getURIListFromDatabase = (workspace_id) => {
52 | // fetch(`http://localhost:${process.env.PORT}/routes/${workspace_id}`)
53 | // .then((response) => response.json())
54 | // .then((data) => {
55 | // setURIList(data);
56 | // })
57 | // .catch((err) => {
58 | // setErrorMessage("Invalid db fetch request for the URI List");
59 | // // * reset the error message
60 | // setTimeout(() => setErrorMessage(""), 5000);
61 | // });
62 | // };
63 |
64 | const handleStartMonitoringClick = (e) => {
65 | if (pingInterval === undefined || pingInterval < minPingInterval) return;
66 | e.preventDefault();
67 | fetch(`http://localhost:${process.env.PORT}/monitoring`, {
68 | method: "POST",
69 | headers: {
70 | "Content-Type": "application/json"
71 | },
72 | body: JSON.stringify({
73 | active: true,
74 | domain,
75 | interval: pingInterval,
76 | metricsPort,
77 | mode: "monitoring",
78 | port,
79 | verbose: true,
80 | workspaceId
81 | })
82 | })
83 | .then((serverResponse) => {
84 | if (serverResponse.ok) {
85 | setIsMonitoring(true);
86 | }
87 | })
88 | .catch((err) => {
89 | console.log("there was an error attempting to start monitoring: ", err);
90 | setErrorMessage(
91 | `Invalid POST request to start monitoring, error: ${err}`
92 | );
93 | });
94 | };
95 |
96 | const handleStopMonitoringClick = (e) => {
97 | e.preventDefault();
98 | setIsMonitoring(false);
99 | fetch(`http://localhost:${process.env.PORT}/monitoring`, {
100 | method: "POST",
101 | headers: {
102 | "Content-Type": "application/json"
103 | },
104 | body: JSON.stringify({
105 | active: false,
106 | verbose: true,
107 | workspaceId
108 | })
109 | })
110 | .then((serverResponse) => {
111 | if (serverResponse.ok) {
112 | setIsMonitoring(false);
113 | }
114 | })
115 | .catch((err) => {
116 | console.log("there was an error attempting to stop monitoring: ", err);
117 | setErrorMessage(
118 | `Invalid POST request to stop monitoring, error: ${err}`
119 | );
120 | });
121 | };
122 |
123 | return (
124 | 159 |
191 |
192 | {errorMessage !== "" ? (
193 |
214 |
215 |
*/}
245 |
246 | | Tracking | 217 |Path | 218 |Method | 219 |Status Code | 220 |Simulate User Activity | 221 |
|---|
64 | //
65 | //
75 | //
83 | //
108 | //
66 | //
73 | //
74 | //
84 | // {workspaceList.map((workspace) => {
85 | // const workspace_id = workspace._id;
86 | // const name = workspace.name;
87 | // const domain = workspace.domain;
88 | // return (
89 | //
107 | //
90 | //
104 | // );
105 | // })}
106 | // {
95 | // navigate(`/urilist/${workspace_id}`, {
96 | // state: { workspace_id, name, domain }
97 | // });
98 | // toggleMenu();
99 | // }}
100 | // >
101 | // {name}
102 | //
103 | // -
193 | {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
194 |
-
218 | {["All mail", "Trash", "Spam"].map((text, index) => (
219 |