Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Support multiple selection for filter status (manage all experiments page) #3351

Merged
merged 7 commits into from
Feb 3, 2021
Merged

Support multiple selection for filter status (manage all experiments page) #3351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d53001c
set multiy choice
Jan 20, 2021
2f8ef36
fix status []
Jan 20, 2021
5fcff12
refactor
Jan 20, 2021
7e0a305
fix lint
Jan 20, 2021
f384e5c
fix bug on test
Jan 21, 2021
2e29bab
del note
Jan 29, 2021
82602c6
refine code
Feb 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 42 additions & 58 deletions ts/webui/src/components/managementExp/ExperimentManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ interface ExpListState {
errorMessage: string;
hideFilter: boolean;
searchInputVal: string;
selectedStatus: string;
selectedStatus: string[];
selectedPlatform: string;
selectedStartDate?: Date;
selectedEndDate?: Date;
Expand All @@ -42,7 +42,7 @@ class Experiment extends React.Component<{}, ExpListState> {
errorMessage: '',
hideFilter: true,
searchInputVal: '',
selectedStatus: '',
selectedStatus: [],
selectedPlatform: '',
source: [], // data in table
originExperimentList: [], // api /experiments-info
Expand Down Expand Up @@ -312,50 +312,45 @@ class Experiment extends React.Component<{}, ExpListState> {
*/
private commonSelectString = (data: AllExperimentList[], field: string): AllExperimentList[] => {
const { selectedStatus, selectedPlatform, selectedStartDate, selectedEndDate } = this.state;
const hasStatus = selectedStatus === '' ? false : true;
const hasPlatform = selectedPlatform === '' ? false : true;
const hasStartDate = selectedStartDate === undefined ? false : true;
const hasEndDate = selectedEndDate === undefined ? false : true;

if (field === 'status') {
if (hasPlatform) {
data = filterByStatusOrPlatform(selectedPlatform, 'platform', data);
}
data = filterByStatusOrPlatform(selectedPlatform, 'platform', data);
}
if (field === 'platform') {
if (hasStatus) {
data = filterByStatusOrPlatform(selectedStatus, 'status', data);
}
data = filterByStatusOrPlatform(selectedStatus, 'status', data);
}

if (field === '') {
if (hasPlatform) {
data = filterByStatusOrPlatform(selectedPlatform, 'platform', data);
}
if (hasStatus) {
data = filterByStatusOrPlatform(selectedStatus, 'status', data);
}
data = Array.from(
new Set([
...filterByStatusOrPlatform(selectedPlatform, 'platform', data),
...filterByStatusOrPlatform(selectedStatus, 'status', data)
])
);
}

if (hasStartDate) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
data = data.filter(temp => compareDate(new Date(temp.startTime), selectedStartDate!));
}
if (hasEndDate) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
data = data.filter(temp => compareDate(new Date(temp.endTime), selectedEndDate!));
}
data = data.filter(
item =>
(selectedStartDate === undefined || compareDate(new Date(item.startTime), selectedStartDate)) &&
(selectedEndDate === undefined || compareDate(new Date(item.endTime), selectedEndDate))
);

return data;
};

// status platform startTime endTime
private selectStatus = (_event: React.FormEvent<HTMLDivElement>, item: any): void => {
if (item !== undefined) {
const { searchSource, sortInfo } = this.state;
let result = filterByStatusOrPlatform(item.key, 'status', searchSource);
const { searchSource, sortInfo, selectedStatus } = this.state;
const newSelectedStatus = item.selected
? [...selectedStatus, item.key as string]
: selectedStatus.filter(key => key !== item.key);
let result = filterByStatusOrPlatform(newSelectedStatus, 'status', searchSource);
result = this.commonSelectString(result, 'status');
this.setState({ selectedStatus: item.key, source: getSortedSource(result, sortInfo) });
this.setState({
selectedStatus: newSelectedStatus,
source: getSortedSource(result, sortInfo)
});
}
};

Expand All @@ -378,41 +373,30 @@ class Experiment extends React.Component<{}, ExpListState> {
searchSource,
sortInfo
} = this.state;
const hasStatus = selectedStatus === '' ? false : true;
const hasPlatform = selectedPlatform === '' ? false : true;
const hasStartDate = selectedStartDate === undefined ? false : true;
const hasEndDate = selectedEndDate === undefined ? false : true;
let result;

// filter status, platform
let result = filterByStatusOrPlatform(selectedStatus, 'status', searchSource);
if (hasPlatform) {
result = result.filter(temp => temp.platform === selectedPlatform);
}

if (type === 'start') {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
result = searchSource.filter(item => compareDate(new Date(item.startTime), date));
if (hasStatus) {
result = result.filter(temp => temp.status === selectedStatus);
}
if (hasPlatform) {
result = result.filter(temp => temp.platform === selectedPlatform);
}
if (hasEndDate) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
result = result.filter(temp => compareDate(new Date(temp.endTime), selectedEndDate!));
}
result = result.filter(
item =>
compareDate(new Date(item.startTime), date) &&
(selectedEndDate === undefined || compareDate(new Date(item.endTime), selectedEndDate))
);
this.setState(() => ({
source: getSortedSource(result, sortInfo),
selectedStartDate: date
}));
} else {
result = searchSource.filter(item => compareDate(new Date(item.endTime), date));

if (hasStatus) {
result = result.filter(temp => temp.status === selectedStatus);
}
if (hasPlatform) {
result = result.filter(temp => temp.platform === selectedPlatform);
}
if (hasStartDate) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
result = result.filter(temp => compareDate(new Date(temp.startTime), selectedStartDate!));
}
result = result.filter(
item =>
compareDate(new Date(item.endTime), date) &&
(selectedStartDate === undefined || compareDate(new Date(item.startTime), selectedStartDate))
);
this.setState(() => ({
source: getSortedSource(result, sortInfo),
selectedEndDate: date
Expand All @@ -434,7 +418,7 @@ class Experiment extends React.Component<{}, ExpListState> {
);
this.setState(() => ({
source: getSortedSource(result, sortInfo),
selectedStatus: '',
selectedStatus: [],
selectedPlatform: '',
selectedStartDate: undefined,
selectedEndDate: undefined
Expand Down
5 changes: 3 additions & 2 deletions ts/webui/src/components/managementExp/FilterBtns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { fillOptions } from './expFunction';

interface FilterBtnsProps {
platform: string[];
selectedStatus: string;
selectedStatus: string[];
selectedPlatform: string;
selectedStartDate: Date;
selectedEndDate: Date;
Expand Down Expand Up @@ -37,7 +37,8 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
<React.Fragment>
<Dropdown
label='Status'
selectedKey={selectedStatus}
selectedKeys={selectedStatus}
multiSelect
onChange={selectStatus.bind(this)}
placeholder='Select an option'
options={fillOptions(EXPERIMENTSTATUS)}
Expand Down
16 changes: 14 additions & 2 deletions ts/webui/src/components/managementExp/expFunction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,20 @@ function compareDate(date1: Date, date2: Date): boolean {
return false;
}

const filterByStatusOrPlatform = (val: string, type: string, data: AllExperimentList[]): AllExperimentList[] => {
return data.filter(temp => temp[type] === val);
const filterByStatusOrPlatform = (
val: string | string[],
type: string,
data: AllExperimentList[]
): AllExperimentList[] => {
if (typeof val === 'string' && val !== '') {
return data.filter(temp => temp[type] === val);
}

if (Array.isArray(val) && val.length !== 0) {
return data.filter(temp => val.includes(temp[type]));
}

return data;
};

function fillOptions(arr: string[]): any {
Expand Down