diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts index 25a69b1f5e4..3f6dacd311d 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.ts +++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts @@ -1,7 +1,30 @@ +// @ts-ignore import _ from 'lodash'; import coreModule from 'app/core/core_module'; import appEvents from 'app/core/app_events'; import { SearchSrv } from 'app/core/services/search_srv'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { NavModelSrv } from 'app/core/nav_model_srv'; +import { ContextSrv } from 'app/core/services/context_srv'; + +export interface Section { + id: number; + uid: string; + title: string; + expanded: false; + items: any[]; + url: string; + icon: string; + score: number; + checked: boolean; + hideHeader: boolean; + toggle: Function; +} + +export interface FoldersAndDashboardUids { + folderUids: string[]; + dashboardUids: string[]; +} class Query { query: string; @@ -14,7 +37,7 @@ class Query { } export class ManageDashboardsCtrl { - sections: any[]; + sections: Section[]; query: Query; navModel: any; @@ -45,7 +68,12 @@ export class ManageDashboardsCtrl { hasEditPermissionInFolders: boolean; /** @ngInject */ - constructor(private backendSrv, navModelSrv, private searchSrv: SearchSrv, private contextSrv) { + constructor( + private backendSrv: BackendSrv, + navModelSrv: NavModelSrv, + private searchSrv: SearchSrv, + private contextSrv: ContextSrv + ) { this.isEditor = this.contextSrv.isEditor; this.hasEditPermissionInFolders = this.contextSrv.hasEditPermissionInFolders; @@ -73,7 +101,7 @@ export class ManageDashboardsCtrl { refreshList() { return this.searchSrv .search(this.query) - .then(result => { + .then((result: Section[]) => { return this.initDashboardList(result); }) .then(() => { @@ -81,7 +109,7 @@ export class ManageDashboardsCtrl { return; } - return this.backendSrv.getFolderByUid(this.folderUid).then(folder => { + return this.backendSrv.getFolderByUid(this.folderUid).then((folder: any) => { this.canSave = folder.canSave; if (!this.canSave) { this.hasEditPermissionInFolders = false; @@ -90,7 +118,7 @@ export class ManageDashboardsCtrl { }); } - initDashboardList(result: any) { + initDashboardList(result: Section[]) { this.canMove = false; this.canDelete = false; this.selectAllChecked = false; @@ -128,25 +156,25 @@ export class ManageDashboardsCtrl { this.canDelete = selectedDashboards > 0 || selectedFolders > 0; } - getFoldersAndDashboardsToDelete() { - const selectedDashboards = { - folders: [], - dashboards: [], + getFoldersAndDashboardsToDelete(): FoldersAndDashboardUids { + const selectedDashboards: FoldersAndDashboardUids = { + folderUids: [], + dashboardUids: [], }; for (const section of this.sections) { if (section.checked && section.id !== 0) { - selectedDashboards.folders.push(section.uid); + selectedDashboards.folderUids.push(section.uid); } else { const selected = _.filter(section.items, { checked: true }); - selectedDashboards.dashboards.push(..._.map(selected, 'uid')); + selectedDashboards.dashboardUids.push(..._.map(selected, 'uid')); } } return selectedDashboards; } - getFolderIds(sections) { + getFolderIds(sections: Section[]) { const ids = []; for (const s of sections) { if (s.checked) { @@ -158,8 +186,8 @@ export class ManageDashboardsCtrl { delete() { const data = this.getFoldersAndDashboardsToDelete(); - const folderCount = data.folders.length; - const dashCount = data.dashboards.length; + const folderCount = data.folderUids.length; + const dashCount = data.dashboardUids.length; let text = 'Do you want to delete the '; let text2; @@ -179,12 +207,12 @@ export class ManageDashboardsCtrl { icon: 'fa-trash', yesText: 'Delete', onConfirm: () => { - this.deleteFoldersAndDashboards(data.folders, data.dashboards); + this.deleteFoldersAndDashboards(data.folderUids, data.dashboardUids); }, }); } - private deleteFoldersAndDashboards(folderUids, dashboardUids) { + private deleteFoldersAndDashboards(folderUids: string[], dashboardUids: string[]) { this.backendSrv.deleteFoldersAndDashboards(folderUids, dashboardUids).then(() => { this.refreshList(); }); @@ -219,13 +247,13 @@ export class ManageDashboardsCtrl { } initTagFilter() { - return this.searchSrv.getDashboardTags().then(results => { + return this.searchSrv.getDashboardTags().then((results: any) => { this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results); this.selectedTagFilter = this.tagFilterOptions[0]; }); } - filterByTag(tag) { + filterByTag(tag: any) { if (_.indexOf(this.query.tag, tag) === -1) { this.query.tag.push(tag); } @@ -243,7 +271,7 @@ export class ManageDashboardsCtrl { return res; } - removeTag(tag, evt) { + removeTag(tag: any, evt: Event) { this.query.tag = _.without(this.query.tag, tag); this.refreshList(); if (evt) { @@ -269,7 +297,7 @@ export class ManageDashboardsCtrl { section.checked = this.selectAllChecked; } - section.items = _.map(section.items, item => { + section.items = _.map(section.items, (item: any) => { item.checked = this.selectAllChecked; return item; }); diff --git a/public/app/core/specs/manage_dashboards.test.ts b/public/app/core/specs/manage_dashboards.test.ts index 5af0ebade02..ef5e240fd36 100644 --- a/public/app/core/specs/manage_dashboards.test.ts +++ b/public/app/core/specs/manage_dashboards.test.ts @@ -1,12 +1,39 @@ -import { ManageDashboardsCtrl } from 'app/core/components/manage_dashboards/manage_dashboards'; -import { SearchSrv } from 'app/core/services/search_srv'; +// @ts-ignore import q from 'q'; +import { + ManageDashboardsCtrl, + Section, + FoldersAndDashboardUids, +} from 'app/core/components/manage_dashboards/manage_dashboards'; +import { SearchSrv } from 'app/core/services/search_srv'; +import { BackendSrv } from '../services/backend_srv'; +import { NavModelSrv } from '../nav_model_srv'; +import { ContextSrv } from '../services/context_srv'; + +const mockSection = (overides?: object): Section => { + const defaultSection: Section = { + id: 0, + items: [], + checked: false, + expanded: false, + hideHeader: false, + icon: '', + score: 0, + title: 'Some Section', + toggle: jest.fn(), + uid: 'someuid', + url: '/some/url/', + }; + + return { ...defaultSection, ...overides }; +}; describe('ManageDashboards', () => { - let ctrl; + let ctrl: ManageDashboardsCtrl; describe('when browsing dashboards', () => { beforeEach(() => { + const tags: any[] = []; const response = [ { id: 410, @@ -18,11 +45,11 @@ describe('ManageDashboards', () => { title: 'Dashboard Test', url: 'dashboard/db/dashboard-test', icon: 'fa fa-folder', - tags: [], + tags, isStarred: false, }, ], - tags: [], + tags, isStarred: false, }, { @@ -37,11 +64,11 @@ describe('ManageDashboards', () => { title: 'Dashboard Test', url: 'dashboard/db/dashboard-test', icon: 'fa fa-folder', - tags: [], + tags, isStarred: false, }, ], - tags: [], + tags, isStarred: false, }, ]; @@ -61,6 +88,7 @@ describe('ManageDashboards', () => { describe('when browsing dashboards for a folder', () => { beforeEach(() => { + const tags: any[] = []; const response = [ { id: 410, @@ -72,11 +100,11 @@ describe('ManageDashboards', () => { title: 'Dashboard Test', url: 'dashboard/db/dashboard-test', icon: 'fa fa-folder', - tags: [], + tags, isStarred: false, }, ], - tags: [], + tags, isStarred: false, }, ]; @@ -92,6 +120,7 @@ describe('ManageDashboards', () => { describe('when searching dashboards', () => { beforeEach(() => { + const tags: any[] = []; const response = [ { checked: false, @@ -103,7 +132,7 @@ describe('ManageDashboards', () => { title: 'Dashboard Test', url: 'dashboard/db/dashboard-test', icon: 'fa fa-folder', - tags: [], + tags, isStarred: false, folderId: 410, folderUid: 'uid', @@ -115,7 +144,7 @@ describe('ManageDashboards', () => { title: 'Dashboard Test', url: 'dashboard/db/dashboard-test', icon: 'fa fa-folder', - tags: [], + tags, folderId: 499, isStarred: false, }, @@ -245,7 +274,7 @@ describe('ManageDashboards', () => { }); describe('when selecting dashboards', () => { - let ctrl; + let ctrl: ManageDashboardsCtrl; beforeEach(() => { ctrl = createCtrlWithStubs([]); @@ -254,16 +283,16 @@ describe('ManageDashboards', () => { describe('and no dashboards are selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, items: [{ id: 2, checked: false }], checked: false, - }, - { + }), + mockSection({ id: 0, items: [{ id: 3, checked: false }], checked: false, - }, + }), ]; ctrl.selectionChanged(); }); @@ -302,16 +331,16 @@ describe('ManageDashboards', () => { describe('and all folders and dashboards are selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, items: [{ id: 2, checked: true }], checked: true, - }, - { + }), + mockSection({ id: 0, items: [{ id: 3, checked: true }], checked: true, - }, + }), ]; ctrl.selectionChanged(); }); @@ -350,18 +379,18 @@ describe('ManageDashboards', () => { describe('and one dashboard in root is selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, title: 'folder', items: [{ id: 2, checked: false }], checked: false, - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: true }], checked: false, - }, + }), ]; ctrl.selectionChanged(); }); @@ -378,18 +407,18 @@ describe('ManageDashboards', () => { describe('and one child dashboard is selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, title: 'folder', items: [{ id: 2, checked: true }], checked: false, - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: false }], checked: false, - }, + }), ]; ctrl.selectionChanged(); @@ -407,18 +436,18 @@ describe('ManageDashboards', () => { describe('and one child dashboard and one dashboard is selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, title: 'folder', items: [{ id: 2, checked: true }], checked: false, - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: true }], checked: false, - }, + }), ]; ctrl.selectionChanged(); @@ -436,24 +465,24 @@ describe('ManageDashboards', () => { describe('and one child dashboard and one folder is selected', () => { beforeEach(() => { ctrl.sections = [ - { + mockSection({ id: 1, title: 'folder', items: [{ id: 2, checked: false }], checked: true, - }, - { + }), + mockSection({ id: 3, title: 'folder', items: [{ id: 4, checked: true }], checked: false, - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: false }], checked: false, - }, + }), ]; ctrl.selectionChanged(); @@ -470,55 +499,55 @@ describe('ManageDashboards', () => { }); describe('when deleting dashboards', () => { - let toBeDeleted: any; + let toBeDeleted: FoldersAndDashboardUids; beforeEach(() => { ctrl = createCtrlWithStubs([]); ctrl.sections = [ - { + mockSection({ id: 1, uid: 'folder', title: 'folder', items: [{ id: 2, checked: true, uid: 'folder-dash' }], checked: true, - }, - { + }), + mockSection({ id: 3, title: 'folder-2', items: [{ id: 3, checked: true, uid: 'folder-2-dash' }], checked: false, uid: 'folder-2', - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: true, uid: 'root-dash' }], checked: true, - }, + }), ]; toBeDeleted = ctrl.getFoldersAndDashboardsToDelete(); }); it('should return 1 folder', () => { - expect(toBeDeleted.folders.length).toEqual(1); + expect(toBeDeleted.folderUids.length).toEqual(1); }); it('should return 2 dashboards', () => { - expect(toBeDeleted.dashboards.length).toEqual(2); + expect(toBeDeleted.dashboardUids.length).toEqual(2); }); it('should filter out children if parent is checked', () => { - expect(toBeDeleted.folders[0]).toEqual('folder'); + expect(toBeDeleted.folderUids[0]).toEqual('folder'); }); it('should not filter out children if parent not is checked', () => { - expect(toBeDeleted.dashboards[0]).toEqual('folder-2-dash'); + expect(toBeDeleted.dashboardUids[0]).toEqual('folder-2-dash'); }); it('should not filter out children if parent is checked and root', () => { - expect(toBeDeleted.dashboards[1]).toEqual('root-dash'); + expect(toBeDeleted.dashboardUids[1]).toEqual('root-dash'); }); }); @@ -527,19 +556,19 @@ describe('ManageDashboards', () => { ctrl = createCtrlWithStubs([]); ctrl.sections = [ - { + mockSection({ id: 1, title: 'folder', items: [{ id: 2, checked: true, uid: 'dash' }], checked: false, uid: 'folder', - }, - { + }), + mockSection({ id: 0, title: 'General', items: [{ id: 3, checked: true, uid: 'dash-2' }], checked: false, - }, + }), ]; }); @@ -562,5 +591,10 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) { }, }; - return new ManageDashboardsCtrl({}, { getNav: () => {} }, searchSrvStub as SearchSrv, { isEditor: true }); + return new ManageDashboardsCtrl( + {} as BackendSrv, + { getNav: () => {} } as NavModelSrv, + searchSrvStub as SearchSrv, + { isEditor: true } as ContextSrv + ); }