From f736d85e6e96a3d67cb0ec22e27c0b549f3292e9 Mon Sep 17 00:00:00 2001 From: Vladislav Abdulmyanov Date: Tue, 21 Mar 2023 14:42:54 +0300 Subject: [PATCH] Pull request 1776: client: add transform dynamic lease to static Updates #3459. Squashed commit of the following: commit 7a660c689da898c125a268f88378e38a58b457da Author: Vladislav Abdulmyanov Date: Tue Mar 21 10:40:25 2023 +0200 consider issues commit 066bf77ac44fa8602c66aa0ea220b52fca6d1180 Author: Vladislav Abdulmyanov Date: Mon Mar 20 18:37:14 2023 +0200 client: fix icon commit 356b4c3895436f165697510bb3b3abf95f18894f Author: Vladislav Abdulmyanov Date: Mon Mar 20 18:32:03 2023 +0200 client: add transform dinamic lease to static --- client/src/__locales/en.json | 3 +- client/src/components/Settings/Dhcp/Leases.js | 37 +++++++++++++++++-- .../Settings/Dhcp/StaticLeases/Form.js | 5 ++- .../Settings/Dhcp/StaticLeases/Modal.js | 11 ++++-- .../Settings/Dhcp/StaticLeases/index.js | 2 +- client/src/components/Settings/Dhcp/index.js | 6 +-- client/src/reducers/dhcp.js | 4 +- 7 files changed, 53 insertions(+), 15 deletions(-) diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 2afa38bd..ee0345d7 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -642,5 +642,6 @@ "anonymizer_notification": "<0>Note: IP anonymization is enabled. You can disable it in <1>General settings.", "confirm_dns_cache_clear": "Are you sure you want to clear DNS cache?", "cache_cleared": "DNS cache successfully cleared", - "clear_cache": "Clear cache" + "clear_cache": "Clear cache", + "make_static": "Make static" } diff --git a/client/src/components/Settings/Dhcp/Leases.js b/client/src/components/Settings/Dhcp/Leases.js index 2973d1b5..96ca8852 100644 --- a/client/src/components/Settings/Dhcp/Leases.js +++ b/client/src/components/Settings/Dhcp/Leases.js @@ -1,9 +1,11 @@ import React, { Component } from 'react'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ReactTable from 'react-table'; import { Trans, withTranslation } from 'react-i18next'; import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants'; import { sortIp } from '../../../helpers/helpers'; +import { toggleLeaseModal } from '../../../actions'; class Leases extends Component { cellWrap = ({ value }) => ( @@ -14,6 +16,30 @@ class Leases extends Component { ); + convertToStatic = (data) => () => { + const { dispatch } = this.props; + dispatch(toggleLeaseModal(data)); + } + + makeStatic = ({ row }) => { + const { t, disabledLeasesButton } = this.props; + return ( +
+ +
+ ); + } + render() { const { leases, t } = this.props; return ( @@ -23,7 +49,7 @@ class Leases extends Component { { Header: 'MAC', accessor: 'mac', - minWidth: 160, + minWidth: 180, Cell: this.cellWrap, }, { Header: 'IP', @@ -39,8 +65,11 @@ class Leases extends Component { }, { Header: dhcp_table_expires, accessor: 'expires', - minWidth: 130, + minWidth: 220, Cell: this.cellWrap, + }, { + Header: actions_table_header, + Cell: this.makeStatic, }, ]} pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE} @@ -57,6 +86,8 @@ class Leases extends Component { Leases.propTypes = { leases: PropTypes.array, t: PropTypes.func, + dispatch: PropTypes.func, + disabledLeasesButton: PropTypes.bool, }; -export default withTranslation()(Leases); +export default withTranslation()(connect(() => ({}), (dispatch) => ({ dispatch }))(Leases)); diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Form.js b/client/src/components/Settings/Dhcp/StaticLeases/Form.js index 0525f6a3..e26b4da5 100644 --- a/client/src/components/Settings/Dhcp/StaticLeases/Form.js +++ b/client/src/components/Settings/Dhcp/StaticLeases/Form.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Field, reduxForm } from 'redux-form'; import { Trans, useTranslation } from 'react-i18next'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { renderInputField, normalizeMac } from '../../../../helpers/form'; import { @@ -25,6 +25,7 @@ const Form = ({ }) => { const { t } = useTranslation(); const dispatch = useDispatch(); + const dynamicLease = useSelector((store) => store.dhcp.leaseModalConfig, shallowEqual); const onClick = () => { reset(); @@ -87,7 +88,7 @@ const Form = ({ diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Modal.js b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js index 0baf487e..7a11cfce 100644 --- a/client/src/components/Settings/Dhcp/StaticLeases/Modal.js +++ b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Trans, withTranslation } from 'react-i18next'; import ReactModal from 'react-modal'; -import { useDispatch } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import Form from './Form'; import { toggleLeaseModal } from '../../../../actions'; @@ -18,6 +18,9 @@ const Modal = ({ const dispatch = useDispatch(); const toggleModal = () => dispatch(toggleLeaseModal()); + const leaseInitialData = useSelector( + (state) => state.dhcp.leaseModalConfig, shallowEqual, + ) || {}; return (
{ const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask; const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean); - const disabledLeasesButton = dhcp?.syncErrors || interfaces?.syncErrors - || !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values; + const disabledLeasesButton = Boolean(dhcp?.syncErrors || interfaces?.syncErrors + || !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values); const cidr = inputtedIPv4values ? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}` : ''; return <> @@ -260,7 +260,7 @@ const Dhcp = () => { >
- +
} diff --git a/client/src/reducers/dhcp.js b/client/src/reducers/dhcp.js index 4c2fe991..c0d6e8c0 100644 --- a/client/src/reducers/dhcp.js +++ b/client/src/reducers/dhcp.js @@ -124,10 +124,11 @@ const dhcp = handleActions( staticLeases: [], }), - [actions.toggleLeaseModal]: (state) => { + [actions.toggleLeaseModal]: (state, { payload }) => { const newState = { ...state, isModalOpen: !state.isModalOpen, + leaseModalConfig: payload, }; return newState; }, @@ -200,6 +201,7 @@ const dhcp = handleActions( leases: [], staticLeases: [], isModalOpen: false, + leaseModalConfig: undefined, dhcp_available: false, }, );