IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Search/migrate search filter actions (#23133)

Browse Source 
* Search: Initial setup

* Search: Use icon prop

* Search: Add button variants

* Search: Enable toggle all

* Search: Fix starred filter

* Search: update tests

* Search: Enable filters

* Search: Use emotion styling

* Search: Enable dashboard deleting

* Search: Enable dashboard moving

* Search: Update tests

* Search: Add SearchResultsFilter.test.tsx

* Search: Tweak types

* Search: Remove onReset

* Search: Remove redundant fragment

* Search: Use HorizontalGroup

* Search: Alight top checkbox
This commit is contained in:
Alex Khomenko
2020-04-02 14:07:31 +03:00
committed by GitHub
parent 9c9f6f168b
commit ce3a1fc56c
7 changed files with 243 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/app/core/components/manage_dashboards/manage_dashboards.html
View File

@@ -60,47 +60,19 @@
</div>
<div class="search-results" ng-show="ctrl.sections.length > 0">
<div class="search-results-filter-row">
<gf-form-checkbox
on-change="ctrl.onSelectAllChanged()"
checked="ctrl.selectAllChecked"
switch-class="gf-form-checkbox--transparent"
/>
<div class="search-results-filter-row__filters">
<div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
<select
class="search-results-filter-row__filters-item gf-form-input"
ng-model="ctrl.selectedStarredFilter"
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
ng-change="ctrl.onStarredFilterChange()"
/>
</div>
<div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
<select
class="search-results-filter-row__filters-item gf-form-input"
ng-model="ctrl.selectedTagFilter"
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
ng-change="ctrl.onTagFilterChange()"
/>
</div>
<div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
<button type="button"
class="btn gf-form-button btn-inverse"
ng-disabled="!ctrl.canMove"
ng-click="ctrl.moveTo()"
bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'"
data-placement="bottom">
<i class="fa fa-exchange"></i>&nbsp;&nbsp;Move
</button>
<button type="button"
class="btn gf-form-button btn-danger"
ng-click="ctrl.delete()"
ng-disabled="!ctrl.canDelete">
<i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
</button>
</div>
</div>
</div>
<search-filters
on-select-all-changed="ctrl.onSelectAllChanged"
all-checked="ctrl.selectAllChecked"
can-move="ctrl.canMove"
can-delete="ctrl.canDelete"
move-to="ctrl.moveTo"
delete-item="ctrl.delete"
tag-filter-options="ctrl.tagFilterOptions"
selected-starred-filter="ctrl.selectedStarredFilter"
on-starred-filter-change="ctrl.onStarredFilterChange"
selected-tag-filter="ctrl.selectedTagFilter"
on-tagfilter-change="ctrl.onTagFilterChange"
/>
<div class="search-results-container">
<search-results
results="ctrl.sections"

40
public/app/core/components/manage_dashboards/manage_dashboards.ts
View File

@@ -1,5 +1,6 @@
import { IScope } from 'angular';
import _ from 'lodash';
import { SelectableValue } from '@grafana/data';
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
import { SearchSrv } from 'app/core/services/search_srv';
@@ -54,7 +55,6 @@ export class ManageDashboardsCtrl {
hasFilters = false;
tagFilterOptions: any[];
selectedTagFilter: any;
starredFilterOptions = [{ text: 'Filter by Starred', disabled: true }, { text: 'Yes' }, { text: 'No' }];
selectedStarredFilter: any;
// used when managing dashboards for a specific folder
@@ -88,8 +88,6 @@ export class ManageDashboardsCtrl {
this.query.folderIds = [this.folderId];
}
this.selectedStarredFilter = this.starredFilterOptions[0];
this.refreshList().then(() => {
this.initTagFilter();
});
@@ -185,7 +183,7 @@ export class ManageDashboardsCtrl {
return ids;
}
delete() {
delete = () => {
const data = this.getFoldersAndDashboardsToDelete();
const folderCount = data.folderUids.length;
const dashCount = data.dashboardUids.length;
@@ -211,7 +209,7 @@ export class ManageDashboardsCtrl {
this.deleteFoldersAndDashboards(data.folderUids, data.dashboardUids);
},
});
}
};
private deleteFoldersAndDashboards(folderUids: string[], dashboardUids: string[]) {
promiseToDigest(this.$scope)(
@@ -232,7 +230,7 @@ export class ManageDashboardsCtrl {
return selectedDashboards;
}
moveTo() {
moveTo = () => {
const selectedDashboards = this.getDashboardsToMove();
const template =
@@ -247,12 +245,11 @@ export class ManageDashboardsCtrl {
afterSave: this.refreshList.bind(this),
},
});
}
};
initTagFilter() {
return this.searchSrv.getDashboardTags().then((results: any) => {
this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results);
this.selectedTagFilter = this.tagFilterOptions[0];
this.tagFilterOptions = results.map((result: any) => ({ value: result.term, label: result.term }));
});
}
@@ -269,11 +266,11 @@ export class ManageDashboardsCtrl {
return this.refreshList();
}
onTagFilterChange() {
const res = this.filterByTag(this.selectedTagFilter.term);
this.selectedTagFilter = this.tagFilterOptions[0];
onTagFilterChange = (filter: SelectableValue) => {
const res = this.filterByTag(filter.value);
this.selectedTagFilter = filter.value;
return res;
}
};
removeTag(tag: any, evt: Event) {
this.query.tag = _.without(this.query.tag, tag);
@@ -289,13 +286,15 @@ export class ManageDashboardsCtrl {
return this.refreshList();
}
onStarredFilterChange() {
this.query.starred = this.selectedStarredFilter.text === 'Yes';
this.selectedStarredFilter = this.starredFilterOptions[0];
onStarredFilterChange = (filter: SelectableValue) => {
this.query.starred = filter.value;
this.selectedStarredFilter = filter.value;
return this.refreshList();
}
};
onSelectAllChanged = () => {
this.selectAllChecked = !this.selectAllChecked;
onSelectAllChanged() {
for (const section of this.sections) {
if (!section.hideHeader) {
section.checked = this.selectAllChecked;
@@ -306,14 +305,15 @@ export class ManageDashboardsCtrl {
return item;
});
}
this.selectionChanged();
}
};
clearFilters() {
this.query.query = '';
this.query.tag = [];
this.query.starred = false;
this.selectedStarredFilter = 'starred';
this.selectedTagFilter = 'tag';
this.refreshList();
}