;
- this.queryStringRedirect = false;
- }
-
- let loading = null;
- if (this.state.loading) {
- loading =
- | Loading... |
-
;
- }
-
- return (
-
- {this.state.showMoreRecentButton &&
- {
- this.disableScrollHandler = true;
- this.connectionsListRef.current.scrollTop = 0;
- this.loadConnections({limit: this.queryLimit})
- .then(() => {
- this.disableScrollHandler = false;
- log.info("Most recent connections loaded");
- });
- }}/>
-
}
-
-
-
-
-
- | service |
- srcip |
- srcport |
- dstip |
- dstport |
- started_at |
- duration |
- up |
- down |
- actions |
-
-
-
- {
- this.state.connections.flatMap((c) => {
- return [ this.connectionSelected(c)}
- selected={this.state.selected === c.id}
- onMarked={(marked) => c.marked = marked}
- onCommented={(comment) => c.comment = comment}
- services={this.state.services}/>,
- c.matched_rules.length > 0 &&
-
- ];
- })
- }
- {loading}
-
-
-
- {redirect}
-
-
-
-
-
- {
- this.el = el;
- }}/>
-
-
-
-
- {this.state.backgroundPane}
-
-
- Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
- Completed at {completedAt.toLocaleDateString() + " " + completedAt.toLocaleTimeString()}
-
;
-
- return
- |
-
-
- |
- {durationBetween(s["started_at"], s["completed_at"])} |
- {formatSize(s["size"])} |
- {s["processed_packets"]} |
- {s["invalid_packets"]} |
- |
- download
- |
-
;
- });
-
- const handleUploadFileChange = (file) => {
- this.setState({
- isUploadFileValid: file == null || (file.type.endsWith("pcap") || file.type.endsWith("pcapng")),
- isUploadFileFocused: false,
- uploadSelectedFile: file,
- uploadStatusCode: null,
- uploadResponse: null
- });
- };
-
- const handleFileChange = (file) => {
- this.setState({
- isFileValid: (file.endsWith("pcap") || file.endsWith("pcapng")),
- isFileFocused: false,
- fileValue: file,
- processStatusCode: null,
- processResponse: null
- });
- };
-
- const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, {
- "file": "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
- this.state.uploadSelectedFile.name : "invalid.pcap"),
- "flush_all": this.state.uploadFlushAll
- });
-
- const fileCurlCommand = createCurlCommand("/pcap/file", "POST", {
- "file": this.state.fileValue,
- "flush_all": this.state.processFlushAll,
- "delete_original_file": this.state.deleteOriginalFile
- });
-
- return (
-
-
-
- GET /api/pcap/sessions
-
-
-
-
-
-
-
-
- | id |
- started_at |
- duration |
- size |
- processed_packets |
- invalid_packets |
- packets_per_service |
- actions |
-
-
-
- {sessions}
-
-
-
-
-
-
-
-
-
- POST /api/pcap/upload
-
-
-
-
-
-
-
- options:
- this.setState({uploadFlushAll: v})}/>
-
-
-
-
-
-
-
-
-
-
- POST /api/pcap/file
-
-
-
-
-
-
-
-
- this.setState({processFlushAll: v})}/>
- this.setState({deleteOriginalFile: v})}/>
-
-
-
-
-
-
-
-
-
{
- this.reset();
- this.setState({ selectedRule: _.cloneDeep(r) });
- }} className={classNames("row-small", "row-clickable", { "row-selected": rule.id === r.id })}>
- |
- {r["name"]} |
- |
- {r["notes"]} |
-
- );
-
- let patterns = (this.state.selectedPattern == null && !isUpdate ?
- rule.patterns.concat(this.state.newPattern) :
- rule.patterns
- ).map((p) => p === pattern ?
-
- |
- {
- this.updateParam(() => pattern.regex = v);
- this.setState({ patternRegexFocused: pattern.regex === "" });
- }} />
- |
- this.updateParam(() => pattern.flags["caseless"] = v)} /> |
- this.updateParam(() => pattern.flags["dot_all"] = v)} /> |
- this.updateParam(() => pattern.flags["multi_line"] = v)} /> |
- this.updateParam(() => pattern.flags["utf_8_mode"] = v)} /> |
- this.updateParam(() => pattern.flags["unicode_property"] = v)} /> |
-
- this.updateParam(() => pattern["min_occurrences"] = v)} />
- |
-
- this.updateParam(() => pattern["max_occurrences"] = v)} />
- |
- s", "s->c"]}
- value={this.directions[pattern.direction]}
- onChange={(v) => this.updateParam(() => pattern.direction = v)} /> |
- {this.state.selectedPattern == null ?
- this.addPattern(p)} /> :
- this.updatePattern(p)} />}
- |
-
- :
-
- | {p.regex} |
- {p.flags["caseless"] ? "yes" : "no"} |
- {p.flags["dot_all"] ? "yes" : "no"} |
- {p.flags["multi_line"] ? "yes" : "no"} |
- {p.flags["utf_8_mode"] ? "yes" : "no"} |
- {p.flags["unicode_property"] ? "yes" : "no"} |
- {p["min_occurrences"]} |
- {p["max_occurrences"]} |
- {this.directions[p.direction]} |
-
- this.editPattern(p)}
- />
- |
-
- );
-
- return (
-
-
-
- GET /api/rules
- {this.state.rulesStatusCode &&
- }
-
-
-
-
-
-
-
- | id |
- name |
- color |
- notes |
-
-
-
- {rules}
-
-
-
-
-
-
-
-
-
- {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"}
-
-
-
-
-
-
-
-
- this.updateParam((r) => r.name = v)}
- error={this.state.ruleNameError} />
- this.updateParam((r) => r.color = v)} />
- this.updateParam((r) => r.notes = v)} />
-
-
-
- filters:
- this.updateParam((r) => r.filter["service_port"] = v)}
- min={0}
- max={65565}
- error={this.state.ruleServicePortError}
- />
- this.updateParam((r) => r.filter["client_port"] = v)}
- min={0}
- max={65565}
- error={this.state.ruleClientPortError}
- />
- this.updateParam((r) => r.filter["client_address"] = v)} />
-
-
-
- this.updateParam((r) => r.filter["min_duration"] = v)} />
- this.updateParam((r) => r.filter["max_duration"] = v)} />
- this.updateParam((r) => r.filter["min_bytes"] = v)} />
- this.updateParam((r) => r.filter["max_bytes"] = v)} />
-
-
-
-
-
-
-
-
- | regex |
- !Aa |
- .* |
- \n+ |
- UTF8 |
- Uni_ |
- min |
- max |
- direction |
- {!isUpdate && actions | }
-
-
-
- {patterns}
-
-
- {this.state.rulePatternsError != null &&
-
error: {this.state.rulePatternsError}}
-
-
-
-
- {}
-
-
-
-
-
- | {s.id.substring(0, 8)} |
- {this.extractPattern(s["search_options"])} |
- {s["affected_connections_count"]} |
- {dateTimeToTime(s["started_at"])} |
- {durationBetween(s["started_at"], s["finished_at"])} |
- this.viewSearch(s.id)}/> |
-
- );
-
- const textOptionsModified = !_.isEqual(this.searchOptions.text_search, options.text_search);
- const regexOptionsModified = !_.isEqual(this.searchOptions.regex_search, options.regex_search);
-
- const curlCommand = createCurlCommand("/searches/perform", "POST", options);
-
- return (
-
-
-
- GET /api/searches
- {this.state.searchesStatusCode &&
- }
-
-
-
-
-
-
-
- | id |
- pattern |
- occurrences |
- started_at |
- duration |
- actions |
-
-
-
- {searches}
-
-
-
-
-
-
-
-
- POST /api/searches/perform
-
-
-
-
-
- NOTE: it is recommended to use the rules for recurring themes. Give preference to textual search over that with regex.
-
-
-
-
- {
- return {name: t};
- })}
- name="terms" min={3} inline allowNew={true}
- readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
- onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map((t) => t.name))}/>
- {
- return {name: t};
- })}
- name="excluded_terms" min={3} inline allowNew={true}
- readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
- onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map((t) => t.name))}/>
-
- or
-
- this.updateParam((s) => s["text_search"]["exact_phrase"] = v)}
- readonly={regexOptionsModified || (Array.isArray(options["text_search"].terms) && options["text_search"].terms.length > 0)}/>
-
- this.updateParam((s) => s["text_search"]["case_sensitive"] = v)}/>
-
-
-
- or
-
-
-
-
this.updateParam((s) => s["regex_search"].pattern = v)}/>
- or
- this.updateParam((s) => s["regex_search"]["not_pattern"] = v)}/>
-
-
- this.updateParam((s) => s["regex_search"]["case_insensitive"] = v)}/>
- this.updateParam((s) => s["regex_search"]["multi_line"] = v)}/>
- this.updateParam((s) => s["regex_search"]["ignore_whitespaces"] = v)}/>
- this.updateParam((s) => s["regex_search"]["dot_character"] = v)}/>
-
-
-
-
-
-
-
-
-
-
-
-
-
{
- this.reset();
- this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
- }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port})}>
- | {s["port"]} |
- {s["name"]} |
- |
- {s["notes"]} |
-
- );
-
- const curlCommand = createCurlCommand("/services", "PUT", service);
-
- return (
-
-
-
- GET /api/services
- {this.state.servicesStatusCode &&
- }
-
-
-
-
-
-
-
- | port |
- name |
- color |
- notes |
-
-
-
- {services}
-
-
-
-
-
-
-
-
- PUT /api/services
-
-
-
-
-
-
-
- this.updateParam((s) => s.port = v)}
- min={0} max={65565} error={this.state.servicePortError}/>
- this.updateParam((s) => s.name = v)}
- error={this.state.serviceNameError}/>
- this.updateParam((s) => s.color = v)}/>
-
-
-
- this.updateParam((s) => s.notes = v)}/>
-
-
-
-
-
-
-
-
- {}
- {isUpdate && }
-
-
-
-
- | {port} |
- {formatSize(s["connections_per_service"][port])} |
- {formatSize(s["client_bytes_per_service"][port])}B |
- {formatSize(s["server_bytes_per_service"][port])}B |
- {formatSize(s["total_bytes_per_service"][port])}B |
- {formatSize(s["duration_per_service"][port] / 1000)}s |
-
;
- });
- servicesStats.push(
- | totals |
- {formatSize(connections)} |
- {formatSize(clientBytes)}B |
- {formatSize(serverBytes)}B |
- {formatSize(totalBytes)}B |
- {formatSize(duration / 1000)}s |
-
);
-
- const rulesStats = this.state.rules.map((r) =>
-
- |
- {r["name"]} |
- |
- {formatSize(s && s["matched_rules"] && s["matched_rules"][r.id] ? s["matched_rules"][r.id] : 0)} |
-
- );
-
- const cpuStats = (rs ? rs["cpu_times"] : []).map((cpu, index) =>
-
- | {cpu["cpu"]} |
- {cpu["user"]} |
- {cpu["system"]} |
- {cpu["idle"]} |
- {cpu["nice"]} |
- {cpu["iowait"]} |
- {rs["cpu_percents"][index].toFixed(2)} % |
-
- );
-
- return (
-
-
-
- GET /api/statistics/totals
-
-
-
-
-
-
-
-
- | service |
- connections |
- client_bytes |
- server_bytes |
- total_bytes |
- duration |
-
-
-
- {servicesStats}
-
-
-
-
-
-
-
-
- | rule_id |
- rule_name |
- rule_color |
- occurrences |
-
-
-
- {rulesStats}
-
-
-
-
-
-
-
-
- GET /api/resources/system
-
-
-
-
-
-
-
-
- | type |
- total |
- used |
- free |
- shared |
- buff/cache |
- available |
-
-
-
-
- | mem |
- {rs && formatSize(rs["virtual_memory"]["total"])} |
- {rs && formatSize(rs["virtual_memory"]["used"])} |
- {rs && formatSize(rs["virtual_memory"]["free"])} |
- {rs && formatSize(rs["virtual_memory"]["shared"])} |
- {rs && formatSize(rs["virtual_memory"]["cached"])} |
- {rs && formatSize(rs["virtual_memory"]["available"])} |
-
-
- | swap |
- {rs && formatSize(rs["virtual_memory"]["swaptotal"])} |
- {rs && formatSize(rs["virtual_memory"]["swaptotal"])} |
- {rs && formatSize(rs["virtual_memory"]["swapfree"])} |
- - |
- - |
- - |
-
-
-
-
-
-
-
-
-
- | cpu |
- user |
- system |
- idle |
- nice |
- iowait |
- used_percent |
-
-
-
- {cpuStats}
-
-
-
-
-
-
-
-
- | disk_path |
- fs_type |
- total |
- free |
- used |
- used_percent |
-
-
-
-
- | {rs && rs["disk_usage"]["path"]} |
- {rs && rs["disk_usage"]["fstype"]} |
- {rs && formatSize(rs["disk_usage"]["total"])} |
- {rs && formatSize(rs["disk_usage"]["free"])} |
- {rs && formatSize(rs["disk_usage"]["used"])} |
- {rs && rs["disk_usage"]["usedPercent"].toFixed(2)} % |
-
-
-
-
-
-
-
- {key}: {value}
-
- ));
-
- let m = connectionMessage.metadata;
- switch (m.type) {
- case "http-request":
- let url = (
-
-
-
- {m.host}
- {m.url}
-
-
-
- );
- return (
-
-
- {m.method} {url} {m.protocol}
-
- {unrollMap(m.headers)}
-
- {this.highlightRules(m.body, isClient)}
-
- {unrollMap(m.trailers)}
-
- );
- case "http-response":
- const contentType = getHeaderValue(m, "Content-Type");
- let body = m.body;
- if (contentType && contentType.includes("application/json")) {
- try {
- const json = JSON.parse(m.body);
- if (typeof json === "object") {
- body = (
-
- );
- }
- } catch (e) {
- log.error(e);
- }
- }
-
- return (
-
-
- {m.protocol} {m.status}
-
- {unrollMap(m.headers)}
-
- {this.highlightRules(body, isClient)}
-
- {unrollMap(m.trailers)}
-
- );
- default:
- return this.highlightRules(connectionMessage.content, isClient);
- }
- };
-
- highlightRules = (content, isClient) => {
- let streamContent = content;
- this.props.connection["matched_rules"].forEach((ruleId) => {
- const rule = rules.ruleById(ruleId);
- rule.patterns.forEach((pattern) => {
- if (
- (!isClient && pattern.direction === 1) ||
- (isClient && pattern.direction === 2)
- ) {
- return;
- }
- let flags = "";
- pattern["caseless"] && (flags += "i");
- pattern["dot_all"] && (flags += "s");
- pattern["multi_line"] && (flags += "m");
- pattern["unicode_property"] && (flags += "u");
- const regex = new RegExp(
- pattern.regex.replace(/^\//, "(").replace(/\/$/, ")"),
- flags
- );
- streamContent = reactStringReplace(streamContent, regex, (match, i) => (
-
- {match}
-
- ));
- });
- });
-
- return streamContent;
- };
-
- connectionsActions = (connectionMessage) => {
- if (!connectionMessage.metadata) {
- return null;
- }
-
- const m = connectionMessage.metadata;
- switch (m.type) {
- case "http-request":
- if (!connectionMessage.metadata["reproducers"]) {
- return;
- }
- return Object.entries(connectionMessage.metadata["reproducers"]).map(
- ([name, value]) => (
- {
- this.setState({
- messageActionDialog: (
-
- this.setState({ messageActionDialog: null })
- }
- />
- ),
- });
- }}
- />
- )
- );
- case "http-response":
- const contentType = getHeaderValue(m, "Content-Type");
-
- if (contentType && contentType.includes("text/html")) {
- return (
- {
- let w;
- if (
- this.state.renderWindow &&
- !this.state.renderWindow.closed
- ) {
- w = this.state.renderWindow;
- } else {
- w = window.open(
- "",
- "",
- "width=900, height=600, scrollbars=yes"
- );
- this.setState({ renderWindow: w });
- }
- w.document.body.innerHTML = DOMPurify.sanitize(m.body);
- w.focus();
- }}
- />
- );
- }
- break;
- default:
- return null;
- }
- };
-
- downloadStreamRaw = (value) => {
- if (this.state.currentId) {
- backend
- .download(
- `/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`
- )
- .then((res) =>
- downloadBlob(
- res.blob,
- `${this.state.currentId}-${value}-${this.state.format}.txt`
- )
- )
- .catch((_) => log.error("Failed to download stream messages"));
- }
- };
-
- closeRenderWindow = () => {
- if (this.state.renderWindow) {
- this.state.renderWindow.close();
- }
- };
-
- render() {
- const conn = this.props.connection || {
- ip_src: "0.0.0.0",
- ip_dst: "0.0.0.0",
- port_src: "0",
- port_dst: "0",
- started_at: new Date().toISOString(),
- };
- const content = this.state.messages || [];
-
- let payload = content
- .filter(
- (c) =>
- !this.state.tryParse ||
- (this.state.tryParse && !c["is_metadata_continuation"])
- )
- .map((c, i) => (
-
-
-
-
-
- offset: {c.index}
- {" "}
- |{" "}
-
- timestamp: {c.timestamp}
- {" "}
- |{" "}
-
- retransmitted:{" "}
- {c["is_retransmitted"] ? "yes" : "no"}
-
-
-
- {this.connectionsActions(c)}
-
-
-
-
- {c["from_client"] ? "client" : "server"}
-
-
- {this.state.tryParse && this.state.format === "default"
- ? this.tryParseConnectionMessage(c)
- : c.content}
-
-
-
-
-
-
- flow: {conn["ip_src"]}:{conn["port_src"]} ->{" "}
- {conn["ip_dst"]}:{conn["port_dst"]}
-
-
- {" "}
- | timestamp: {conn["started_at"]}
-
-
-
-
-
-
-
-
-
-
-
-
-
{payload}
- {this.state.messageActionDialog}
-