Added initial layout for DHCP server config

2018-12-12 18:12:51 +03:00
parent 390883126c
commit dd21f497e3
13 changed files with 514 additions and 10 deletions
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/client/src/components/Settings/Dhcp/index.js
@@ -0,0 +1,93 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Trans, withNamespaces } from 'react-i18next';
+
+import Form from './Form';
+import Leases from './Leases';
+import Card from '../../ui/Card';
+
+class Dhcp extends Component {
+    handleFormSubmit = (values) => {
+        this.props.setDhcpConfig(values);
+    };
+
+    handleRefresh = () => {
+        this.props.findActiveDhcp();
+    }
+
+    getToggleDhcpButton = () => {
+        const { enabled } = this.props.dhcp.config;
+        const buttonText = enabled ? 'dhcp_disable' : 'dhcp_enable';
+        const buttonClass = enabled ? 'btn-gray' : 'btn-success';
+
+        return (
+            <button type="button" className={`btn btn-standart mr-2 ${buttonClass}`} onClick={() => this.props.toggleDhcp(enabled)}>
+                <Trans>{buttonText}</Trans>
+            </button>
+        );
+    }
+
+    render() {
+        const { t, dhcp } = this.props;
+        const statusButtonClass = classnames({
+            'btn btn-primary btn-standart': true,
+            'btn btn-primary btn-standart btn-loading': dhcp.processingStatus,
+        });
+
+        return (
+            <Fragment>
+                {!dhcp.processing &&
+                    <Card title={ t('dhcp_title') } subtitle={ t('dhcp_description') } bodyType="card-body box-body--settings">
+                        <div className="row">
+                            <div className="col">
+                                <div className="card-actions mt-0 mb-3">
+                                    {this.getToggleDhcpButton()}
+                                    <button
+                                        className={statusButtonClass}
+                                        type="button"
+                                        onClick={this.handleRefresh}
+                                    >
+                                        <Trans>refresh_status</Trans>
+                                    </button>
+                                </div>
+                                {dhcp.active && !dhcp.active.found &&
+                                    <div className="text-secondary">
+                                        <Trans>dhcp_not_found</Trans>
+                                    </div>
+                                }
+                                <hr/>
+                                <Form
+                                    onSubmit={this.handleFormSubmit}
+                                    initialValues={dhcp.config}
+                                    enabled={dhcp.config.enabled}
+                                />
+                            </div>
+                        </div>
+                    </Card>
+                }
+                {!dhcp.processing && dhcp.config.enabled &&
+                    <Card title={ t('dhcp_leases') } bodyType="card-body box-body--settings">
+                        <div className="row">
+                            <div className="col">
+                                <Leases leases={dhcp.leases} />
+                            </div>
+                        </div>
+                    </Card>
+                }
+            </Fragment>
+        );
+    }
+}
+
+Dhcp.propTypes = {
+    dhcp: PropTypes.object,
+    toggleDhcp: PropTypes.func,
+    getDhcpStatus: PropTypes.func,
+    setDhcpConfig: PropTypes.func,
+    findActiveDhcp: PropTypes.func,
+    handleSubmit: PropTypes.func,
+    t: PropTypes.func,
+};
+
+export default withNamespaces()(Dhcp);