{
setShowFilters(false);
}, [selectedGroup]);
+
const dispatchDeviceListState = useCallback(
(options, shouldSelectDevices = true, forceRefresh = false, fetchAuth = false) => {
return dispatch(setDeviceListState({ ...options, shouldSelectDevices, forceRefresh, fetchAuth }));
@@ -349,17 +348,7 @@ export const Authorized = ({
const onPageLengthChange = perPage => dispatchDeviceListState({ perPage, page: 1, refreshTrigger: !refreshTrigger });
- const onSortChange = attribute => {
- let changedSortCol = attribute.name;
- let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;
- if (changedSortCol !== sortCol) {
- changedSortDown = SORTING_OPTIONS.desc;
- }
- dispatchDeviceListState({
- sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope },
- refreshTrigger: !refreshTrigger
- });
- };
+ const onSortChange = useCallback(sortItem => dispatchDeviceListState({ sort: [sortItem] }), [dispatchDeviceListState]);
const setDetailsTab = detailsTab => dispatchDeviceListState({ detailsTab, setOnly: true });
diff --git a/frontend/src/js/components/devices/device-groups.js b/frontend/src/js/components/devices/device-groups.js
index 9a3e6be8..269bb638 100644
--- a/frontend/src/js/components/devices/device-groups.js
+++ b/frontend/src/js/components/devices/device-groups.js
@@ -13,13 +13,13 @@
// limitations under the License.
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
import { AddCircle as AddIcon } from '@mui/icons-material';
import { Dialog, DialogContent, DialogTitle } from '@mui/material';
import storeActions from '@northern.tech/store/actions';
-import { DEVICE_FILTERING_OPTIONS, DEVICE_ISSUE_OPTIONS, DEVICE_STATES, SORTING_OPTIONS, emptyFilter, onboardingSteps } from '@northern.tech/store/constants';
+import { DEVICE_FILTERING_OPTIONS, DEVICE_ISSUE_OPTIONS, DEVICE_STATES, emptyFilter, onboardingSteps } from '@northern.tech/store/constants';
import {
getAcceptedDevices,
getDeviceCountsByStatus,
@@ -98,12 +98,10 @@ export const DeviceGroups = () => {
const isEnterprise = useSelector(getIsEnterprise);
const dispatch = useDispatch();
const isInitialized = useRef(false);
- const location = useLocation();
const [locationParams, setLocationParams] = useLocationParams('devices', {
filteringAttributes,
- filters,
- defaults: { sort: { direction: SORTING_OPTIONS.desc } }
+ filters
});
const { refreshTrigger, selectedId, state: selectedState } = deviceListState;
@@ -128,11 +126,6 @@ export const DeviceGroups = () => {
setLocationParams
]);
- useEffect(() => {
- // set isInitialized ref to false when location changes, otherwise when you go back setLocationParams will be set with a duplicate item
- isInitialized.current = false;
- }, [location]);
-
useEffect(() => {
const { groupName, filters = [], id = [], ...remainder } = locationParams;
const { hasFullFiltering } = tenantCapabilities;
diff --git a/frontend/src/js/components/devices/devicelist.js b/frontend/src/js/components/devices/devicelist.js
index 97a02d06..0ceb2bb4 100644
--- a/frontend/src/js/components/devices/devicelist.js
+++ b/frontend/src/js/components/devices/devicelist.js
@@ -14,18 +14,20 @@
import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
// material ui
-import { Settings as SettingsIcon, Sort as SortIcon } from '@mui/icons-material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
import { Checkbox } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
-import { DEVICE_LIST_DEFAULTS, SORTING_OPTIONS, TIMEOUTS } from '@northern.tech/store/constants';
+import { DEVICE_LIST_DEFAULTS, SORTING_OPTIONS, SORT_DIRECTIONS, TIMEOUTS } from '@northern.tech/store/constants';
import { isDarkMode } from '@northern.tech/store/utils';
import { deepCompare, toggle } from '../../helpers';
+import { useDebounce } from '../../utils/debouncehook';
import useWindowSize from '../../utils/resizehook';
import Loader from '../common/loader';
import MenderTooltip from '../common/mendertooltip';
import Pagination from '../common/pagination';
+import SortIcon from '../common/sorticon';
import DeviceListItem from './devicelistitem';
const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;
@@ -55,13 +57,20 @@ const useStyles = makeStyles()(theme => ({
}
}));
-const HeaderItem = ({ column, columnCount, index, sortCol, sortDown, onSort, onResizeChange, onResizeFinish, resizable }) => {
+const HeaderItem = ({ column, columnCount, index, sortOptions, onSort, onResizeChange, onResizeFinish, resizable }) => {
const [isHovering, setIsHovering] = useState(false);
const [shouldRemoveListeners, setShouldRemoveListeners] = useState(false);
+ const { direction, key } = sortOptions.find(({ key, scope }) => column.attribute.name === key && column.attribute.scope === scope) ?? {};
+ const [sortState, setSortState] = useState({ disabled: !key, direction });
+ const sortDown = key && direction === SORTING_OPTIONS.desc;
const resizeRef = useRef();
const ref = useRef();
const { classes } = useStyles();
+ const isSortable = column.sortable && !!onSort;
+
+ const debouncedSortState = useDebounce(sortState, TIMEOUTS.debounceShort);
+
const onMouseOut = () => setIsHovering(false);
const onMouseOver = () => setIsHovering(true);
@@ -105,19 +114,36 @@ const HeaderItem = ({ column, columnCount, index, sortCol, sortDown, onSort, onR
}
}, [shouldRemoveListeners, mouseMove, mouseUp]);
+ useEffect(() => {
+ if (!onSort) {
+ return;
+ }
+ onSort({ key: column.attribute.name, direction: debouncedSortState.direction, disabled: debouncedSortState.disabled, scope: column.attribute.scope });
+ }, [column.attribute.name, column.attribute.scope, debouncedSortState.direction, debouncedSortState.disabled, onSort]);
+
+ const onSortClick = () => {
+ if (!isSortable) {
+ return;
+ }
+ const nextDirectionIndex = SORT_DIRECTIONS.indexOf(sortState.direction) + 1;
+ const direction = SORT_DIRECTIONS[nextDirectionIndex] ?? '';
+ setSortState({ direction, disabled: !direction });
+ };
+
let resizeHandleClassName = resizable && isHovering ? 'hovering' : '';
resizeHandleClassName = resizeRef.current ? 'resizing' : resizeHandleClassName;
const header = (
-
<>{item.title}
- {item.sortable ? : null}
+ {item.sortable && }
{item.tooltip}
))}
diff --git a/frontend/src/js/components/releases/releases.js b/frontend/src/js/components/releases/releases.js
index 6bc8dbce..67005806 100644
--- a/frontend/src/js/components/releases/releases.js
+++ b/frontend/src/js/components/releases/releases.js
@@ -164,7 +164,7 @@ export const Releases = () => {
const [selectedFile, setSelectedFile] = useState();
const [showAddArtifactDialog, setShowAddArtifactDialog] = useState(false);
const artifactTimer = useRef();
- const [locationParams, setLocationParams] = useLocationParams('releases', { defaults: { direction: SORTING_OPTIONS.desc, key: 'modified' } });
+ const [locationParams, setLocationParams] = useLocationParams('releases', { defaults: { sort: { direction: SORTING_OPTIONS.desc, key: 'modified' } } });
const debouncedSearchTerm = useDebounce(searchTerm, TIMEOUTS.debounceDefault);
const debouncedTypeFilter = useDebounce(type, TIMEOUTS.debounceDefault);
@@ -189,11 +189,11 @@ export const Releases = () => {
]);
useEffect(() => {
- const { selectedRelease, tags, ...remainder } = locationParams;
+ const { selectedRelease, tags, sort, ...remainder } = locationParams;
if (selectedRelease) {
dispatch(selectRelease(selectedRelease));
}
- dispatch(setReleasesListState({ ...remainder, selectedTags: tags }));
+ dispatch(setReleasesListState({ ...remainder, sort: sort[0], selectedTags: tags }));
clearInterval(artifactTimer.current);
artifactTimer.current = setInterval(() => dispatch(getReleases()), refreshArtifactsLength);
return () => {
diff --git a/frontend/src/js/components/releases/releaseslist.js b/frontend/src/js/components/releases/releaseslist.js
index 52e9a38d..d1730b96 100644
--- a/frontend/src/js/components/releases/releaseslist.js
+++ b/frontend/src/js/components/releases/releaseslist.js
@@ -108,17 +108,10 @@ export const ReleasesList = ({ className = '', onFileUploadClick }) => {
const [selectedReleases, setSelectedReleases] = useState([]);
const { canUploadReleases } = userCapabilities;
- const { key: attribute, direction } = sort;
const onSelect = useCallback(id => dispatch(selectRelease(id)), [dispatch]);
- const onChangeSorting = sortKey => {
- let sort = { key: sortKey, direction: direction === SORTING_OPTIONS.asc ? SORTING_OPTIONS.desc : SORTING_OPTIONS.asc };
- if (sortKey !== attribute) {
- sort = { ...sort, direction: columns.find(({ key }) => key === sortKey)?.defaultSortDirection ?? SORTING_OPTIONS.desc };
- }
- dispatch(setReleasesListState({ page: 1, sort }));
- };
+ const onChangeSorting = useCallback(sortOption => dispatch(setReleasesListState({ page: 1, sort: sortOption })), [dispatch]); // release retrieval only supports a single sort criterium so we can't pass a list of sortOptions
const onChangePagination = (page, currentPerPage = perPage) => dispatch(setReleasesListState({ page, perPage: currentPerPage }));
@@ -186,9 +179,8 @@ export const ReleasesList = ({ className = '', onFileUploadClick }) => {
);
}
- const onSelectionChange = (selection = []) => {
- dispatch(setReleasesListState({ selection }));
- };
+ const onSelectionChange = (selection = []) => dispatch(setReleasesListState({ selection }));
+
return (
{isLoading === undefined ? (
@@ -201,7 +193,7 @@ export const ReleasesList = ({ className = '', onFileUploadClick }) => {
columns={applicableColumns}
items={releases}
onItemClick={onSelect}
- sort={sort}
+ sort={[sort]}
onChangeSorting={onChangeSorting}
tableRef={repoRef}
onRowSelected={onSelectionChange}
diff --git a/frontend/src/js/components/releases/releaseslist.test.js b/frontend/src/js/components/releases/releaseslist.test.js
index d8a7245d..093fb6ba 100644
--- a/frontend/src/js/components/releases/releaseslist.test.js
+++ b/frontend/src/js/components/releases/releaseslist.test.js
@@ -13,17 +13,21 @@
// limitations under the License.
import React from 'react';
+import { act } from '@testing-library/react';
+
import { undefineds } from '../../../../tests/mockData';
import { render } from '../../../../tests/setupTests';
import ReleasesList from './releaseslist';
describe('ReleasesList Component', () => {
it('renders correctly', async () => {
- const { baseElement } = render(
-
- );
+ const { baseElement } = render();
const view = baseElement.firstChild.firstChild;
expect(view).toMatchSnapshot();
expect(view).toEqual(expect.not.stringMatching(undefineds));
+ await act(async () => {
+ jest.runOnlyPendingTimers();
+ jest.runAllTicks();
+ });
});
});
diff --git a/frontend/src/js/components/search-result.js b/frontend/src/js/components/search-result.js
index 800346fe..d9028802 100644
--- a/frontend/src/js/components/search-result.js
+++ b/frontend/src/js/components/search-result.js
@@ -20,7 +20,7 @@ import { Close as CloseIcon } from '@mui/icons-material';
import { ClickAwayListener, Drawer, IconButton, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
-import { SORTING_OPTIONS, TIMEOUTS } from '@northern.tech/store/constants';
+import { TIMEOUTS } from '@northern.tech/store/constants';
import { getIdAttribute, getMappedDevicesList, getUserSettings } from '@northern.tech/store/selectors';
import { setDeviceListState, setSearchState } from '@northern.tech/store/thunks';
import pluralize from 'pluralize';
@@ -76,8 +76,7 @@ export const SearchResult = ({ onToggleSearchResult, open = true }) => {
const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));
- const { isSearching, searchTerm, searchTotal, sort = {} } = searchState;
- const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;
+ const { isSearching, searchTerm, searchTotal } = searchState;
useEffect(() => {
const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);
@@ -106,15 +105,6 @@ export const SearchResult = ({ onToggleSearchResult, open = true }) => {
dispatch(setSearchState({ page }));
};
- const onSortChange = attribute => {
- let changedSortCol = attribute.name;
- let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;
- if (changedSortCol !== sortCol) {
- changedSortDown = SORTING_OPTIONS.desc;
- }
- dispatch(setSearchState({ page: 1, sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope } }));
- };
-
const onClearClick = () => {
dispatch(setSearchState({ searchTerm: '' }));
onToggleSearchResult();
@@ -142,10 +132,9 @@ export const SearchResult = ({ onToggleSearchResult, open = true }) => {
{
diff --git a/frontend/src/js/store/appSlice/thunks.ts b/frontend/src/js/store/appSlice/thunks.ts
index 78fd382f..17978b24 100644
--- a/frontend/src/js/store/appSlice/thunks.ts
+++ b/frontend/src/js/store/appSlice/thunks.ts
@@ -15,7 +15,7 @@
import GeneralApi from '@northern.tech/store/api/general-api';
import { getOfflineThresholdSettings } from '@northern.tech/store/selectors';
import { searchDevices } from '@northern.tech/store/thunks';
-import { extractErrorMessage, getComparisonCompatibleVersion } from '@northern.tech/store/utils';
+import { combineSortCriteria, extractErrorMessage, getComparisonCompatibleVersion, sortCriteriaToSortOptions } from '@northern.tech/store/utils';
import { createAsyncThunk } from '@reduxjs/toolkit';
import Cookies from 'universal-cookie';
@@ -121,10 +121,7 @@ export const setSearchState = createAsyncThunk(`${sliceName}/setSearchState`, (s
let nextState = {
...currentState,
...searchState,
- sort: {
- ...currentState.sort,
- ...searchState.sort
- }
+ sort: combineSortCriteria(currentState.sort, searchState.sort)
};
let tasks = [];
// eslint-disable-next-line no-unused-vars
@@ -134,7 +131,7 @@ export const setSearchState = createAsyncThunk(`${sliceName}/setSearchState`, (s
if (nextRequestState.searchTerm && !deepCompare(currentRequestState, nextRequestState)) {
nextState.isSearching = true;
tasks.push(
- dispatch(searchDevices(nextState))
+ dispatch(searchDevices({ ...nextState, sortOptions: sortCriteriaToSortOptions(nextState.sort) }))
.unwrap()
.then(results => {
const searchResult = results[results.length - 1];
diff --git a/frontend/src/js/store/deploymentsSlice/constants.ts b/frontend/src/js/store/deploymentsSlice/constants.ts
index d05267b9..aa15ba34 100644
--- a/frontend/src/js/store/deploymentsSlice/constants.ts
+++ b/frontend/src/js/store/deploymentsSlice/constants.ts
@@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-import { DEVICE_LIST_DEFAULTS, SORTING_OPTIONS, apiUrl } from '@northern.tech/store/constants';
+import { DEVICE_LIST_DEFAULTS, apiUrl } from '@northern.tech/store/constants';
const alreadyInstalled = 'already-installed';
@@ -95,8 +95,7 @@ export const listDefaultsByState = {
[DEPLOYMENT_STATES.inprogress]: { page: 1, perPage: 10 },
[DEPLOYMENT_STATES.pending]: { page: 1, perPage: 10 },
[DEPLOYMENT_STATES.scheduled]: { ...DEVICE_LIST_DEFAULTS },
- [DEPLOYMENT_STATES.finished]: { ...DEVICE_LIST_DEFAULTS },
- sort: { direction: SORTING_OPTIONS.desc }
+ [DEPLOYMENT_STATES.finished]: { ...DEVICE_LIST_DEFAULTS }
};
export const DEFAULT_PENDING_INPROGRESS_COUNT = 10;
diff --git a/frontend/src/js/store/devicesSlice/index.ts b/frontend/src/js/store/devicesSlice/index.ts
index 5bd1ed08..adcbd2e4 100644
--- a/frontend/src/js/store/devicesSlice/index.ts
+++ b/frontend/src/js/store/devicesSlice/index.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
// @ts-nocheck
-import { DEVICE_LIST_DEFAULTS, SORTING_OPTIONS } from '@northern.tech/store/commonConstants';
+import { DEVICE_LIST_DEFAULTS } from '@northern.tech/store/commonConstants';
import { createSlice } from '@reduxjs/toolkit';
import { deepCompare, duplicateFilter } from '../../helpers';
@@ -41,11 +41,9 @@ export const initialState = {
selectedAttributes: [],
selectedIssues: [],
selection: [],
- sort: {
- direction: SORTING_OPTIONS.desc
- // key: null,
- // scope: null
- },
+ sort: [
+ // { direction: SORTING_OPTIONS.desc, key: null, scope: null }
+ ],
state: DEVICE_STATES.accepted,
total: 0
},
@@ -133,11 +131,7 @@ export const devicesSlice = createSlice({
setDeviceListState: (state, action) => {
state.deviceList = {
...state.deviceList,
- ...action.payload,
- sort: {
- ...state.deviceList.sort,
- ...action.payload.sort
- }
+ ...action.payload
};
},
setFilterAttributes: (state, action) => {
diff --git a/frontend/src/js/store/devicesSlice/thunks.tsx b/frontend/src/js/store/devicesSlice/thunks.tsx
index 1086979c..82fda1a7 100644
--- a/frontend/src/js/store/devicesSlice/thunks.tsx
+++ b/frontend/src/js/store/devicesSlice/thunks.tsx
@@ -11,8 +11,8 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-
// @ts-nocheck
+
/*eslint import/namespace: ['error', { allowComputed: true }]*/
import React from 'react';
import { Link } from 'react-router-dom';
@@ -25,7 +25,6 @@ import {
DEVICE_LIST_DEFAULTS,
EXTERNAL_PROVIDER,
MAX_PAGE_SIZE,
- SORTING_OPTIONS,
TIMEOUTS,
UNGROUPED_GROUP,
auditLogsApiUrl,
@@ -47,13 +46,15 @@ import {
import { commonErrorFallback, commonErrorHandler } from '@northern.tech/store/store';
import { getDeviceMonitorConfig, getLatestDeviceAlerts, getSingleDeployment, saveGlobalSettings } from '@northern.tech/store/thunks';
import {
+ combineSortCriteria,
convertDeviceListStateToFilters,
extractErrorMessage,
filtersFilter,
mapDeviceAttributes,
mapFiltersToTerms,
mapTermsToFilters,
- progress
+ progress,
+ sortCriteriaToSortOptions
} from '@northern.tech/store/utils';
import { createAsyncThunk } from '@reduxjs/toolkit';
import { isCancel } from 'axios';
@@ -518,7 +519,7 @@ export const setDeviceListState = createAsyncThunk(
setOnly: false,
refreshTrigger,
...selectionState,
- sort: { ...currentState.sort, ...selectionState.sort }
+ sort: combineSortCriteria(currentState.sort, selectionState.sort)
};
let tasks = [];
// eslint-disable-next-line no-unused-vars
@@ -526,12 +527,10 @@ export const setDeviceListState = createAsyncThunk(
// eslint-disable-next-line no-unused-vars
const { isLoading: nextLoading, deviceIds: nextDevices, selection: nextSelection, ...nextRequestState } = nextState;
if (!nextState.setOnly && !deepCompare(currentRequestState, nextRequestState)) {
- const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol, scope: sortScope } = nextState.sort ?? {};
- const sortBy = sortCol ? [{ attribute: sortCol, order: sortDown, scope: sortScope }] : undefined;
const applicableSelectedState = nextState.state === routes.allDevices.key ? undefined : nextState.state;
nextState.isLoading = true;
tasks.push(
- dispatch(getDevicesByStatus({ ...nextState, status: applicableSelectedState, sortOptions: sortBy, fetchAuth }))
+ dispatch(getDevicesByStatus({ ...nextState, status: applicableSelectedState, sortOptions: sortCriteriaToSortOptions(nextState.sort), fetchAuth }))
.unwrap()
.then(results => {
const { deviceAccu, total } = results[results.length - 1];
diff --git a/frontend/src/js/store/releasesSlice/thunks.ts b/frontend/src/js/store/releasesSlice/thunks.ts
index 9850f40b..610c0952 100644
--- a/frontend/src/js/store/releasesSlice/thunks.ts
+++ b/frontend/src/js/store/releasesSlice/thunks.ts
@@ -268,10 +268,18 @@ export const selectRelease = createAsyncThunk(`${sliceName}/selectRelease`, (rel
export const setReleasesListState = createAsyncThunk(`${sliceName}/setReleasesListState`, (selectionState, { dispatch, getState }) => {
const currentState = getState().releases.releasesList;
+
+ let nextSort = selectionState.sort ?? {};
+ if (nextSort.key === currentState.sort.key && nextSort.disabled) {
+ nextSort = { direction: SORTING_OPTIONS.desc, key: 'modified' };
+ } else if (nextSort.disabled && nextSort.key !== currentState.sort.key) {
+ nextSort = currentState.sort;
+ }
+
let nextState = {
...currentState,
...selectionState,
- sort: { ...currentState.sort, ...selectionState.sort }
+ sort: { ...currentState.sort, ...nextSort }
};
let tasks = [];
// eslint-disable-next-line no-unused-vars
diff --git a/frontend/src/js/store/usersSlice/thunks.test.ts b/frontend/src/js/store/usersSlice/thunks.test.ts
index eab99acd..d0560980 100644
--- a/frontend/src/js/store/usersSlice/thunks.test.ts
+++ b/frontend/src/js/store/usersSlice/thunks.test.ts
@@ -72,7 +72,7 @@ const settings = { test: true };
// eslint-disable-next-line no-unused-vars
const { attributes, ...expectedDevice } = defaultState.devices.byId.a1;
-export const offlineThreshold = [
+const offlineThreshold = [
{ type: setOfflineThreshold.pending.type },
{ type: appActions.setOfflineThreshold.type, payload: '2019-01-12T13:00:00.900Z' },
{ type: setOfflineThreshold.fulfilled.type }
diff --git a/frontend/src/js/store/utils.ts b/frontend/src/js/store/utils.ts
index 50032b99..7f8783a8 100644
--- a/frontend/src/js/store/utils.ts
+++ b/frontend/src/js/store/utils.ts
@@ -13,7 +13,14 @@
// limitations under the License.
// @ts-nocheck
import { duplicateFilter, yes } from '../helpers';
-import { ATTRIBUTE_SCOPES, DEVICE_FILTERING_OPTIONS, DEVICE_ISSUE_OPTIONS, DEVICE_LIST_MAXIMUM_LENGTH, emptyUiPermissions } from './commonConstants';
+import {
+ ATTRIBUTE_SCOPES,
+ DEVICE_FILTERING_OPTIONS,
+ DEVICE_ISSUE_OPTIONS,
+ DEVICE_LIST_MAXIMUM_LENGTH,
+ SORTING_OPTIONS,
+ emptyUiPermissions
+} from './commonConstants';
import {
DARK_MODE,
DEPLOYMENT_STATES,
@@ -246,3 +253,28 @@ export const mapDeviceAttributes = (attributes = []) =>
);
export const isDarkMode = mode => mode === DARK_MODE;
+
+export const combineSortCriteria = (currentCriteria = [], newCriteria = []) =>
+ newCriteria.reduce(
+ (accu, sort) => {
+ const existingSortIndex = accu.findIndex(({ scope, key }) => scope === sort.scope && key === sort.key);
+ if (existingSortIndex > -1) {
+ accu.splice(existingSortIndex, 1);
+ }
+ if (sort.disabled) {
+ return accu;
+ }
+ accu.push(sort);
+ return accu;
+ },
+ [...currentCriteria.filter(({ disabled }) => !disabled)]
+ );
+
+export const sortCriteriaToSortOptions = criteria =>
+ criteria.reduce((accu, sort) => {
+ const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol, scope: sortScope } = sort;
+ if (sortCol) {
+ accu.push({ attribute: sortCol, order: sortDown, scope: sortScope });
+ }
+ return accu;
+ }, []);
diff --git a/frontend/src/js/utils/locationutils.js b/frontend/src/js/utils/locationutils.js
index b3a5ecef..37c3cb72 100644
--- a/frontend/src/js/utils/locationutils.js
+++ b/frontend/src/js/utils/locationutils.js
@@ -37,6 +37,8 @@ const commonFields = {
issues: { parse: undefined, select: defaultSelector, target: 'selectedIssues' },
open: { parse: Boolean, select: defaultSelector, target: 'open' }
};
+const sortingFields = ['scope', 'key', 'direction'];
+const parsingSortingFields = [...sortingFields].reverse();
const scopes = {
identity: { delimiter: 'identity', filters: [] },
@@ -67,15 +69,18 @@ export const commonProcessor = searchParams => {
Object.keys(commonFields).map(key => params.delete(key));
const sort = params.has('sort')
? params.getAll('sort').reduce((sortAccu, scopedQuery) => {
+ // reverse the items to ensure the optional scope is only considered if it is present
const items = scopedQuery.split(SEPARATOR).reverse();
- return ['direction', 'key', 'scope'].reduce((accu, key, index) => {
+ const parsedSortItem = parsingSortingFields.reduce((accu, key, index) => {
if (items[index]) {
accu[key] = items[index];
}
return accu;
- }, sortAccu);
- }, {})
- : undefined;
+ }, {});
+ sortAccu.push(parsedSortItem);
+ return sortAccu;
+ }, [])
+ : [];
params.delete('sort');
return { pageState, params, sort };
};
@@ -156,23 +161,31 @@ export const parseDeviceQuery = (searchParams, extraProps = {}) => {
return { detailsTab, filters: Object.values(scopedFilters).flat(), groupName, ...pageStateExtension };
};
-const formatSorting = (sort, { sort: sortDefault }) => {
+const formatSorting = (sort, { sort: sortDefault = [] }) => {
if (!sort || deepCompare(sort, sortDefault)) {
return '';
}
- const sortQuery = ['scope', 'key', 'direction']
- .reduce((accu, key) => {
- if (!sort[key]) {
- return accu;
- }
- accu.push(sort[key]);
- return accu;
- }, [])
- .join(SEPARATOR);
- return `sort=${sortQuery}`;
+ let sorter = sort;
+ if (!Array.isArray(sort)) {
+ sorter = [sort];
+ }
+ const queries = sorter.reduce((accu, sortOption) => {
+ const sortQuery = sortingFields
+ .reduce((fieldsAccu, key) => {
+ if (!sortOption[key]) {
+ return fieldsAccu;
+ }
+ fieldsAccu.push(sortOption[key]);
+ return fieldsAccu;
+ }, [])
+ .join(SEPARATOR);
+ accu.push(`sort=${sortQuery}`);
+ return accu;
+ }, []);
+ return queries.join('&');
};
-export const formatPageState = ({ selectedId, selectedIssues, page, perPage, sort }, { defaults }) =>
+export const formatPageState = ({ selectedId, selectedIssues, page, perPage, sort }, { defaults = {} }) =>
Object.entries({ page, perPage, id: selectedId, issues: selectedIssues, open: selectedId ? true : undefined })
.reduce(
(accu, [key, value]) => {
@@ -312,7 +325,7 @@ const formatActiveDeployments = (pageState, { defaults }) =>
.filter(i => i)
.join('&');
-export const formatDeployments = ({ deploymentObject, pageState }, { defaults, today, tonight }) => {
+export const formatDeployments = ({ deploymentObject, pageState }, { defaults = {}, today, tonight }) => {
const { state: selectedState, showCreationDialog } = pageState.general;
let params = new URLSearchParams();
if (showCreationDialog) {
diff --git a/frontend/src/js/utils/locationutils.test.js b/frontend/src/js/utils/locationutils.test.js
index 4a8fdced..442a0bb9 100644
--- a/frontend/src/js/utils/locationutils.test.js
+++ b/frontend/src/js/utils/locationutils.test.js
@@ -37,9 +37,11 @@ const sortDefaults = { sort: { direction: 'asc' } };
describe('locationutils', () => {
describe('common', () => {
it('uses working utilties - commonProcessor', () => {
- const startParams = new URLSearchParams('?perPage=234&id=123-324&open=true&sort=asc&issues=issueType1&issues=issueType2');
+ const startParams = new URLSearchParams(
+ '?perPage=234&id=123-324&open=true&sort=desc&sort=someKey:asc&sort=scoped:otherKey:asc&issues=issueType1&issues=issueType2'
+ );
const { pageState, params, sort } = commonProcessor(startParams);
- expect(sort).toEqual({ direction: 'asc' });
+ expect(sort).toEqual([{ direction: 'desc' }, { direction: 'asc', key: 'someKey' }, { direction: 'asc', key: 'otherKey', scope: 'scoped' }]);
expect(pageState).toEqual({ id: ['123-324'], selectedIssues: ['issueType1', 'issueType2'], open: true, perPage: 234 });
expect(params.has('page')).not.toBeTruthy();
});
@@ -50,6 +52,32 @@ describe('locationutils', () => {
);
expect(search).toEqual('sort=someKey:desc&page=1234&perPage=1000&id=123&issues=1243&issues=qweioqwei&open=true');
});
+ it('uses working utilities - formatPageState', () => {
+ const search = formatPageState(
+ {
+ page: 1234,
+ perPage: 1000,
+ sort: [
+ { direction: 'desc', key: 'someKey' },
+ { direction: 'asc', key: 'otherKey' },
+ { direction: 'desc', scope: 'fooscope', key: 'someKey' }
+ ]
+ },
+ { defaults: { sort: [{ direction: 'asc', key: 'otherKey' }] } }
+ );
+ expect(search).toEqual('sort=someKey:desc&sort=otherKey:asc&sort=fooscope:someKey:desc&page=1234&perPage=1000');
+ });
+ it('uses working utilities - formatPageState with default sort', () => {
+ const search = formatPageState(
+ {
+ page: 1234,
+ perPage: 1000,
+ sort: [{ direction: 'asc', key: 'otherKey' }]
+ },
+ { defaults: { sort: [{ direction: 'asc', key: 'otherKey' }] } }
+ );
+ expect(search).toEqual('page=1234&perPage=1000');
+ });
});
describe('auditlog', () => {
const startDate = new Date('2000-01-01').toISOString();
diff --git a/frontend/src/less/main.less b/frontend/src/less/main.less
index 2121d474..4979d816 100644
--- a/frontend/src/less/main.less
+++ b/frontend/src/less/main.less
@@ -745,17 +745,19 @@ table thead.clickable tr > th:first-child {
}
.columnHeader {
- cursor: pointer;
display: flex;
align-items: center;
+ &.sortable {
+ cursor: pointer;
+ }
.sortIcon {
visibility: hidden;
margin-left: calc(@defaultGutterWidth / 3);
- .transition(visibility 0.1s ease-in) !important;
+ .transition(visibility 0.1s ease-in);
&.selected {
.opacity(1);
visibility: visible;
- .transition(all 0.15s ease-in-out) !important;
+ .transition(all 0.15s ease-in-out);
}
}
&:hover {
@@ -763,7 +765,11 @@ table thead.clickable tr > th:first-child {
.sortIcon {
.opacity(1);
visibility: visible;
- .transition(all 0.15s ease-in-out) !important;
+ .transition(all 0.15s ease-in-out);
+ }
+ .fadeOut {
+ .opacity(0);
+ .transition(opacity 0.2s linear);
}
}
.material-icons {
diff --git a/frontend/tests/mockData.js b/frontend/tests/mockData.js
index e4010b9d..6d78141f 100644
--- a/frontend/tests/mockData.js
+++ b/frontend/tests/mockData.js
@@ -129,7 +129,7 @@ export const defaultState = {
deviceIds: [],
searchTerm: '',
searchTotal: 0,
- sort: {}
+ sort: []
},
snackbar: {},
uploadsById: {},
@@ -307,11 +307,7 @@ export const defaultState = {
selectedAttributes: [],
selectedIssues: [],
selection: [],
- sort: {
- direction: SORTING_OPTIONS.desc
- // key: null,
- // scope: null
- },
+ sort: [],
state: DEVICE_STATES.accepted,
total: 0
},