Skip to content

Commit

Permalink
Pull request 1776: client: add transform dynamic lease to static
Browse files Browse the repository at this point in the history 
Updates #3459.

Squashed commit of the following:

commit 7a660c6
Author: Vladislav Abdulmyanov <v.abdulmyanov@adguard.com>
Date:   Tue Mar 21 10:40:25 2023 +0200

    consider issues

commit 066bf77
Author: Vladislav Abdulmyanov <v.abdulmyanov@adguard.com>
Date:   Mon Mar 20 18:37:14 2023 +0200

    client: fix icon

commit 356b4c3
Author: Vladislav Abdulmyanov <v.abdulmyanov@adguard.com>
Date:   Mon Mar 20 18:32:03 2023 +0200

    client: add transform dinamic lease to static
  • Loading branch information
@Blakhard
Blakhard committed Mar 21, 2023
1 parent 1daabb9 commit f736d85
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 15 deletions.
3 changes: 2 additions & 1 deletion client/src/__locales/en.json
View file
Expand Up @@ -642,5 +642,6 @@
"anonymizer_notification": "<0>Note:</0> IP anonymization is enabled. You can disable it in <1>General settings</1>.",
"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"
}
37 changes: 34 additions & 3 deletions client/src/components/Settings/Dhcp/Leases.js
View file
@@ -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 }) => (
Expand All @@ -14,6 +16,30 @@ class Leases extends Component {
</div>
);

convertToStatic = (data) => () => {
const { dispatch } = this.props;
dispatch(toggleLeaseModal(data));
}

makeStatic = ({ row }) => {
const { t, disabledLeasesButton } = this.props;
return (
<div className="logs__row logs__row--center">
<button
type="button"
className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
title={t('make_static')}
onClick={this.convertToStatic(row)}
disabled={disabledLeasesButton}
>
<svg className="icons icon12">
<use xlinkHref="#plus" />
</svg>
</button>
</div>
);
}

render() {
const { leases, t } = this.props;
return (
Expand All @@ -23,7 +49,7 @@ class Leases extends Component {
{
Header: 'MAC',
accessor: 'mac',
minWidth: 160,
minWidth: 180,
Cell: this.cellWrap,
}, {
Header: 'IP',
Expand All @@ -39,8 +65,11 @@ class Leases extends Component {
}, {
Header: <Trans>dhcp_table_expires</Trans>,
accessor: 'expires',
minWidth: 130,
minWidth: 220,
Cell: this.cellWrap,
}, {
Header: <Trans>actions_table_header</Trans>,
Cell: this.makeStatic,
},
]}
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
Expand All @@ -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));
5 changes: 3 additions & 2 deletions client/src/components/Settings/Dhcp/StaticLeases/Form.js
View file
Expand Up @@ -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 {
Expand All @@ -25,6 +25,7 @@ const Form = ({
}) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const dynamicLease = useSelector((store) => store.dhcp.leaseModalConfig, shallowEqual);

const onClick = () => {
reset();
Expand Down Expand Up @@ -87,7 +88,7 @@ const Form = ({
<button
type="submit"
className="btn btn-success btn-standard"
disabled={submitting || pristine || processingAdding}
disabled={submitting || processingAdding || (pristine && !dynamicLease)}
>
<Trans>save_btn</Trans>
</button>
Expand Down
11 changes: 7 additions & 4 deletions client/src/components/Settings/Dhcp/StaticLeases/Modal.js
View file
Expand Up @@ -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';

Expand All @@ -18,6 +18,9 @@ const Modal = ({
const dispatch = useDispatch();

const toggleModal = () => dispatch(toggleLeaseModal());
const leaseInitialData = useSelector(
(state) => state.dhcp.leaseModalConfig, shallowEqual,
) || {};

return (
<ReactModal
Expand All @@ -37,9 +40,9 @@ const Modal = ({
</div>
<Form
initialValues={{
mac: '',
ip: '',
hostname: '',
mac: leaseInitialData.mac ?? '',
ip: leaseInitialData.ip ?? '',
hostname: leaseInitialData.hostname ?? '',
cidr,
rangeStart,
rangeEnd,
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Settings/Dhcp/StaticLeases/index.js
View file
Expand Up @@ -54,7 +54,7 @@ const StaticLeases = ({
{
Header: 'MAC',
accessor: 'mac',
minWidth: 160,
minWidth: 180,
Cell: cellWrap,
},
{
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Settings/Dhcp/index.js
View file
Expand Up @@ -188,8 +188,8 @@ const Dhcp = () => {

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 <>
Expand Down Expand Up @@ -260,7 +260,7 @@ const Dhcp = () => {
>
<div className="row">
<div className="col">
<Leases leases={leases} />
<Leases leases={leases} disabledLeasesButton={disabledLeasesButton}/>
</div>
</div>
</Card>}
Expand Down
4 changes: 3 additions & 1 deletion client/src/reducers/dhcp.js
View file
Expand Up @@ -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;
},
Expand Down Expand Up @@ -200,6 +201,7 @@ const dhcp = handleActions(
leases: [],
staticLeases: [],
isModalOpen: false,
leaseModalConfig: undefined,
dhcp_available: false,
},
);
Expand Down

0 comments on commit f736d85

Please sign in to comment.