From 8fd8853770d41667a6cc5eff21f3388dce2029c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Dec 2017 17:01:28 +0100 Subject: [PATCH] tech: progress on react pages --- .../ServerStats/ServerStats.jest.tsx | 22 ++++-- .../containers/ServerStats/ServerStats.tsx | 4 +- .../__snapshots__/ServerStats.jest.tsx.snap | 73 ++++++++++++++++++- .../app/core/components/sidemenu/sidemenu.ts | 6 +- public/app/stores/{NavStore => }/NavStore.ts | 36 ++------- public/app/stores/RootStore.ts | 2 +- public/app/stores/store.ts | 2 + public/test/mocks/common.ts | 14 ++++ 8 files changed, 115 insertions(+), 44 deletions(-) rename public/app/stores/{NavStore => }/NavStore.ts (56%) create mode 100644 public/test/mocks/common.ts diff --git a/public/app/containers/ServerStats/ServerStats.jest.tsx b/public/app/containers/ServerStats/ServerStats.jest.tsx index da30f24568a..07b938c4d0f 100644 --- a/public/app/containers/ServerStats/ServerStats.jest.tsx +++ b/public/app/containers/ServerStats/ServerStats.jest.tsx @@ -2,18 +2,24 @@ import React from 'react'; import renderer from 'react-test-renderer'; import { ServerStats } from './ServerStats'; import { RootStore } from 'app/stores/RootStore'; +import { backendSrv, createNavTree } from 'test/mocks/common'; describe('ServerStats', () => { it('Should render table with stats', done => { - let backendSrvMock = { - get: jest.fn().mockReturnValue( - Promise.resolve({ - dashboards: 10, - }) - ), - }; + backendSrv.get.mockReturnValue( + Promise.resolve({ + dashboards: 10, + }) + ); + + const store = RootStore.create( + {}, + { + backendSrv: backendSrv, + navTree: createNavTree('cfg', 'admin', 'server-stats'), + } + ); - const store = RootStore.create({}, { backendSrv: backendSrvMock }); const page = renderer.create(); setTimeout(() => { diff --git a/public/app/containers/ServerStats/ServerStats.tsx b/public/app/containers/ServerStats/ServerStats.tsx index c5fdbe8a2fd..9c846b0f813 100644 --- a/public/app/containers/ServerStats/ServerStats.tsx +++ b/public/app/containers/ServerStats/ServerStats.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import { NavModel, NavModelSrv } from 'app/core/nav_model_srv'; export interface IProps { store: any; @@ -13,8 +12,7 @@ export class ServerStats extends React.Component { constructor(props) { super(props); - // this.navModel = new NavModelSrv().getNav('cfg', 'admin', 'server-stats', 1); - this.props.store.nav.load('cfg', 'admin', 'server-stats'); + this.props.store.nav.load('cfg', 'admin', 'server-stats', 1); this.props.store.serverStats.load(); } diff --git a/public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap b/public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap index c36cc64e3a1..7e6f1d11c27 100644 --- a/public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap +++ b/public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap @@ -2,7 +2,78 @@ exports[`ServerStats Should render table with stats 1`] = `
- // +
+
+
+
+ + + + +
+

+ admin-Text +

+ +
+
+ +
+
+
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 0276a7331b3..fb9d9be7f70 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -16,8 +16,10 @@ export class SideMenuCtrl { constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) { this.isSignedIn = contextSrv.isSignedIn; this.user = contextSrv.user; - this.mainLinks = _.filter(config.bootData.navTree, item => !item.hideFromMenu); - this.bottomNav = _.filter(config.bootData.navTree, item => item.hideFromMenu); + + let navTree = _.cloneDeep(config.bootData.navTree); + this.mainLinks = _.filter(navTree, item => !item.hideFromMenu); + this.bottomNav = _.filter(navTree, item => item.hideFromMenu); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); if (contextSrv.user.orgCount > 1) { diff --git a/public/app/stores/NavStore/NavStore.ts b/public/app/stores/NavStore.ts similarity index 56% rename from public/app/stores/NavStore/NavStore.ts rename to public/app/stores/NavStore.ts index 375a8a27fc6..aab33cc40fc 100644 --- a/public/app/stores/NavStore/NavStore.ts +++ b/public/app/stores/NavStore.ts @@ -1,12 +1,11 @@ -import { types } from 'mobx-state-tree'; -import config from 'app/core/config'; +import { types, getEnv } from 'mobx-state-tree'; import _ from 'lodash'; export const NavItem = types.model('NavItem', { id: types.identifier(types.string), text: types.string, url: types.optional(types.string, ''), - description: types.optional(types.string, ''), + subTitle: types.optional(types.string, ''), icon: types.optional(types.string, ''), img: types.optional(types.string, ''), active: types.optional(types.boolean, false), @@ -17,26 +16,24 @@ export const NavStore = types .model('NavStore', { main: types.maybe(NavItem), node: types.maybe(NavItem), - breadcrumbs: types.optional(types.array(NavItem), []), }) .actions(self => ({ load(...args) { - var children = config.bootData.navTree; + var children = getEnv(self).navTree; let main, node; - let breadcrumbs = []; + let parents = []; for (let id of args) { // if its a number then it's the index to use for main if (_.isNumber(id)) { - main = breadcrumbs[id]; + main = parents[id]; break; } - let current = _.find(children, { id: id }); - breadcrumbs.push(current); + node = _.find(children, { id: id }); main = node; - node = current; children = node.children; + parents.push(node); } if (main.children) { @@ -51,24 +48,5 @@ export const NavStore = types self.main = NavItem.create(main); self.node = NavItem.create(node); - - for (let item of breadcrumbs) { - self.breadcrumbs.push(NavItem.create(item)); - } - - // self.main = NavItem.create({ - // id: 'test', - // text: 'test', - // url: '/test'; - // children: [ - // { - // id: 'test', - // text: 'text', - // url: '/test', - // active: true, - // children: [] - // } - // ] - // }); }, })); diff --git a/public/app/stores/RootStore.ts b/public/app/stores/RootStore.ts index c77f4378bfd..e6a445f8243 100644 --- a/public/app/stores/RootStore.ts +++ b/public/app/stores/RootStore.ts @@ -1,7 +1,7 @@ import { types } from 'mobx-state-tree'; import { SearchStore } from './SearchStore'; import { ServerStatsStore } from './ServerStatsStore'; -import { NavStore } from './NavStore/NavStore'; +import { NavStore } from './NavStore'; export const RootStore = types.model({ search: types.optional(SearchStore, { diff --git a/public/app/stores/store.ts b/public/app/stores/store.ts index 873eb9d5efe..3e40206a122 100644 --- a/public/app/stores/store.ts +++ b/public/app/stores/store.ts @@ -1,4 +1,5 @@ import { RootStore, IRootStore } from './RootStore'; +import config from 'app/core/config'; export let store: IRootStore; @@ -7,6 +8,7 @@ export function createStore(backendSrv) { {}, { backendSrv: backendSrv, + navTree: config.bootData.navTree, } ); } diff --git a/public/test/mocks/common.ts b/public/test/mocks/common.ts new file mode 100644 index 00000000000..3bbb7db4792 --- /dev/null +++ b/public/test/mocks/common.ts @@ -0,0 +1,14 @@ +export const backendSrv = { + get: jest.fn(), +}; + +export function createNavTree(...args) { + let root = []; + let node = root; + for (let arg of args) { + let child = { id: arg, url: `/url/${arg}`, text: `${arg}-Text`, children: [] }; + node.push(child); + node = child.children; + } + return root; +}