mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-22 23:21:08 +02:00
2e6d5b0703
* replace attribution charts with a table by month * update tests to include mount_type * fix another portion of tests that were missing secret sync stat and testing for old attribution charts * add tests for attribution table * add changelog and tidy * remove remaining todos * tidy * reset month query param in ce * fix tests missing month param * add margin to pagination in accordance to helios rec * remove query param, update change log, move table into own comp * remove commented code * remove month query params * tidy * update test mount paths * remove unused client attribution component * update tests
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import Component from '@glimmer/component';
|
|
import Ember from 'ember';
|
|
import { action } from '@ember/object';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { paginate } from 'core/utils/paginate-list';
|
|
import { MountClients } from 'core/utils/client-count-utils';
|
|
|
|
interface TableData extends MountClients {
|
|
namespace: string;
|
|
}
|
|
|
|
interface Args {
|
|
data: TableData[];
|
|
}
|
|
|
|
type TableColumn = 'namespace' | 'label' | 'mount_type' | 'clients';
|
|
type SortDirection = 'asc' | 'desc';
|
|
|
|
export default class Table extends Component<Args> {
|
|
@tracked currentPage = 1;
|
|
@tracked sortColumn: TableColumn = 'clients';
|
|
@tracked sortDirection: SortDirection = 'desc';
|
|
|
|
pageSize = Ember.testing ? 3 : 10; // lower in tests to test pagination without seeding more data
|
|
|
|
get paginatedTableData(): TableData[] {
|
|
const sorted = this.sortTableData(this.args.data);
|
|
const paginated = paginate(sorted, {
|
|
page: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
});
|
|
|
|
return paginated;
|
|
}
|
|
|
|
get tableHeaderMessage(): string {
|
|
return this.args.data
|
|
? 'No data is available for the selected month'
|
|
: 'Select a month to view client attribution';
|
|
}
|
|
|
|
get tableBodyMessage(): string {
|
|
return this.args.data
|
|
? 'View the namespace mount breakdown of clients by selecting another month.'
|
|
: 'View the namespace mount breakdown of clients by selecting a month.';
|
|
}
|
|
|
|
sortTableData(data: TableData[]): TableData[] {
|
|
if (this.sortColumn) {
|
|
data = [...data].sort((a, b) => {
|
|
const valA = a[this.sortColumn];
|
|
const valB = b[this.sortColumn];
|
|
|
|
if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
|
|
if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
|
|
return 0;
|
|
});
|
|
}
|
|
return data;
|
|
}
|
|
|
|
@action
|
|
onPageChange(page: number) {
|
|
this.currentPage = page;
|
|
}
|
|
|
|
@action
|
|
updateSort(column: TableColumn, direction: SortDirection) {
|
|
this.sortColumn = column;
|
|
this.sortDirection = direction;
|
|
}
|
|
}
|