Search add sorting picker (#23746)

* Search: Extend search_srv with getSortOptions

* Search: Enable sorting

* Search: Fullwidth search

* Search: Add SortPicker

* Search: Add useSearchLayout

* Search: Update sort query

* Search: Refactor items rendering

* Search: Add sort to manage dashboards

* Search: Add sort icon

* Search: Mock getSortOptions

* Search: Fix Select sizes

* Search: Move SortPicker to Select

* Grafana-UI: Add ActionRow.tsx

* Grafana-UI: Use ActionRow in dashboard search

* Grafana-UI: Update ActionRow styles

* Search: Update tests

* Search: enable clearing TagFilter

* Search: Move getSortOptions outside of component

* Search: Fix import

* Search: Limit container width

* Search: Replace SearchField's clear text with icon

* Search: Fix section items query #23792

* Search: Add icons for layout switch

* Search: Remove layout switch for folder page
This commit is contained in:
Alex Khomenko
2020-04-23 08:18:53 +03:00
committed by GitHub
parent 66d405acab
commit c0fe565499
25 changed files with 405 additions and 182 deletions

View File

@@ -3,6 +3,7 @@ export const TOGGLE_SECTION = 'TOGGLE_SECTION';
export const FETCH_ITEMS = 'FETCH_ITEMS';
export const MOVE_SELECTION_UP = 'MOVE_SELECTION_UP';
export const MOVE_SELECTION_DOWN = 'MOVE_SELECTION_DOWN';
export const SEARCH_START = 'SEARCH_START';
// Manage dashboards
export const TOGGLE_CAN_SAVE = 'TOGGLE_CAN_SAVE';
@@ -20,3 +21,4 @@ export const REMOVE_TAG = 'REMOVE_TAG';
export const CLEAR_FILTERS = 'CLEAR_FILTERS';
export const SET_TAGS = 'SET_TAGS';
export const ADD_TAG = 'ADD_TAG';
export const TOGGLE_SORT = 'TOGGLE_SORT';

View File

@@ -1,6 +1,13 @@
import { DashboardSection, SearchAction } from '../types';
import { getFlattenedSections, getLookupField, markSelected } from '../utils';
import { FETCH_ITEMS, FETCH_RESULTS, TOGGLE_SECTION, MOVE_SELECTION_DOWN, MOVE_SELECTION_UP } from './actionTypes';
import {
FETCH_ITEMS,
FETCH_RESULTS,
TOGGLE_SECTION,
MOVE_SELECTION_DOWN,
MOVE_SELECTION_UP,
SEARCH_START,
} from './actionTypes';
export interface DashboardsSearchState {
results: DashboardSection[];
@@ -16,6 +23,11 @@ export const dashboardsSearchState: DashboardsSearchState = {
export const searchReducer = (state: DashboardsSearchState, action: SearchAction) => {
switch (action.type) {
case SEARCH_START:
if (!state.loading) {
return { ...state, loading: true };
}
return state;
case FETCH_RESULTS: {
const results = action.payload;
// Highlight the first item ('Starred' folder)

View File

@@ -7,6 +7,7 @@ import {
REMOVE_TAG,
SET_TAGS,
TOGGLE_STARRED,
TOGGLE_SORT,
} from './actionTypes';
export const defaultQuery: DashboardQuery = {
@@ -16,6 +17,7 @@ export const defaultQuery: DashboardQuery = {
skipRecent: false,
skipStarred: false,
folderIds: [],
sort: null,
};
export const queryReducer = (state: DashboardQuery, action: SearchAction) => {
@@ -35,7 +37,9 @@ export const queryReducer = (state: DashboardQuery, action: SearchAction) => {
case REMOVE_STARRED:
return { ...state, starred: false };
case CLEAR_FILTERS:
return { ...state, query: '', tag: [], starred: false };
return { ...state, query: '', tag: [], starred: false, sort: null };
case TOGGLE_SORT:
return { ...state, sort: action.payload };
default:
return state;
}