refactor: changed nav store to use nav index and selector instead of initNav action

public/app/features/admin/apis/index.ts

@@ -2,7 +2,7 @@ import { getBackendSrv } from 'app/core/services/backend_srv';
 
 export interface ServerStat {
   name: string;
-  value: string;
+  value: number;
 }
 
 export const getServerStats = async (): Promise<ServerStat[]> => {

public/app/features/admin/containers/ServerStats.test.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { ServerStats } from './ServerStats';
-import { initNav } from 'test/mocks/common';
+import { createNavModel } from 'test/mocks/common';
 import { ServerStat } from '../apis';
 
 describe('ServerStats', () => {
   it('Should render table with stats', done => {
-    const stats: ServerStat[] = [{ name: 'test', value: 'asd' }];
+    const navModel = createNavModel('Admin', 'stats');
+    const stats: ServerStat[] = [{ name: 'Total dashboards', value: 10 }, { name: 'Total Users', value: 1 }];
 
     let getServerStats = () => {
       return Promise.resolve(stats);
     };
 
-    const page = renderer.create(<ServerStats initNav={initNav} getServerStats={getServerStats} />);
+    const page = renderer.create(<ServerStats navModel={navModel} getServerStats={getServerStats} />);
 
     setTimeout(() => {
       expect(page.toJSON()).toMatchSnapshot();

public/app/features/admin/containers/ServerStats.tsx

@@ -1,12 +1,13 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { initNav } from 'app/core/actions';
-import { ContainerProps } from 'app/types';
+import { NavModel, StoreState } from 'app/types';
+import { selectNavNode } from 'app/core/selectors/navModel';
 import { getServerStats, ServerStat } from '../apis';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 
-interface Props extends ContainerProps {
+interface Props {
+  navModel: NavModel;
   getServerStats: () => Promise<ServerStat[]>;
 }
 
@@ -21,8 +22,6 @@ export class ServerStats extends PureComponent<Props, State> {
     this.state = {
       stats: [],
     };
-
-    this.props.initNav('cfg', 'admin', 'server-stats');
   }
 
   async componentDidMount() {
@@ -66,13 +65,9 @@ function StatItem(stat: ServerStat) {
   );
 }
 
-const mapStateToProps = state => ({
-  navModel: state.navModel,
+const mapStateToProps = (state: StoreState) => ({
+  navModel: selectNavNode(state.navIndex, 'server-stats'),
   getServerStats: getServerStats,
 });
 
-const mapDispatchToProps = {
-  initNav,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(ServerStats));
+export default hot(module)(connect(mapStateToProps)(ServerStats));

public/app/features/admin/containers/__snapshots__/ServerStats.test.tsx.snap

@@ -17,8 +17,9 @@ exports[`ServerStats Should render table with stats 1`] = `
           <span
             className="page-header__logo"
           >
-            
-            
+            <i
+              className="page-header__icon fa fa-fw fa-warning"
+            />
           </span>
           <div
             className="page-header__info-block"
@@ -26,9 +27,13 @@ exports[`ServerStats Should render table with stats 1`] = `
             <h1
               className="page-header__title"
             >
-              admin-Text
+              Admin
             </h1>
-            
+            <div
+              className="page-header__sub-title"
+            >
+              subTitle
+            </div>
           </div>
         </div>
         <nav>
@@ -36,19 +41,19 @@ exports[`ServerStats Should render table with stats 1`] = `
             className="gf-form-select-wrapper width-20 page-header__select-nav"
           >
             <label
-              className="gf-form-select-icon "
+              className="gf-form-select-icon icon"
               htmlFor="page-header-select-nav"
             />
             <select
               className="gf-select-nav gf-form-input"
               id="page-header-select-nav"
               onChange={[Function]}
-              value="/url/server-stats"
+              value="Admin"
             >
               <option
-                value="/url/server-stats"
+                value="Admin"
               >
-                server-stats-Text
+                Admin
               </option>
             </select>
           </div>
@@ -60,13 +65,13 @@ exports[`ServerStats Should render table with stats 1`] = `
             >
               <a
                 className="gf-tabs-link active"
-                href="/url/server-stats"
+                href="Admin"
                 target={undefined}
               >
                 <i
-                  className=""
+                  className="icon"
                 />
-                server-stats-Text
+                Admin
               </a>
             </li>
           </ul>
@@ -101,66 +106,10 @@ exports[`ServerStats Should render table with stats 1`] = `
         </tr>
         <tr>
           <td>
-            Total users
+            Total Users
           </td>
           <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Active users (seen last 30 days)
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total orgs
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total playlists
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total snapshots
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total dashboard tags
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total starred dashboards
-          </td>
-          <td>
-            0
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Total alerts
-          </td>
-          <td>
-            0
+            1
           </td>
         </tr>
       </tbody>