Skip to content

N
nexpie-grafana-theme
Commit 8fd88537 by Torkel Ödegaard
Options

tech: progress on react pages

parent 5b91bb91
Showing with 115 additions and 44 deletions
public/app/containers/ServerStats/ServerStats.jest.tsx
...@@ -2,18 +2,24 @@ import React from 'react'; ...@@ -2,18 +2,24 @@ import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import { ServerStats } from './ServerStats'; import { ServerStats } from './ServerStats';
import { RootStore } from 'app/stores/RootStore'; import { RootStore } from 'app/stores/RootStore';
import { backendSrv, createNavTree } from 'test/mocks/common';
describe('ServerStats', () => { describe('ServerStats', () => {
it('Should render table with stats', done => { it('Should render table with stats', done => {
let backendSrvMock = { backendSrv.get.mockReturnValue(
get: jest.fn().mockReturnValue( Promise.resolve({
Promise.resolve({ dashboards: 10,
dashboards: 10, })
}) );
),
}; const store = RootStore.create(
{},
{
backendSrv: backendSrv,
navTree: createNavTree('cfg', 'admin', 'server-stats'),
}
);
const store = RootStore.create({}, { backendSrv: backendSrvMock });
const page = renderer.create(<ServerStats store={store} />); const page = renderer.create(<ServerStats store={store} />);
setTimeout(() => { setTimeout(() => {
......
public/app/containers/ServerStats/ServerStats.tsx
import React from 'react'; import React from 'react';
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import PageHeader from 'app/core/components/PageHeader/PageHeader';
import { NavModel, NavModelSrv } from 'app/core/nav_model_srv';
export interface IProps { export interface IProps {
store: any; store: any;
...@@ -13,8 +12,7 @@ export class ServerStats extends React.Component<IProps, any> { ...@@ -13,8 +12,7 @@ export class ServerStats extends React.Component<IProps, any> {
constructor(props) { constructor(props) {
super(props); super(props);
// this.navModel = new NavModelSrv().getNav('cfg', 'admin', 'server-stats', 1); this.props.store.nav.load('cfg', 'admin', 'server-stats', 1);
this.props.store.nav.load('cfg', 'admin', 'server-stats');
this.props.store.serverStats.load(); this.props.store.serverStats.load();
} }
......
public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap
...@@ -2,7 +2,78 @@ ...@@ -2,7 +2,78 @@
exports[`ServerStats Should render table with stats 1`] = ` exports[`ServerStats Should render table with stats 1`] = `
<div> <div>
// <div
className="page-header-canvas"
>
<div
className="page-container"
>
<div
className="page-header"
>
<div
className="page-header__inner"
>
<span
className="page-header__logo"
>
</span>
<div
className="page-header__info-block"
>
<h1
className="page-header__title"
>
admin-Text
</h1>
</div>
</div>
<nav>
<div
className="gf-form-select-wrapper width-20 page-header__select-nav"
>
<label
className="gf-form-select-icon "
htmlFor="page-header-select-nav"
/>
<select
className="gf-select-nav gf-form-input"
defaultValue="/url/server-stats"
id="page-header-select-nav"
onChange={[Function]}
>
<option
value="/url/server-stats"
>
server-stats-Text
</option>
</select>
</div>
<ul
className="gf-tabs page-header__tabs"
>
<li
className="gf-tabs-item"
>
<a
className="gf-tabs-link active"
href="/url/server-stats"
target={undefined}
>
<i
className=""
/>
server-stats-Text
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div <div
className="page-container page-body" className="page-container page-body"
> >
......
public/app/core/components/sidemenu/sidemenu.ts
...@@ -16,8 +16,10 @@ export class SideMenuCtrl { ...@@ -16,8 +16,10 @@ export class SideMenuCtrl {
constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) { constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
this.isSignedIn = contextSrv.isSignedIn; this.isSignedIn = contextSrv.isSignedIn;
this.user = contextSrv.user; 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()); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
if (contextSrv.user.orgCount > 1) { if (contextSrv.user.orgCount > 1) {
......
public/app/stores/NavStore/NavStore.ts → public/app/stores/NavStore.ts
import { types } from 'mobx-state-tree'; import { types, getEnv } from 'mobx-state-tree';
import config from 'app/core/config';
import _ from 'lodash'; import _ from 'lodash';
export const NavItem = types.model('NavItem', { export const NavItem = types.model('NavItem', {
id: types.identifier(types.string), id: types.identifier(types.string),
text: types.string, text: types.string,
url: types.optional(types.string, ''), url: types.optional(types.string, ''),
description: types.optional(types.string, ''), subTitle: types.optional(types.string, ''),
icon: types.optional(types.string, ''), icon: types.optional(types.string, ''),
img: types.optional(types.string, ''), img: types.optional(types.string, ''),
active: types.optional(types.boolean, false), active: types.optional(types.boolean, false),
...@@ -17,26 +16,24 @@ export const NavStore = types ...@@ -17,26 +16,24 @@ export const NavStore = types
.model('NavStore', { .model('NavStore', {
main: types.maybe(NavItem), main: types.maybe(NavItem),
node: types.maybe(NavItem), node: types.maybe(NavItem),
breadcrumbs: types.optional(types.array(NavItem), []),
}) })
.actions(self => ({ .actions(self => ({
load(...args) { load(...args) {
var children = config.bootData.navTree; var children = getEnv(self).navTree;
let main, node; let main, node;
let breadcrumbs = []; let parents = [];
for (let id of args) { for (let id of args) {
// if its a number then it's the index to use for main // if its a number then it's the index to use for main
if (_.isNumber(id)) { if (_.isNumber(id)) {
main = breadcrumbs[id]; main = parents[id];
break; break;
} }
let current = _.find(children, { id: id }); node = _.find(children, { id: id });
breadcrumbs.push(current);
main = node; main = node;
node = current;
children = node.children; children = node.children;
parents.push(node);
} }
if (main.children) { if (main.children) {
...@@ -51,24 +48,5 @@ export const NavStore = types ...@@ -51,24 +48,5 @@ export const NavStore = types
self.main = NavItem.create(main); self.main = NavItem.create(main);
self.node = NavItem.create(node); 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: []
// }
// ]
// });
}, },
})); }));
public/app/stores/RootStore.ts
import { types } from 'mobx-state-tree'; import { types } from 'mobx-state-tree';
import { SearchStore } from './SearchStore'; import { SearchStore } from './SearchStore';
import { ServerStatsStore } from './ServerStatsStore'; import { ServerStatsStore } from './ServerStatsStore';
import { NavStore } from './NavStore/NavStore'; import { NavStore } from './NavStore';
export const RootStore = types.model({ export const RootStore = types.model({
search: types.optional(SearchStore, { search: types.optional(SearchStore, {
......
public/app/stores/store.ts
import { RootStore, IRootStore } from './RootStore'; import { RootStore, IRootStore } from './RootStore';
import config from 'app/core/config';
export let store: IRootStore; export let store: IRootStore;
...@@ -7,6 +8,7 @@ export function createStore(backendSrv) { ...@@ -7,6 +8,7 @@ export function createStore(backendSrv) {
{}, {},
{ {
backendSrv: backendSrv, backendSrv: backendSrv,
navTree: config.bootData.navTree,
} }
); );
} }
public/test/mocks/common.ts 0 → 100644
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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment