(([mac, map]) => {
114 | const info = this.props.deviceInfos.get(mac);
115 | const footer = `
116 | MAC: ${mac} ${info?.vendor?.join(", ") || "???"}
117 | Hostnames:
${
118 | info?.hostnames?.join("
") || "???"
119 | }
120 | IPs:
${info?.ips?.join("
") || "???"}
121 | `;
122 | return {
123 | name: (info && getNiceHostname(info)) || mac,
124 | type: "line",
125 | tooltip: {
126 | footerFormat: footer,
127 | },
128 | data: lazy(map)
129 | .mapToTuple(([time, amount]) => [
130 | time,
131 | Math.round(
132 | 100 * uptimePart(amount, meUptime.get(time)),
133 | ),
134 | ])
135 | .intersplice((left, right) => {
136 | const distance = right[0] - left[0];
137 | if (distance < minDistance) minDistance = distance;
138 | if (distance >= minDistance * 2)
139 | return [
140 | [left[0] + logIntervalMS, null],
141 | [right[0] - logIntervalMS, null],
142 | ] as [number, number | null][];
143 | else return [];
144 | })
145 | .collect(),
146 | };
147 | });
148 | data.sort((a, b) => (a.name || "").localeCompare(b.name || ""));
149 | let showHideFlag = false;
150 | const co: Highcharts.Options = {
151 | chart: { type: "line", zoomType: "x" },
152 | title: { text: this.props.title },
153 | time: { useUTC: true },
154 | xAxis: {
155 | type: "datetime",
156 | },
157 | tooltip: {
158 | valueSuffix: "%",
159 | },
160 | plotOptions: {
161 | line: { marker: { enabled: false }, animation: false },
162 | series: {
163 | events: {
164 | legendItemClick() {
165 | const chart = this.chart;
166 | const series = chart.series;
167 | if (this.index === 0) {
168 | if (!showHideFlag) {
169 | series.forEach((series) => series.hide());
170 | } else {
171 | series.forEach((series) => series.show());
172 | }
173 | showHideFlag = !showHideFlag;
174 | this.hide();
175 | }
176 | },
177 | },
178 | },
179 | },
180 | yAxis: {
181 | title: { text: "Online" },
182 | labels: { format: "{value:%.0f}%" },
183 | min: 0,
184 | max: 100,
185 | },
186 | /*legend: {
187 | layout: "vertical",
188 | },*/
189 | // tooltip: {},
190 | series: [
191 | {
192 | name: "Show/Hide all",
193 | visible: true,
194 | type: "line",
195 | },
196 | ...data,
197 | ],
198 | };
199 | if (this.props.highchartsOptions) this.props.highchartsOptions(co);
200 | this.chartOptions = co;
201 | }
202 | render(): React.ReactElement {
203 | return (
204 | (this.chart = chart)}
207 | />
208 | );
209 | }
210 | }
211 |
--------------------------------------------------------------------------------
/src/CustomyChart.tsx:
--------------------------------------------------------------------------------
1 | import { observer, useLocalStore } from "mobx-react-lite";
2 | import * as React from "react";
3 | import { CommonChartData } from "./AggregatedChart";
4 | import {
5 | Granularities,
6 | GranularityChoosingChart,
7 | } from "./GranularityChoosingChart";
8 | import { DateRounder, setHighchartsOptionsForPreset } from "./util";
9 |
10 | export const presets = {
11 | weekly: {
12 | title: "Weekly",
13 | headerFormat: `{point.key:%A %H:%M}
`,
14 | xAxisLabels: { format: "{value:%a. %H:%M}" },
15 | offset: (d: Date): Date => {
16 | d.setFullYear(1970);
17 | d.setMonth(0, d.getDay() + 5);
18 | return d;
19 | },
20 | },
21 | daily: {
22 | title: "Daily",
23 | headerFormat: `{point.key:%H:%M}
`,
24 | xAxisLabels: { format: "{value:%H:%M}" },
25 | offset: (d: Date): Date => {
26 | d.setFullYear(1970);
27 | d.setMonth(0, 1);
28 | return d;
29 | },
30 | },
31 | };
32 | export type Preset = typeof presets["weekly"];
33 |
34 | function useTwoWay(
35 | initialValue: V,
36 | get: (t: T) => V,
37 | set: (v: V) => Partial,
38 | ) {
39 | const store = useLocalStore(() => ({ value: initialValue }));
40 | return {
41 | value: store.value,
42 | props: {
43 | onChange: (e: React.ChangeEvent) =>
44 | (store.value = get(e.currentTarget)),
45 | ...set(store.value),
46 | },
47 | };
48 | }
49 | function useTwoWayDate(initialDate: Date) {
50 | return useTwoWay<
51 | Pick,
52 | Date | null
53 | >(
54 | initialDate,
55 | (e) => e.valueAsDate,
56 | (v) => ({ value: v ? v.toISOString().slice(0, 10) : "" }),
57 | );
58 | }
59 | const defaultOldDate = new Date();
60 | defaultOldDate.setDate(defaultOldDate.getDate() - 31);
61 |
62 | function _CustomyChart({
63 | granularities,
64 | ...props
65 | }: { granularities: Granularities } & CommonChartData) {
66 | const fromDate = useTwoWayDate(defaultOldDate);
67 | const toDate = useTwoWayDate(new Date());
68 |
69 | type AggChoice = "none" | keyof typeof presets;
70 | const aggregationChoices = ["none", ...Object.keys(presets)] as AggChoice[];
71 | const data = useLocalStore(() => ({
72 | aggregator: aggregationChoices[0],
73 | offsetter: ((d: Date) => d) as DateRounder,
74 | active: false,
75 | title: "Custom Chart",
76 | preset: null as null | typeof presets.daily,
77 | rerender() {
78 | this.active = true;
79 | this.preset =
80 | data.aggregator !== "none" ? presets[data.aggregator] : null;
81 |
82 | this.offsetter = (d: Date) => {
83 | if (
84 | (fromDate.value && d < fromDate.value) ||
85 | (toDate.value && d > toDate.value)
86 | )
87 | return null;
88 | return this.preset ? this.preset.offset(d) : d;
89 | };
90 | },
91 | }));
92 | return (
93 |
94 |
Custom Filter
95 | From To{" "}
96 |
97 | Aggregator{" "}
98 |
110 |
111 | {data.active && (
112 |
127 | )}
128 |
129 | );
130 | }
131 | export const CustomyChart = observer(_CustomyChart);
132 |
--------------------------------------------------------------------------------
/src/GranularityChoosingChart.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { AggregatedChart, SingleChartData } from "./AggregatedChart";
3 | import { DateRounder } from "./util";
4 |
5 | export type Granularities = [string, DateRounder][];
6 |
7 | export type GranularityChoosingChartData = SingleChartData & {
8 | initialGranularity: string;
9 | granularities: Granularities;
10 | offsetter?: DateRounder;
11 | };
12 |
13 | export class GranularityChoosingChart extends React.Component<
14 | GranularityChoosingChartData,
15 | {
16 | granularity: string;
17 | }
18 | > {
19 | constructor(props: GranularityChoosingChartData) {
20 | super(props);
21 | this.state = { granularity: props.initialGranularity };
22 | }
23 | render(): React.ReactElement {
24 | const rounder = this.props.granularities.find(
25 | (k) => k[0] === this.state.granularity,
26 | )?.[1];
27 | if (!rounder) return <>no rounder found;
28 | let rounder2 = rounder;
29 | const offsetter = this.props.offsetter;
30 | if (offsetter) {
31 | rounder2 = (date) => {
32 | const rounded = rounder(date);
33 | if (!rounded) return null;
34 | else return offsetter(rounded);
35 | };
36 | }
37 | return (
38 |
39 |
40 | Granularity:{" "}
41 |
55 |
31 | {list.map((str, i) => (
32 | - {str}
33 | ))}
34 |
35 | );
36 | const HostInfoLine = (
37 | info: DeviceInfo & { mac: string; upTime: number; upRelative: number },
38 | ) => (
39 |
40 | {[
41 | info.displayname,
42 | `${info.mac} ${
43 | info.vendor.length > 0 ? `(${info.vendor.join(", ")})` : ""
44 | }`,
45 | ,
46 | ,
47 | info.upTime.toFixed(0) + "h",
48 | `${(info.upRelative * 100) | 0}%`,
49 | ].map((x, i) => (
50 | | {x} |
51 | ))}
52 |
53 | );
54 |
55 | export const GuiContainer: React.FunctionComponent<{
56 | dataUsage?: number;
57 | children?: React.ReactNode;
58 | }> = ({ dataUsage = 0, children = {} }) => (
59 |
60 |
66 | {children}
67 |
68 |
88 |
98 |
111 | {props.prefix}
112 | {props.progress}
113 | {props.suffix}
114 |
115 |
146 |
152 | Date.now() - date.getTime() < 1000 * 60 * 60 * 24 * 31
153 | ? date
154 | : null
155 | }
156 | />
157 |
158 |
164 |
165 |
176 |
177 |
188 |
189 |
193 |
194 | Totals
195 |
196 |
197 |
198 |
199 | {"Name,Mac,Hostnames,IPs,Recorded Uptime,Average Uptime"
200 | .split(",")
201 | .map((x) => (
202 | | {x} |
203 | ))}
204 |
205 |
206 |
207 | {[...this.props.deviceInfos]
208 | .sort(
209 | ([_a, i1], [_b, i2]) =>
210 | i2.upCount - i1.upCount,
211 | )
212 | .map(([mac, h]) => (
213 |
228 | ))}
229 |
230 |
231 |
93 | Error: {String(e)}.
94 | See F12 console for more details.
95 |
96 | ,
97 | target,
98 | );
99 | console.error("run error", e);
100 | });
101 |
--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
1 | import { lazy } from "./lazy";
2 | import { NmapLog, MacToInfo } from "./db";
3 | import { Config } from "./config";
4 | import type { Preset } from "./CustomyChart";
5 |
6 | export function levelInvert(
7 | map: Map>,
8 | defaultValue: D,
9 | ): Map> {
10 | const bs = lazy(map.values())
11 | .flatMap((innerMap) => innerMap.keys())
12 | .unique()
13 | .collect();
14 | const as = [...map.keys()];
15 | const innerMap = (b: B) =>
16 | lazy(as).toMapKeyed(
17 | (a) => a,
18 | (a) => map.get(a)!.get(b) || defaultValue,
19 | );
20 | return new Map>(lazy(bs).toMapKeyed((b) => b, innerMap));
21 | }
22 |
23 | export function roundDate(
24 | date: Date,
25 | weekday: number,
26 | hours: number,
27 | minutes = 60,
28 | ): Date {
29 | date.setDate(date.getDate() - (date.getDay() % weekday));
30 | date.setHours(date.getHours() - (date.getHours() % hours));
31 | date.setMinutes(date.getMinutes() - (date.getMinutes() % minutes), 0, 0);
32 | return date;
33 | }
34 |
35 | export function setHighchartsOptionsForPreset(
36 | preset: Preset,
37 | o: Highcharts.Options,
38 | ): void {
39 | if (!o.tooltip) o.tooltip = {};
40 | o.tooltip.headerFormat = preset.headerFormat;
41 | if (!o.xAxis) o.xAxis = {};
42 | if (Array.isArray(o.xAxis)) throw Error("can't handle multiple x");
43 | o.xAxis.labels = preset.xAxisLabels;
44 | }
45 |
46 | export type DateRounder = (d: Date) => Date | null;
47 | function assumeNonNull(t: T | null | undefined, varname = "var"): T {
48 | if (t == null || t === undefined)
49 | throw Error(`${varname} can't be ${String(t)}`);
50 | return t;
51 | }
52 | interface parseXMLReturn {
53 | online: NmapLog;
54 | newInfos: MacToInfo[];
55 | }
56 | function hasChildren(obj: T): obj is T & { children: HTMLCollection } {
57 | return !!(obj as { children?: HTMLCollection }).children;
58 | }
59 |
60 | export function uptimePart(t: number, meUptime: number | undefined): number {
61 | if (!meUptime) {
62 | console.warn("could not get own uptime");
63 | // don't know how long we were up or meUptime = 0
64 | return t;
65 | } else return t / meUptime;
66 | }
67 |
68 | export function parseXML(
69 | config: Config,
70 | filename: string,
71 | xml: string,
72 | ): parseXMLReturn | null {
73 | /*const sax1 = await import('sax-wasm');
74 | const sax = await import('sax-wasm/lib/sax-wasm.wasm');
75 | console.log({sax1, sax});*/
76 | const parser = new DOMParser();
77 | const doc = parser.parseFromString(xml, "application/xml").documentElement;
78 | const time = new Date(1000 * +doc.getAttribute("start")!);
79 | if (time < new Date(2000, 0))
80 | // RTC has not been set, ignore scan
81 | return null;
82 | const scan: parseXMLReturn = {
83 | online: { time: time.getTime(), devices: new Set() },
84 | newInfos: [],
85 | };
86 | for (const h of Array.from(doc.children)) {
87 | if (h.nodeName === "parsererror") {
88 | console.warn(`parsing error in ${filename}`);
89 | return null;
90 | }
91 | if (h.nodeName !== "host") {
92 | if (
93 | ["verbose", "debugging", "runstats", "target"].indexOf(
94 | h.nodeName,
95 | ) >= 0
96 | )
97 | continue;
98 | else throw Error("unexpected " + h.nodeName);
99 | }
100 |
101 | let mac = "";
102 | if (!hasChildren(h)) throw Error("no children");
103 | const ips: string[] = [],
104 | hostnames: string[] = [];
105 | for (const a of Array.from(h.children)) {
106 | if (a.nodeName === "status") {
107 | if (a.getAttribute("reason") === "localhost-response")
108 | mac = config.selfMacAddress;
109 | }
110 | if (a.nodeName === "address") {
111 | const type = a.getAttribute("addrtype");
112 | if (type === "mac") {
113 | mac = assumeNonNull(a.getAttribute("addr"), "mac");
114 | scan.newInfos.push({
115 | mac,
116 | type: "vendor",
117 | info: a.getAttribute("vendor") || "",
118 | });
119 | } else if (type === "ipv4") {
120 | ips.push(assumeNonNull(a.getAttribute("addr"), "ipv4"));
121 | }
122 | } else if (a.nodeName === "hostnames") {
123 | if (!hasChildren(a)) throw Error("no children");
124 | for (const child of Array.from(a.children))
125 | if (child.tagName === "hostname")
126 | hostnames.push(
127 | assumeNonNull(
128 | child.getAttribute("name"),
129 | "hostname",
130 | ),
131 | );
132 | }
133 | }
134 | if (!mac) {
135 | console.warn("no mac address found", doc, h);
136 | continue;
137 | }
138 | scan.online.devices.add(mac);
139 | scan.newInfos.push(
140 | ...ips.map((ip) => ({ mac, type: "ip", info: ip } as MacToInfo)),
141 | );
142 | scan.newInfos.push(
143 | ...hostnames.map(
144 | (hostname) =>
145 | ({ mac, type: "hostname", info: hostname } as MacToInfo),
146 | ),
147 | );
148 | }
149 | return scan;
150 | }
151 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "experimentalDecorators": true,
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "target": "es2019",
7 | "noImplicitAny": true,
8 | "noEmit": true,
9 | "isolatedModules": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "strict": true,
13 | "noImplicitThis": true,
14 | "noImplicitReturns": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "outDir": "bin",
17 | "allowSyntheticDefaultImports": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------