Web console: add sort to tiers list (#10416)

* add sort to tiers list

* update snapshot
This commit is contained in:
Vadim Ogievetsky 2020-09-22 19:00:55 -07:00 committed by GitHub
parent 7cc0a7be68
commit ac0a45471e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 20 deletions

View File

@ -20,7 +20,7 @@ exports[`lookups view matches snapshot 1`] = `
columns={ columns={
Array [ Array [
"Lookup name", "Lookup name",
"Tier", "Lookup tier",
"Type", "Type",
"Version", "Version",
"Actions", "Actions",
@ -95,7 +95,7 @@ exports[`lookups view matches snapshot 1`] = `
"show": true, "show": true,
}, },
Object { Object {
"Header": "Tier", "Header": "Lookup tier",
"accessor": "tier", "accessor": "tier",
"filterable": true, "filterable": true,
"id": "tier", "id": "tier",

View File

@ -47,10 +47,20 @@ import { LocalStorageBackedArray } from '../../utils/local-storage-backed-array'
import './lookups-view.scss'; import './lookups-view.scss';
const tableColumns: string[] = ['Lookup name', 'Tier', 'Type', 'Version', ACTION_COLUMN_LABEL]; const tableColumns: string[] = [
'Lookup name',
'Lookup tier',
'Type',
'Version',
ACTION_COLUMN_LABEL,
];
const DEFAULT_LOOKUP_TIER: string = '__default'; const DEFAULT_LOOKUP_TIER: string = '__default';
function tierNameCompare(a: string, b: string) {
return a.localeCompare(b);
}
export interface LookupEntriesAndTiers { export interface LookupEntriesAndTiers {
lookupEntries: any[]; lookupEntries: any[];
tiers: string[]; tiers: string[];
@ -99,7 +109,9 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
processQuery: async () => { processQuery: async () => {
const tiersResp = await axios.get('/druid/coordinator/v1/lookups/config?discover=true'); const tiersResp = await axios.get('/druid/coordinator/v1/lookups/config?discover=true');
const tiers = const tiers =
tiersResp.data && tiersResp.data.length > 0 ? tiersResp.data : [DEFAULT_LOOKUP_TIER]; tiersResp.data && tiersResp.data.length > 0
? tiersResp.data.sort(tierNameCompare)
: [DEFAULT_LOOKUP_TIER];
const lookupEntries: {}[] = []; const lookupEntries: {}[] = [];
const lookupResp = await axios.get('/druid/coordinator/v1/lookups/config/all'); const lookupResp = await axios.get('/druid/coordinator/v1/lookups/config/all');
@ -304,34 +316,35 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
columns={[ columns={[
{ {
Header: 'Lookup name', Header: 'Lookup name',
show: hiddenColumns.exists('Lookup name'),
id: 'lookup_name', id: 'lookup_name',
accessor: 'id', accessor: 'id',
filterable: true, filterable: true,
show: hiddenColumns.exists('Lookup name'),
}, },
{ {
Header: 'Tier', Header: 'Lookup tier',
show: hiddenColumns.exists('Lookup tier'),
id: 'tier', id: 'tier',
accessor: 'tier', accessor: 'tier',
filterable: true, filterable: true,
show: hiddenColumns.exists('Tier'),
}, },
{ {
Header: 'Type', Header: 'Type',
show: hiddenColumns.exists('Type'),
id: 'type', id: 'type',
accessor: 'spec.type', accessor: 'spec.type',
filterable: true, filterable: true,
show: hiddenColumns.exists('Type'),
}, },
{ {
Header: 'Version', Header: 'Version',
show: hiddenColumns.exists('Version'),
id: 'version', id: 'version',
accessor: 'version', accessor: 'version',
filterable: true, filterable: true,
show: hiddenColumns.exists('Version'),
}, },
{ {
Header: ACTION_COLUMN_LABEL, Header: ACTION_COLUMN_LABEL,
show: hiddenColumns.exists(ACTION_COLUMN_LABEL),
id: ACTION_COLUMN_ID, id: ACTION_COLUMN_ID,
width: ACTION_COLUMN_WIDTH, width: ACTION_COLUMN_WIDTH,
accessor: (row: any) => ({ id: row.id, tier: row.tier }), accessor: (row: any) => ({ id: row.id, tier: row.tier }),
@ -352,7 +365,6 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
/> />
); );
}, },
show: hiddenColumns.exists(ACTION_COLUMN_LABEL),
}, },
]} ]}
defaultPageSize={50} defaultPageSize={50}

View File

@ -316,13 +316,14 @@ ORDER BY "rank" DESC, "service" DESC`;
columns={[ columns={[
{ {
Header: 'Service', Header: 'Service',
show: hiddenColumns.exists('Service'),
accessor: 'service', accessor: 'service',
width: 300, width: 300,
Aggregated: () => '', Aggregated: () => '',
show: hiddenColumns.exists('Service'),
}, },
{ {
Header: 'Type', Header: 'Type',
show: hiddenColumns.exists('Type'),
accessor: 'service_type', accessor: 'service_type',
width: 150, width: 150,
Cell: row => { Cell: row => {
@ -339,10 +340,10 @@ ORDER BY "rank" DESC, "service" DESC`;
</a> </a>
); );
}, },
show: hiddenColumns.exists('Type'),
}, },
{ {
Header: 'Tier', Header: 'Tier',
show: hiddenColumns.exists('Tier'),
id: 'tier', id: 'tier',
accessor: row => { accessor: row => {
return row.tier ? row.tier : row.worker ? row.worker.category : null; return row.tier ? row.tier : row.worker ? row.worker.category : null;
@ -359,16 +360,16 @@ ORDER BY "rank" DESC, "service" DESC`;
</a> </a>
); );
}, },
show: hiddenColumns.exists('Tier'),
}, },
{ {
Header: 'Host', Header: 'Host',
show: hiddenColumns.exists('Host'),
accessor: 'host', accessor: 'host',
Aggregated: () => '', Aggregated: () => '',
show: hiddenColumns.exists('Host'),
}, },
{ {
Header: 'Port', Header: 'Port',
show: hiddenColumns.exists('Port'),
id: 'port', id: 'port',
accessor: row => { accessor: row => {
const ports: string[] = []; const ports: string[] = [];
@ -381,10 +382,10 @@ ORDER BY "rank" DESC, "service" DESC`;
return ports.join(', ') || 'No port'; return ports.join(', ') || 'No port';
}, },
Aggregated: () => '', Aggregated: () => '',
show: hiddenColumns.exists('Port'),
}, },
{ {
Header: 'Curr size', Header: 'Curr size',
show: hiddenColumns.exists('Curr size'),
id: 'curr_size', id: 'curr_size',
width: 100, width: 100,
filterable: false, filterable: false,
@ -400,10 +401,10 @@ ORDER BY "rank" DESC, "service" DESC`;
if (row.value === null) return ''; if (row.value === null) return '';
return formatBytes(row.value); return formatBytes(row.value);
}, },
show: hiddenColumns.exists('Curr size'),
}, },
{ {
Header: 'Max size', Header: 'Max size',
show: hiddenColumns.exists('Max size'),
id: 'max_size', id: 'max_size',
width: 100, width: 100,
filterable: false, filterable: false,
@ -419,10 +420,10 @@ ORDER BY "rank" DESC, "service" DESC`;
if (row.value === null) return ''; if (row.value === null) return '';
return formatBytes(row.value); return formatBytes(row.value);
}, },
show: hiddenColumns.exists('Max size'),
}, },
{ {
Header: 'Usage', Header: 'Usage',
show: hiddenColumns.exists('Usage'),
id: 'usage', id: 'usage',
width: 100, width: 100,
filterable: false, filterable: false,
@ -479,10 +480,10 @@ ORDER BY "rank" DESC, "service" DESC`;
return ''; return '';
} }
}, },
show: hiddenColumns.exists('Usage'),
}, },
{ {
Header: 'Detail', Header: 'Detail',
show: capabilities.hasCoordinatorAccess() && hiddenColumns.exists('Detail'),
id: 'queue', id: 'queue',
width: 400, width: 400,
filterable: false, filterable: false,
@ -542,10 +543,10 @@ ORDER BY "rank" DESC, "service" DESC`;
segmentsToDropSize, segmentsToDropSize,
); );
}, },
show: capabilities.hasCoordinatorAccess() && hiddenColumns.exists('Detail'),
}, },
{ {
Header: ACTION_COLUMN_LABEL, Header: ACTION_COLUMN_LABEL,
show: capabilities.hasOverlordAccess() && hiddenColumns.exists(ACTION_COLUMN_LABEL),
id: ACTION_COLUMN_ID, id: ACTION_COLUMN_ID,
width: ACTION_COLUMN_WIDTH, width: ACTION_COLUMN_WIDTH,
accessor: row => row.worker, accessor: row => row.worker,
@ -556,7 +557,6 @@ ORDER BY "rank" DESC, "service" DESC`;
const workerActions = this.getWorkerActions(row.value.host, disabled); const workerActions = this.getWorkerActions(row.value.host, disabled);
return <ActionCell actions={workerActions} />; return <ActionCell actions={workerActions} />;
}, },
show: capabilities.hasOverlordAccess() && hiddenColumns.exists(ACTION_COLUMN_LABEL),
}, },
]} ]}
/> />