+ client: add table to show static leases

client/src/__locales/en.json

@@ -15,6 +15,7 @@
     "dhcp_not_found": "It is safe to enable the built-in DHCP server - we didn't find any active DHCP servers on the network. However, we encourage you to re-check it manually as our automatic test currently doesn't give 100% guarantee.",
     "dhcp_found": "An active DHCP server is found on the network. It is not safe to enable the built-in DHCP server.",
     "dhcp_leases": "DHCP leases",
+    "dhcp_static_leases": "DHCP static leases",
     "dhcp_leases_not_found": "No DHCP leases found",
     "dhcp_config_saved": "Saved DHCP server config",
     "form_error_required": "Required field",

client/src/components/Settings/Dhcp/StaticLeases.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactTable from 'react-table';
+import { Trans, withNamespaces } from 'react-i18next';
+
+class StaticLeases extends Component {
+    cellWrap = ({ value }) => (
+        <div className="logs__row logs__row--overflow">
+            <span className="logs__text" title={value}>
+                {value}
+            </span>
+        </div>
+    );
+
+    render() {
+        const { staticLeases, t } = this.props;
+        return (
+            <ReactTable
+                data={staticLeases || []}
+                columns={[
+                    {
+                        Header: 'MAC',
+                        accessor: 'mac',
+                        Cell: this.cellWrap,
+                    }, {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        Cell: this.cellWrap,
+                    }, {
+                        Header: <Trans>dhcp_table_hostname</Trans>,
+                        accessor: 'hostname',
+                        Cell: this.cellWrap,
+                    },
+                ]}
+                showPagination={false}
+                noDataText={t('dhcp_leases_not_found')}
+                minRows={6}
+                className="-striped -highlight card-table-overflow"
+            />
+        );
+    }
+}
+
+StaticLeases.propTypes = {
+    staticLeases: PropTypes.array,
+    t: PropTypes.func,
+};
+
+export default withNamespaces()(StaticLeases);

client/src/components/Settings/Dhcp/index.js

@@ -6,6 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
 import Form from './Form';
 import Leases from './Leases';
+import StaticLeases from './StaticLeases';
 import Interface from './Interface';
 import Card from '../../ui/Card';
 import Accordion from '../../ui/Accordion';
@@ -211,13 +212,22 @@ class Dhcp extends Component {
                     </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} />
+                    <Fragment>
+                        <Card title={ t('dhcp_leases') } bodyType="card-body box-body--settings">
+                            <div className="row">
+                                <div className="col">
+                                    <Leases leases={dhcp.leases} />
+                                </div>
                             </div>
-                        </div>
-                    </Card>
+                        </Card>
+                        <Card title={ t('dhcp_static_leases') } bodyType="card-body box-body--settings">
+                            <div className="row">
+                                <div className="col">
+                                    <StaticLeases staticLeases={dhcp.staticLeases} />
+                                </div>
+                            </div>
+                        </Card>
+                    </Fragment>
                 }
             </Fragment>
         );

client/src/reducers/index.js

@@ -287,11 +287,18 @@ const dhcp = handleActions({
     [actions.getDhcpStatusRequest]: state => ({ ...state, processing: true }),
     [actions.getDhcpStatusFailure]: state => ({ ...state, processing: false }),
     [actions.getDhcpStatusSuccess]: (state, { payload }) => {
+        const {
+            static_leases: staticLeases,
+            ...values
+        } = payload;
+
         const newState = {
             ...state,
-            ...payload,
+            staticLeases,
             processing: false,
+            ...values,
         };
+
         return newState;
     },
 
@@ -355,6 +362,7 @@ const dhcp = handleActions({
     },
     check: null,
     leases: [],
+    staticLeases: [],
 });
 
 export default combineReducers({