IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

dashboard: Dashboard folder page wip #10083

Browse Source
This commit is contained in:
Marcus Efraimsson 2017-12-06 14:11:25 +01:00
parent 5894b8f4e0
commit dd3c9da009
9 changed files with 120 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/components/search/search_results.html
View File

@ -5,14 +5,18 @@
ng-show="ctrl.editable"
on-change="ctrl.selectionChanged($event)"
checked="section.checked"
switch-class="gf-form-switch--search-result__section">
switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
</gf-form-switch>
</div>
<i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span>
<div ng-show="ctrl.editable && section.id > 0 && section.expanded" ng-click="ctrl.navigateToFolder(section, $event)">
<i class="fa fa-cog search-section__header__toggle"></i>&nbsp;
</div>
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
</a>
<div class="search-section__header" ng-show="section.hideHeader"></div>
<div ng-if="section.expanded">
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
@ -21,7 +25,7 @@
ng-show="ctrl.editable"
on-change="ctrl.selectionChanged()"
checked="item.checked"
switch-class="gf-form-switch--search-result__item">
switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
</gf-form-switch>
</div>
<span class="search-item__icon">

14
public/app/core/components/search/search_results.ts
View File

@ -6,12 +6,26 @@ export class SearchResultsCtrl {
onSelectionChanged: any;
onTagSelected: any;
/** @ngInject */
constructor(private $location) {
}
toggleFolderExpand(section) {
if (section.toggle) {
section.toggle(section);
}
}
navigateToFolder(section, evt) {
this.$location.path('/dashboards/folder/' + section.id + '/' + section.uri);
if (evt) {
evt.stopPropagation();
evt.preventDefault();
}
}
toggleSelection(item, evt) {
item.checked = !item.checked;

5
public/app/core/routes/routes.ts
View File

@ -73,6 +73,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
controller : 'DashboardListCtrl',
controllerAs: 'ctrl',
})
.when('/dashboards/folder/:folderId/:type/:slug', {
templateUrl: 'public/app/features/dashboard/partials/dashboardList.html',
controller : 'DashboardListCtrl',
controllerAs: 'ctrl',
})
.when('/org', {
templateUrl: 'public/app/features/org/partials/orgDetails.html',
controller : 'OrgDetailsCtrl',

4
public/app/core/services/search_srv.ts
View File

@ -154,12 +154,12 @@ export class SearchSrv {
}
search(options) {
if (!options.query && (!options.tag || options.tag.length === 0) && !options.starred) {
if (!options.folderIds && !options.query && (!options.tag || options.tag.length === 0) && !options.starred) {
return this.browse(options);
}
let query = _.clone(options);
query.folderIds = [];
query.folderIds = options.folderIds || [];
query.type = 'dash-db';
return this.backendSrv.search(query).then(results => {

21
public/app/features/dashboard/dashboard_list_ctrl.ts
View File

@ -14,16 +14,29 @@ export class DashboardListCtrl {
selectAllChecked = false;
starredFilterOptions = [{text: 'Filter by Starred', disabled: true}, {text: 'Yes'}, {text: 'No'}];
selectedStarredFilter: any;
folderTitle = null;
/** @ngInject */
constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) {
constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv, private $routeParams) {
this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
this.query = {query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true};
this.selectedStarredFilter = this.starredFilterOptions[0];
this.getDashboards().then(() => {
this.getTags();
});
if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) {
backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => {
this.folderTitle = result.dashboard.title;
this.query.folderIds = [result.dashboard.id];
this.getDashboards().then(() => {
this.getTags();
});
});
} else {
this.getDashboards().then(() => {
this.getTags();
});
}
}
getDashboards() {

61
public/app/features/dashboard/partials/dashboardList.html
View File

@ -1,17 +1,35 @@
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<div class="page-action-bar" ng-show="ctrl.folderTitle">
<div class="gf-form gf-form--grow">
<h3 class="page-sub-heading">
<i class="fa fa-folder-open"></i>&nbsp;{{ctrl.folderTitle}}
</h3>
</div>
<div class="page-action-bar__spacer"></div>
<button class="btn btn-inverse" disabled>Permissions</button>
<a class="btn btn-success" href="/dashboard/new">
<i class="fa fa-plus"></i>
Dashboard
</a>
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
<i class="fa fa-plus"></i>
Folder
</a>
</div>
<div class="page-action-bar">
<div class="gf-form gf-form--grow">
<label class="gf-form-label">Search</label>
<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()" />
</div>
<div class="page-action-bar__spacer"></div>
<a class="btn btn-success" href="/dashboard/new">
<a class="btn btn-success" href="/dashboard/new" ng-hide="ctrl.folderTitle">
<i class="fa fa-plus"></i>
Dashboard
</a>
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder" ng-hide="ctrl.folderTitle">
<i class="fa fa-plus"></i>
Folder
</a>
@ -39,29 +57,12 @@
</div>
</div>
<div class="gf-form-group">
<div class="gf-form-button-row">
<button type="button"
class="btn gf-form-button btn-secondary"
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 to...
</button>
<button type="button"
class="btn gf-form-button btn-inverse"
ng-click="ctrl.delete()"
ng-disabled="!ctrl.canDelete">
<i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
</button>
</div>
</div>
<div class="dashboard-list">
<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
@ -69,17 +70,35 @@
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">
<h6 ng-show="ctrl.sections.length === 0">No dashboards matching your query were found.</h6>
<h6 ng-show="ctrl.sections.length === 0">No dashboards matching your query were found.</h6>
<dashboard-search-results
results="ctrl.sections"
editable="true"

2
public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts
View File

@ -545,5 +545,5 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) {
}
};
return new DashboardListCtrl({}, { getNav: () => { } }, q, <SearchSrv>searchSrvStub);
return new DashboardListCtrl({}, { getNav: () => { } }, q, <SearchSrv>searchSrvStub, {});
}

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

@ -1,20 +1,25 @@
.dashboard-list {
height: 75%;
.search-results-container {
padding-left: 0;
padding-right: 0;
padding: 5px 0 0 0;
}
}
.search-results-filter-row {
height: 35px;
display: flex;
justify-content: space-between;
.gf-form-button-row {
padding-top: 0;
button:last-child {
margin-right: 0;
}
}
}
.search-results-filter-row__filters {
display: flex;
width: 300px;
}
.search-results-filter-row__filters-item {

72
public/sass/components/_switch.scss
View File

@ -102,12 +102,23 @@ $switch-height: 1.5rem;
}
}
.gf-form-switch--search-result__section, .gf-form-switch--search-result__item {
min-width: 2.6rem;
.gf-form-switch--transparent {
input + label {
background-color: inherit;
height: 1.7rem;
background: transparent;
}
input + label::before, input + label::after {
background: transparent;
}
&:hover {
input + label::before {
background: transparent;
}
input + label::after {
background: transparent;
}
}
}
@ -115,57 +126,24 @@ $switch-height: 1.5rem;
min-width: 3.3rem;
margin-right: -0.3rem;
&:hover {
input + label::before {
@include buttonBackground($panel-bg, $panel-bg);
}
input + label::after {
@include buttonBackground($panel-bg, $panel-bg, lighten($orange, 10%));
}
}
input + label::before, input + label::after {
@include buttonBackground($panel-bg, $panel-bg);
}
input + label::before {
color: $gray-2
}
input + label::after {
color: $orange
input + label {
height: 1.7rem;
}
}
.gf-form-switch--search-result__item {
min-width: 2.6rem;
input + label {
height: 2.7rem;
}
}
.gf-form-switch--search-result-filter-row__checkbox {
min-width: 4.7rem;
&:hover {
input + label::before {
@include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
}
input + label::after {
@include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
color: lighten($orange, 10%);
}
}
input + label::before, input + label::after {
@include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
}
input + label::before {
color: $gray-2
}
input + label::after {
color: $orange
input + label {
height: 2.5rem;
}
}