mirror of https://github.com/grafana/grafana
Daniel Lee
8 years ago
parent
7559982b05
commit
7f3293ce80
@ -1,32 +0,0 @@ |
|||||||
define([ |
|
||||||
'./dashboard_ctrl', |
|
||||||
'./alerting_srv', |
|
||||||
'./history/history', |
|
||||||
'./dashboardLoaderSrv', |
|
||||||
'./dashnav/dashnav', |
|
||||||
'./submenu/submenu', |
|
||||||
'./save_as_modal', |
|
||||||
'./save_modal', |
|
||||||
'./shareModalCtrl', |
|
||||||
'./shareSnapshotCtrl', |
|
||||||
'./dashboard_srv', |
|
||||||
'./viewStateSrv', |
|
||||||
'./time_srv', |
|
||||||
'./unsavedChangesSrv', |
|
||||||
'./unsaved_changes_modal', |
|
||||||
'./timepicker/timepicker', |
|
||||||
'./impression_store', |
|
||||||
'./upload', |
|
||||||
'./import/dash_import', |
|
||||||
'./export/export_modal', |
|
||||||
'./export_data/export_data_modal', |
|
||||||
'./ad_hoc_filters', |
|
||||||
'./repeat_option/repeat_option', |
|
||||||
'./dashgrid/DashboardGrid', |
|
||||||
'./dashgrid/PanelLoader', |
|
||||||
'./dashgrid/RowOptions', |
|
||||||
'./acl/acl', |
|
||||||
'./acl/acl', |
|
||||||
'./folder_picker/picker', |
|
||||||
'./folder_modal/folder' |
|
||||||
], function () {}); |
|
||||||
@ -0,0 +1,36 @@ |
|||||||
|
|
||||||
|
import './dashboard_ctrl'; |
||||||
|
import './alerting_srv'; |
||||||
|
import './history/history'; |
||||||
|
import './dashboardLoaderSrv'; |
||||||
|
import './dashnav/dashnav'; |
||||||
|
import './submenu/submenu'; |
||||||
|
import './save_as_modal'; |
||||||
|
import './save_modal'; |
||||||
|
import './shareModalCtrl'; |
||||||
|
import './shareSnapshotCtrl'; |
||||||
|
import './dashboard_srv'; |
||||||
|
import './viewStateSrv'; |
||||||
|
import './time_srv'; |
||||||
|
import './unsavedChangesSrv'; |
||||||
|
import './unsaved_changes_modal'; |
||||||
|
import './timepicker/timepicker'; |
||||||
|
import './impression_store'; |
||||||
|
import './upload'; |
||||||
|
import './import/dash_import'; |
||||||
|
import './export/export_modal'; |
||||||
|
import './export_data/export_data_modal'; |
||||||
|
import './ad_hoc_filters'; |
||||||
|
import './repeat_option/repeat_option'; |
||||||
|
import './dashgrid/DashboardGrid'; |
||||||
|
import './dashgrid/PanelLoader'; |
||||||
|
import './dashgrid/RowOptions'; |
||||||
|
import './acl/acl'; |
||||||
|
import './folder_picker/picker'; |
||||||
|
import './folder_modal/folder'; |
||||||
|
import './move_to_folder_modal/move_to_folder'; |
||||||
|
import coreModule from 'app/core/core_module'; |
||||||
|
|
||||||
|
import {DashboardListCtrl} from './dashboard_list_ctrl'; |
||||||
|
|
||||||
|
coreModule.controller('DashboardListCtrl', DashboardListCtrl); |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
import _ from 'lodash'; |
||||||
|
import appEvents from 'app/core/app_events'; |
||||||
|
|
||||||
|
export class DashboardListCtrl { |
||||||
|
public dashboards: any []; |
||||||
|
query: any; |
||||||
|
navModel: any; |
||||||
|
canDelete = false; |
||||||
|
canMove = false; |
||||||
|
|
||||||
|
/** @ngInject */ |
||||||
|
constructor(private backendSrv, navModelSrv, private $q) { |
||||||
|
this.navModel = navModelSrv.getNav('cfg', 'dashboards'); |
||||||
|
this.query = ''; |
||||||
|
this.getDashboards(); |
||||||
|
} |
||||||
|
|
||||||
|
getDashboards() { |
||||||
|
return this.backendSrv.get(`/api/search?query=${this.query}&mode=tree`).then((result) => { |
||||||
|
|
||||||
|
this.dashboards = this.groupDashboardsInFolders(result); |
||||||
|
|
||||||
|
for (let dash of this.dashboards) { |
||||||
|
dash.checked = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
groupDashboardsInFolders(results) { |
||||||
|
let byId = _.groupBy(results, 'id'); |
||||||
|
let byFolderId = _.groupBy(results, 'folderId'); |
||||||
|
let finalList = []; |
||||||
|
|
||||||
|
// add missing parent folders
|
||||||
|
_.each(results, (hit, index) => { |
||||||
|
if (hit.folderId && !byId[hit.folderId]) { |
||||||
|
const folder = { |
||||||
|
id: hit.folderId, |
||||||
|
uri: `db/${hit.folderSlug}`, |
||||||
|
title: hit.folderTitle, |
||||||
|
type: 'dash-folder' |
||||||
|
}; |
||||||
|
byId[hit.folderId] = folder; |
||||||
|
results.splice(index, 0, folder); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// group by folder
|
||||||
|
for (let hit of results) { |
||||||
|
if (hit.folderId) { |
||||||
|
hit.type = "dash-child"; |
||||||
|
} else { |
||||||
|
finalList.push(hit); |
||||||
|
} |
||||||
|
|
||||||
|
hit.url = 'dashboard/' + hit.uri; |
||||||
|
|
||||||
|
if (hit.type === 'dash-folder') { |
||||||
|
if (!byFolderId[hit.id]) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
for (let child of byFolderId[hit.id]) { |
||||||
|
finalList.push(child); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return finalList; |
||||||
|
} |
||||||
|
|
||||||
|
selectionChanged() { |
||||||
|
const selected = _.filter(this.dashboards, {checked: true}).length; |
||||||
|
this.canDelete = selected > 0; |
||||||
|
|
||||||
|
const selectedDashboards = _.filter(this.dashboards, (o) => { |
||||||
|
return o.checked && (o.type === 'dash-db' || o.type === 'dash-child'); |
||||||
|
}).length; |
||||||
|
|
||||||
|
const selectedFolders = _.filter(this.dashboards, {checked: true, type: 'dash-folder'}).length; |
||||||
|
this.canMove = selectedDashboards > 0 && selectedFolders === 0; |
||||||
|
} |
||||||
|
|
||||||
|
delete() { |
||||||
|
const selectedDashboards = _.filter(this.dashboards, {checked: true}); |
||||||
|
|
||||||
|
appEvents.emit('confirm-modal', { |
||||||
|
title: 'Delete', |
||||||
|
text: `Do you want to delete the ${selectedDashboards.length} selected dashboards?`, |
||||||
|
icon: 'fa-trash', |
||||||
|
yesText: 'Delete', |
||||||
|
onConfirm: () => { |
||||||
|
const promises = []; |
||||||
|
for (let dash of selectedDashboards) { |
||||||
|
promises.push(this.backendSrv.delete(`/api/dashboards/${dash.uri}`)); |
||||||
|
} |
||||||
|
|
||||||
|
this.$q.all(promises).then(() => { |
||||||
|
this.getDashboards(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
moveTo() { |
||||||
|
const selectedDashboards = _.filter(this.dashboards, {checked: true}); |
||||||
|
|
||||||
|
const template = '<move-to-folder-modal dismiss="dismiss()" ' + |
||||||
|
'dashboards="model.dashboards" after-save="model.afterSave()">' + |
||||||
|
'</move-to-folder-modal>`'; |
||||||
|
appEvents.emit('show-modal', { |
||||||
|
templateHtml: template, |
||||||
|
modalClass: 'modal--narrow', |
||||||
|
model: {dashboards: selectedDashboards, afterSave: this.getDashboards.bind(this)} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
<div class="modal-body"> |
||||||
|
<div class="modal-header"> |
||||||
|
<h2 class="modal-header-title"> |
||||||
|
<i class="gicon gicon-folder-new"></i> |
||||||
|
<span class="p-l-1">Choose Dashboard Folder</span> |
||||||
|
</h2> |
||||||
|
|
||||||
|
<a class="modal-header-close" ng-click="ctrl.dismiss();"> |
||||||
|
<i class="fa fa-remove"></i> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form name="ctrl.saveForm" ng-submit="ctrl.save()" class="modal-content folder-modal" novalidate> |
||||||
|
<p>Move the {{ctrl.dashboards.length}} selected dashboards to the following folder:</p> |
||||||
|
|
||||||
|
<div class="p-t-2"> |
||||||
|
<div class="gf-form"> |
||||||
|
<folder-picker initial-title="Choose" |
||||||
|
on-change="ctrl.onFolderChange($folder)" |
||||||
|
label-class="width-7"> |
||||||
|
</folder-picker> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gf-form-button-row text-center"> |
||||||
|
<button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid">Move</button> |
||||||
|
<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import coreModule from 'app/core/core_module'; |
||||||
|
import appEvents from 'app/core/app_events'; |
||||||
|
import {DashboardModel} from '../dashboard_model'; |
||||||
|
|
||||||
|
export class MoveToFolderCtrl { |
||||||
|
dashboards: any; |
||||||
|
folder: any; |
||||||
|
dismiss: any; |
||||||
|
afterSave: any; |
||||||
|
|
||||||
|
/** @ngInject */ |
||||||
|
constructor(private backendSrv, private $q) {} |
||||||
|
|
||||||
|
onFolderChange(folder) { |
||||||
|
this.folder = folder; |
||||||
|
} |
||||||
|
|
||||||
|
save() { |
||||||
|
const promises = []; |
||||||
|
for (let dash of this.dashboards) { |
||||||
|
const promise = this.backendSrv.get('/api/dashboards/' + dash.uri).then(fullDash => { |
||||||
|
const model = new DashboardModel(fullDash.dashboard, fullDash.meta); |
||||||
|
model.folderId = this.folder.id; |
||||||
|
model.meta.folderId = this.folder.id; |
||||||
|
model.meta.folderTitle = this.folder.title; |
||||||
|
const clone = model.getSaveModelClone(); |
||||||
|
return this.backendSrv.saveDashboard(clone); |
||||||
|
}); |
||||||
|
|
||||||
|
promises.push(promise); |
||||||
|
} |
||||||
|
|
||||||
|
return this.$q.all(promises).then(() => { |
||||||
|
appEvents.emit('alert-success', ['Dashboards Moved', 'OK']); |
||||||
|
this.dismiss(); |
||||||
|
|
||||||
|
return this.afterSave(); |
||||||
|
}).then(() => { |
||||||
|
console.log('afterSave'); |
||||||
|
}).catch(err => { |
||||||
|
appEvents.emit('alert-error', [err.message]); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function moveToFolderModal() { |
||||||
|
return { |
||||||
|
restrict: 'E', |
||||||
|
templateUrl: 'public/app/features/dashboard/move_to_folder_modal/move_to_folder.html', |
||||||
|
controller: MoveToFolderCtrl, |
||||||
|
bindToController: true, |
||||||
|
controllerAs: 'ctrl', |
||||||
|
scope: { |
||||||
|
dismiss: "&", |
||||||
|
dashboards: "=", |
||||||
|
afterSave: "&" |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
coreModule.directive('moveToFolderModal', moveToFolderModal); |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
<div class="scroll-canvas"> |
||||||
|
<div gemini-scrollbar> |
||||||
|
<navbar model="ctrl.navModel"></navbar> |
||||||
|
<div class="page-container" style="height: 95%"> |
||||||
|
<div class="page-header"> |
||||||
|
<h1>Dashboards</h1> |
||||||
|
|
||||||
|
<a class="btn btn-success" href="/dashboard/new"> |
||||||
|
<i class="fa fa-plus"></i> |
||||||
|
Create Dashboard |
||||||
|
</a> |
||||||
|
<a class="btn btn-success" href="/dashboard/new/?editview=new-folder"> |
||||||
|
<i class="fa fa-plus"></i> |
||||||
|
Create Folder |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="gf-form width-15 gf-form-group"> |
||||||
|
<span style="position: relative;"> |
||||||
|
<input type="text" class="gf-form-input" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" |
||||||
|
ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getDashboards()" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="gf-form-group" ng-if="ctrl.dashboards.length > 1"> |
||||||
|
<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> 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> Delete |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="admin-list-table" style="height: 80%"> |
||||||
|
<div gemini-scrollbar> |
||||||
|
<table class="filter-table form-inline" ng-show="ctrl.dashboards.length > 0"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th class="width-4"></th> |
||||||
|
<th></th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr bindonce ng-repeat="dashboard in ctrl.dashboards"> |
||||||
|
<td class="filter-table__switch-cell" bs-tooltip="" data-placement="right"> |
||||||
|
<gf-form-switch |
||||||
|
switch-class="gf-form-switch--table-cell" |
||||||
|
on-change="ctrl.selectionChanged()" |
||||||
|
checked="dashboard.checked"> |
||||||
|
</gf-form-switch> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<a class="search-item pointer search-item--{{dashboard.type}}" |
||||||
|
bo-href-i="{{dashboard.url}}"> |
||||||
|
<span class="search-result-tags"> |
||||||
|
<span ng-click="ctrl.filterByTag(tag, $event)" bindonce ng-repeat="tag in dashboard.tags" tag-color-from-name="tag" class="label label-tag"> |
||||||
|
{{tag}} |
||||||
|
</span> |
||||||
|
<i class="fa" bo-class="{'fa-star': dashboard.isStarred, 'fa-star-o': !dashboard.isStarred}"></i> |
||||||
|
</span> |
||||||
|
<span class="search-result-link"> |
||||||
|
<i class="fa search-result-icon"></i> |
||||||
|
<span bo-text="dashboard.title"></span> |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<em class="muted" ng-hide="ctrl.dashboards.length > 0"> |
||||||
|
No Dashboards or Folders found. |
||||||
|
</em> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
@ -0,0 +1,174 @@ |
|||||||
|
import {DashboardListCtrl} from '../dashboard_list_ctrl'; |
||||||
|
import q from 'q'; |
||||||
|
|
||||||
|
describe('DashboardListCtrl', () => { |
||||||
|
describe('when fetching dashboards', () => { |
||||||
|
let ctrl; |
||||||
|
|
||||||
|
describe('and dashboard has parent that is not in search result', () => { |
||||||
|
beforeEach(() => { |
||||||
|
const response = [ |
||||||
|
{ |
||||||
|
id: 399, |
||||||
|
title: "Dashboard Test", |
||||||
|
uri: "db/dashboard-test", |
||||||
|
type: "dash-db", |
||||||
|
tags: [], |
||||||
|
isStarred: false, |
||||||
|
folderId: 410, |
||||||
|
folderTitle: "afolder", |
||||||
|
folderSlug: "afolder" |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
ctrl = new DashboardListCtrl({get: () => q.resolve(response)}, {getNav: () => {}}, q); |
||||||
|
return ctrl.getDashboards(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should add the missing parent folder to the result', () => { |
||||||
|
expect(ctrl.dashboards.length).toEqual(2); |
||||||
|
expect(ctrl.dashboards[0].id).toEqual(410); |
||||||
|
expect(ctrl.dashboards[1].id).toEqual(399); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
const response = [ |
||||||
|
{ |
||||||
|
id: 410, |
||||||
|
title: "afolder", |
||||||
|
uri: "db/afolder", |
||||||
|
type: "dash-folder", |
||||||
|
tags: [], |
||||||
|
isStarred: false |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
title: "something else", |
||||||
|
uri: "db/something-else", |
||||||
|
type: "dash-db", |
||||||
|
tags: [], |
||||||
|
isStarred: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 399, |
||||||
|
title: "Dashboard Test", |
||||||
|
uri: "db/dashboard-test", |
||||||
|
type: "dash-db", |
||||||
|
tags: [], |
||||||
|
isStarred: false, |
||||||
|
folderId: 410, |
||||||
|
folderTitle: "afolder", |
||||||
|
folderSlug: "afolder" |
||||||
|
} |
||||||
|
]; |
||||||
|
ctrl = new DashboardListCtrl({get: () => q.resolve(response)}, {getNav: () => {}}, null); |
||||||
|
return ctrl.getDashboards(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should group them in folders', () => { |
||||||
|
expect(ctrl.dashboards.length).toEqual(3); |
||||||
|
expect(ctrl.dashboards[0].id).toEqual(410); |
||||||
|
expect(ctrl.dashboards[1].id).toEqual(399); |
||||||
|
expect(ctrl.dashboards[2].id).toEqual(3); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('when selecting dashboards', () => { |
||||||
|
let ctrl; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
ctrl = new DashboardListCtrl({get: () => q.resolve([])}, {getNav: () => {}}, null); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('and no dashboards are selected', () => { |
||||||
|
beforeEach(() => { |
||||||
|
ctrl.dashboards = [ |
||||||
|
{id: 1, type: 'dash-folder'}, |
||||||
|
{id: 2, type: 'dash-db'} |
||||||
|
]; |
||||||
|
ctrl.selectionChanged(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should disable Move To button', () => { |
||||||
|
expect(ctrl.canMove).toBeFalsy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should disable delete button', () => { |
||||||
|
expect(ctrl.canDelete).toBeFalsy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('and one dashboard in root is selected', () => { |
||||||
|
beforeEach(() => { |
||||||
|
ctrl.dashboards = [ |
||||||
|
{id: 1, type: 'dash-folder'}, |
||||||
|
{id: 2, type: 'dash-db', checked: true} |
||||||
|
]; |
||||||
|
ctrl.selectionChanged(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable Move To button', () => { |
||||||
|
expect(ctrl.canMove).toBeTruthy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable delete button', () => { |
||||||
|
expect(ctrl.canDelete).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('and one child dashboard is selected', () => { |
||||||
|
beforeEach(() => { |
||||||
|
ctrl.dashboards = [ |
||||||
|
{id: 1, type: 'dash-folder'}, |
||||||
|
{id: 2, type: 'dash-child', checked: true} |
||||||
|
]; |
||||||
|
ctrl.selectionChanged(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable Move To button', () => { |
||||||
|
expect(ctrl.canMove).toBeTruthy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable delete button', () => { |
||||||
|
expect(ctrl.canDelete).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('and one child dashboard and one dashboard is selected', () => { |
||||||
|
beforeEach(() => { |
||||||
|
ctrl.dashboards = [ |
||||||
|
{id: 1, type: 'dash-folder'}, |
||||||
|
{id: 2, type: 'dash-child', checked: true} |
||||||
|
]; |
||||||
|
ctrl.selectionChanged(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable Move To button', () => { |
||||||
|
expect(ctrl.canMove).toBeTruthy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable delete button', () => { |
||||||
|
expect(ctrl.canDelete).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('and one child dashboard and one folder is selected', () => { |
||||||
|
beforeEach(() => { |
||||||
|
ctrl.dashboards = [ |
||||||
|
{id: 1, type: 'dash-folder', checked: true}, |
||||||
|
{id: 2, type: 'dash-child', checked: true} |
||||||
|
]; |
||||||
|
ctrl.selectionChanged(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should disable Move To button', () => { |
||||||
|
expect(ctrl.canMove).toBeFalsy(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should enable delete button', () => { |
||||||
|
expect(ctrl.canDelete).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue