Merge: - client: fix table size and add pagination
Close #1197 * commit 'f446186db146b74cc6af3d29cf53ff69adc26e4f': - client: fix table pagination - client: fix table size and add pagination
This commit is contained in:
commit
d26fed1901
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ReactTable from 'react-table';
|
import ReactTable from 'react-table';
|
||||||
import { Trans, withNamespaces } from 'react-i18next';
|
import { Trans, withNamespaces } from 'react-i18next';
|
||||||
|
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
|
||||||
|
|
||||||
class Leases extends Component {
|
class Leases extends Component {
|
||||||
cellWrap = ({ value }) => (
|
cellWrap = ({ value }) => (
|
||||||
|
@ -36,7 +37,9 @@ class Leases extends Component {
|
||||||
Cell: this.cellWrap,
|
Cell: this.cellWrap,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
showPagination={false}
|
pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
|
||||||
|
showPageSizeOptions={false}
|
||||||
|
showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
|
||||||
noDataText={t('dhcp_leases_not_found')}
|
noDataText={t('dhcp_leases_not_found')}
|
||||||
minRows={6}
|
minRows={6}
|
||||||
className="-striped -highlight card-table-overflow"
|
className="-striped -highlight card-table-overflow"
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ReactTable from 'react-table';
|
import ReactTable from 'react-table';
|
||||||
import { Trans, withNamespaces } from 'react-i18next';
|
import { Trans, withNamespaces } from 'react-i18next';
|
||||||
|
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
|
||||||
|
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
|
|
||||||
|
@ -16,7 +17,7 @@ class StaticLeases extends Component {
|
||||||
|
|
||||||
handleSubmit = (data) => {
|
handleSubmit = (data) => {
|
||||||
this.props.addStaticLease(data);
|
this.props.addStaticLease(data);
|
||||||
}
|
};
|
||||||
|
|
||||||
handleDelete = (ip, mac, hostname = '') => {
|
handleDelete = (ip, mac, hostname = '') => {
|
||||||
const name = hostname || ip;
|
const name = hostname || ip;
|
||||||
|
@ -24,7 +25,7 @@ class StaticLeases extends Component {
|
||||||
if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
|
if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
|
||||||
this.props.removeStaticLease({ ip, mac, hostname });
|
this.props.removeStaticLease({ ip, mac, hostname });
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
@ -74,7 +75,7 @@ class StaticLeases extends Component {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<svg className="icons">
|
<svg className="icons">
|
||||||
<use xlinkHref="#delete" />
|
<use xlinkHref="#delete"/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -82,7 +83,9 @@ class StaticLeases extends Component {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
showPagination={false}
|
pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
|
||||||
|
showPageSizeOptions={false}
|
||||||
|
showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
|
||||||
noDataText={t('dhcp_static_leases_not_found')}
|
noDataText={t('dhcp_static_leases_not_found')}
|
||||||
className="-striped -highlight card-table-overflow"
|
className="-striped -highlight card-table-overflow"
|
||||||
minRows={6}
|
minRows={6}
|
||||||
|
|
|
@ -402,6 +402,9 @@ export const DEFAULT_LOGS_FILTER = {
|
||||||
export const DEFAULT_LANGUAGE = 'en';
|
export const DEFAULT_LANGUAGE = 'en';
|
||||||
|
|
||||||
export const TABLE_DEFAULT_PAGE_SIZE = 100;
|
export const TABLE_DEFAULT_PAGE_SIZE = 100;
|
||||||
|
|
||||||
|
export const SMALL_TABLE_DEFAULT_PAGE_SIZE = 20;
|
||||||
|
|
||||||
export const RESPONSE_FILTER = {
|
export const RESPONSE_FILTER = {
|
||||||
ALL: 'all',
|
ALL: 'all',
|
||||||
FILTERED: 'filtered',
|
FILTERED: 'filtered',
|
||||||
|
|
Loading…
Reference in New Issue