tech: progress on react pages

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(<ServerStats store={store} />);
 
     setTimeout(() => {

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<IProps, any> {
   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();
   }
 

public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap

@@ -2,7 +2,78 @@
 
 exports[`ServerStats Should render table with stats 1`] = `
 <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
     className="page-container page-body"
   >

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) {

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: []
-      //     }
-      //   ]
-      // });
     },
   }));

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, {

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,
     }
   );
 }

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;
+}