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

dashfolders: styling of selected filters

Browse Source 
#10081
This commit is contained in:
Marcus Efraimsson
2017-12-14 20:20:36 +01:00
parent 62e6fed5ce
commit bd7837e8d7
5 changed files with 114 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,86 +1,104 @@
<div class="page-action-bar" ng-hide="!ctrl.hasFilters && ctrl.sections.length === 0"> <div class="dashboard-list">
<label class="gf-form gf-form--grow gf-form--has-input-icon"> <div class="page-action-bar page-action-bar--narrow" ng-hide="!ctrl.hasFilters && ctrl.sections.length === 0">
<input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" /> <label class="gf-form gf-form--grow gf-form--has-input-icon">
<i class="gf-form-input-icon fa fa-search"></i> <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
</label> <i class="gf-form-input-icon fa fa-search"></i>
<div class="page-action-bar__spacer"></div> </label>
<a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}"> <div class="page-action-bar__spacer"></div>
<i class="fa fa-plus"></i> <a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}">
Dashboard <i class="fa fa-plus"></i>
</a> Dashboard
<a class="btn btn-success" href="/dashboards/folder/new" ng-if="!ctrl.folderId"> </a>
<i class="fa fa-plus"></i> <a class="btn btn-success" href="/dashboards/folder/new" ng-if="!ctrl.folderId">
Folder <i class="fa fa-plus"></i>
</a> Folder
</div> </a>
<div class="gf-form" ng-if="ctrl.query.tag.length">
Filters:
<span ng-repeat="tagName in ctrl.query.tag">
<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
<i class="fa fa-remove"></i>
{{tagName}}
</a>
</span>
</div>
<div class="gf-form">
<div class="gf-form-button-row" ng-show="ctrl.hasFilters">
<button
type="button"
class="btn gf-form-button btn-inverse btn-small"
ng-click="ctrl.clearFilters()">
<i class="fa fa-close"></i> Clear current search query and filters
</button>
</div> </div>
</div>
<div class="dashboard-list" ng-show="ctrl.sections.length > 0"> <div class="page-action-bar page-action-bar--narrow" ng-hide="(!ctrl.hasFilters && ctrl.sections.length === 0) || !ctrl.hasFilters">
<div class="search-results-filter-row"> <div class="gf-form-inline">
<gf-form-switch <div class="gf-form" ng-show="ctrl.query.tag.length > 0">
on-change="ctrl.onSelectAllChanged()" <label class="gf-form-label width-4">
checked="ctrl.selectAllChecked" Tags
switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox" </label>
/> <div class="gf-form-input gf-form-input--plaintext" ng-show="ctrl.query.tag.length > 0">
<div class="search-results-filter-row__filters"> <span ng-repeat="tagName in ctrl.query.tag">
<select <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="tag label label-tag">
class="search-results-filter-row__filters-item gf-form-input" <i class="fa fa-remove"></i>&nbsp;{{tagName}}
ng-model="ctrl.selectedStarredFilter" </a>
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions" </span>
ng-change="ctrl.onStarredFilterChange()" </div>
ng-show="!(ctrl.canMove || ctrl.canDelete)" </div>
/> <div class="gf-form" ng-show="ctrl.query.starred">
<select <label class="gf-form-label">
class="search-results-filter-row__filters-item gf-form-input" <a class="pointer" ng-click="ctrl.removeStarred()">
ng-model="ctrl.selectedTagFilter" <i class="fa fa-fw fa-check"></i> Starred
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions" </a>
ng-change="ctrl.onTagFilterChange()" </label>
ng-show="!(ctrl.canMove || ctrl.canDelete)" </div>
/> <div class="gf-form">
<div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete"> <label class="gf-form-label">
<button type="button" <a class="pointer" ng-click="ctrl.clearFilters()">
class="btn gf-form-button btn-inverse" <i class="fa fa-remove"></i>&nbsp;Clear current search query and filters
ng-disabled="!ctrl.canMove" </a>
ng-click="ctrl.moveTo()" </label>
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> </div>
</div> </div>
<div class="search-results-container">
<dashboard-search-results <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
results="ctrl.sections" <em class="muted">
editable="true" No dashboards matching your query were found.
on-selection-changed="ctrl.selectionChanged()" </em>
on-tag-selected="ctrl.filterByTag($tag)" /> </div>
<div class="search-results" ng-show="ctrl.sections.length > 0">
<div class="search-results-filter-row">
<gf-form-switch
on-change="ctrl.onSelectAllChanged()"
checked="ctrl.selectAllChecked"
switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
/>
<div class="search-results-filter-row__filters">
<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()"
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()"
ng-show="!(ctrl.canMove || ctrl.canDelete)"
/>
<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>
<div class="search-results-container">
<dashboard-search-results
results="ctrl.sections"
editable="true"
on-selection-changed="ctrl.selectionChanged()"
on-tag-selected="ctrl.filterByTag($tag)" />
</div>
</div> </div>
</div> </div>

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

@@ -231,8 +231,14 @@ export class ManageDashboardsCtrl {
} }
} }
removeStarred() {
this.query.starred = false;
return this.getDashboards();
}
onStarredFilterChange() { onStarredFilterChange() {
this.query.starred = this.selectedStarredFilter.text === 'Yes'; this.query.starred = this.selectedStarredFilter.text === 'Yes';
this.selectedStarredFilter = this.starredFilterOptions[0];
return this.getDashboards(); return this.getDashboards();
} }

4
public/sass/components/_dashboard_list.scss
View File

@@ -4,6 +4,10 @@
} }
} }
.search-results {
margin-top: 2rem;
}
.search-results-filter-row { .search-results-filter-row {
height: 35px; height: 35px;
display: flex; display: flex;

4
public/sass/components/_gf-form.scss
View File

@@ -221,6 +221,10 @@ $input-border: 1px solid $input-border-color;
padding-bottom: 4px; padding-bottom: 4px;
font-size: $font-size-sm; font-size: $font-size-sm;
} }
&--plaintext {
white-space: unset;
}
} }
.gf-form-hint { .gf-form-hint {

4
public/sass/layout/_page.scss
View File

@@ -55,6 +55,10 @@
} }
} }
.page-action-bar--narrow {
margin-bottom: 0;
}
.page-action-bar__spacer { .page-action-bar__spacer {
width: $spacer * 2; width: $spacer * 2;
flex-grow: 1; flex-grow: 1;