diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index c1c210f..96ebc49 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
import {OverlayTrigger, Popover} from "react-bootstrap";
import './ColorField.scss';
import InputField from "../InputField";
+import validation from "../../../validation";
class ColorField extends Component {
@@ -15,11 +16,24 @@ class ColorField extends Component {
"#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
}
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if (prevProps.value !== this.props.value) {
+ this.onChange(this.props.value);
+ }
+ }
+
+ onChange = (value) => {
+ this.setState({invalid: value !== "" && !validation.isValidColor(value)});
+
+ if (typeof this.props.onChange === "function") {
+ this.props.onChange(value);
+ }
+ };
+
render() {
const colorButtons = this.colors.map((color) =>
{
- this.setState({color: color});
if (typeof this.props.onChange === "function") {
this.props.onChange(color);
}
@@ -43,18 +57,22 @@ class ColorField extends Component {
);
let buttonStyles = {};
- if (this.state.color) {
- buttonStyles["backgroundColor"] = this.state.color;
+ if (this.props.value) {
+ buttonStyles["backgroundColor"] = this.props.value;
}
return (
-
-
-
-
-
+
+ {this.props.error &&
{this.props.error}
}
);
}
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index 1c3931f..6eabbda 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -1,29 +1,37 @@
@import '../../../colors.scss';
.color-field {
- display: flex;
- align-items: flex-end;
+ .color-input {
+ display: flex;
+ align-items: flex-end;
- .input-field {
- flex: 1;
+ .input-field {
+ flex: 1;
- input {
- border-bottom-right-radius: 0 !important;
- border-top-right-radius: 0 !important;
+ input {
+ border-bottom-right-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+ }
}
- }
- .color-picker {
- margin-bottom: 5.5px;
+ .color-picker {
+ margin-bottom: 5px;
- .picker-button {
- font-size: 0.8em;
- padding: 8px 15px;
- border-bottom-right-radius: 5px;
- border-top-right-radius: 5px;
- background-color: $color-primary-1;
+ .picker-button {
+ font-size: 0.8em;
+ padding: 8px 15px;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: $color-primary-1;
+ }
}
}
+
+ .color-error {
+ font-size: 0.8em;
+ color: $color-secondary-0;
+ margin-left: 10px;
+ }
}
.colors-container {
@@ -35,4 +43,4 @@
height: 31px;
cursor: pointer;
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
index d4c5460..7cb849c 100644
--- a/frontend/src/components/panels/RulePane.js
+++ b/frontend/src/components/panels/RulePane.js
@@ -344,27 +344,29 @@ class RulePane extends Component {
filters:
this.updateParam((r) => r.filter.service_port = v)}
- min={0} max={65565} error={this.state.ruleServicePortError} />
+ min={0} max={65565} error={this.state.ruleServicePortError}
+ readonly={isUpdate} />
this.updateParam((r) => r.filter.client_port = v)}
- min={0} max={65565} error={this.state.ruleClientPortError} />
+ min={0} max={65565} error={this.state.ruleClientPortError}
+ readonly={isUpdate} />
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)} />
diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js
new file mode 100644
index 0000000..b21ad6c
--- /dev/null
+++ b/frontend/src/components/panels/ServicePane.js
@@ -0,0 +1,190 @@
+import React, {Component} from 'react';
+import './common.scss';
+import './ServicePane.scss';
+import Table from "react-bootstrap/Table";
+import {Col, Container, Row} from "react-bootstrap";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
+import backend from "../../backend";
+import NumericField from "../fields/extensions/NumericField";
+import ColorField from "../fields/extensions/ColorField";
+import ButtonField from "../fields/ButtonField";
+import validation from "../../validation";
+import LinkPopover from "../objects/LinkPopover";
+import {createCurlCommand} from "../../utils";
+
+const classNames = require('classnames');
+const _ = require('lodash');
+
+class ServicePane extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ services: [],
+ currentService: this.emptyService,
+ };
+ }
+
+ componentDidMount() {
+ this.reset();
+ this.loadServices();
+ }
+
+ emptyService = {
+ "port": 0,
+ "name": "",
+ "color": "",
+ "notes": ""
+ };
+
+ loadServices = () => {
+ backend.get("/api/services")
+ .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status}))
+ .catch(res => this.setState({servicesStatusCode: res.status, servicesResponse: JSON.stringify(res.json)}));
+ };
+
+ updateService = () => {
+ const service = this.state.currentService;
+ if (this.validateService(service)) {
+ backend.put("/api/services", service).then(res => {
+ this.reset();
+ this.setState({serviceStatusCode: res.status});
+ this.loadServices();
+ }).catch(res => {
+ this.setState({serviceStatusCode: res.status, serviceResponse: JSON.stringify(res.json)});
+ });
+ }
+ };
+
+ validateService = (service) => {
+ let valid = true;
+ if (!validation.isValidPort(service.port, true)) {
+ this.setState({servicePortError: "port < 0 || port > 65565"});
+ valid = false;
+ }
+ if (service.name.length < 3) {
+ this.setState({serviceNameError: "name.length < 3"});
+ valid = false;
+ }
+ if (!validation.isValidColor(service.color)) {
+ this.setState({serviceColorError: "color is not hexcolor"});
+ valid = false;
+ }
+
+ return valid;
+ };
+
+ reset = () => {
+ this.setState({
+ isUpdate: false,
+ currentService: _.cloneDeep(this.emptyService),
+ servicePortError: null,
+ serviceNameError: null,
+ serviceColorError: null,
+ serviceStatusCode: null,
+ servicesStatusCode: null,
+ serviceResponse: null,
+ servicesResponse: null
+ });
+ };
+
+ updateParam = (callback) => {
+ callback(this.state.currentService);
+ this.setState({currentService: this.state.currentService});
+ };
+
+ render() {
+ const isUpdate = this.state.isUpdate;
+ const service = this.state.currentService;
+
+ let services = this.state.services.map(s =>
+ {
+ 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)} />
+
+
+
+
+
+
+
+
+ {}
+
+
+
+