poc: mobx poc

package.json

@@ -133,6 +133,9 @@
     "file-saver": "^1.3.3",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
+    "mobx": "^3.4.1",
+    "mobx-react": "^4.3.5",
+    "mobx-state-tree": "^1.3.1",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "perfect-scrollbar": "^1.2.0",

public/app/containers/ServerStats.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import PageHeader from "app/core/components/PageHeader/PageHeader";
+import { NavModel, NavModelSrv } from "app/core/nav_model_srv";
+
+export interface IState {
+  navModel: NavModel;
+}
+
+export default class ServerStats extends React.Component<any, IState> {
+  constructor(props) {
+    super(props);
+
+    const navModelSrv = new NavModelSrv();
+
+    this.state = {
+      navModel: navModelSrv.getNav("cfg", "admin", "server-stats", 1)
+    };
+  }
+
+  render() {
+    return (
+      <PageHeader model={this.state.navModel}>
+        <h2>ServerStats</h2>
+      </PageHeader>
+    );
+  }
+}

public/app/core/angular_wrappers.ts

@@ -1,12 +1,14 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { PasswordStrength } from './components/PasswordStrength';
-import PageHeader from './components/PageHeader/PageHeader';
-import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
-import LoginBackground from './components/Login/LoginBackground';
+import { react2AngularDirective } from "app/core/utils/react2angular";
+import { PasswordStrength } from "./components/PasswordStrength";
+import PageHeader from "./components/PageHeader/PageHeader";
+import EmptyListCTA from "./components/EmptyListCTA/EmptyListCTA";
+import LoginBackground from "./components/Login/LoginBackground";
+import ServerStats from "app/containers/ServerStats";
 
 export function registerAngularDirectives() {
-  react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
-  react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
-  react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
-  react2AngularDirective('loginBackground', LoginBackground, []);
+  react2AngularDirective("passwordStrength", PasswordStrength, ["password"]);
+  react2AngularDirective("pageHeader", PageHeader, ["model", "noTabs"]);
+  react2AngularDirective("emptyListCta", EmptyListCTA, ["model"]);
+  react2AngularDirective("loginBackground", LoginBackground, []);
+  react2AngularDirective("containerServerStats", ServerStats, []);
 }

public/app/features/admin/partials/stats.html

@@ -1,54 +1,55 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-	<table class="filter-table form-inline">
-		<thead>
-			<tr>
-				<th>Name</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<td>Total dashboards</td>
-				<td>{{ctrl.stats.dashboards}}</td>
-			</tr>
-			<tr>
-				<td>Total users</td>
-				<td>{{ctrl.stats.users}}</td>
-			</tr>
-			<tr>
-				<td>Active users (seen last 14 days)</td>
-				<td>{{ctrl.stats.activeUsers}}</td>
-			</tr>
-			<tr>
-				<td>Total organizations</td>
-				<td>{{ctrl.stats.orgs}}</td>
-			</tr>
-			<tr>
-				<td>Total datasources</td>
-				<td>{{ctrl.stats.datasources}}</td>
-			</tr>
-			<tr>
-				<td>Total playlists</td>
-				<td>{{ctrl.stats.playlists}}</td>
-			</tr>
-			<tr>
-				<td>Total snapshots</td>
-				<td>{{ctrl.stats.snapshots}}</td>
-			</tr>
-			<tr>
-				<td>Total dashboard tags</td>
-				<td>{{ctrl.stats.tags}}</td>
-			</tr>
-			<tr>
-				<td>Total starred dashboards</td>
-				<td>{{ctrl.stats.stars}}</td>
-			</tr>
-      <tr>
-				<td>Total alerts</td>
-				<td>{{ctrl.stats.alerts}}</td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+<container-server-stats />
+<!-- <page&#45;header model="ctrl.navModel"></page&#45;header> -->
+<!--  -->
+<!-- <div class="page&#45;container page&#45;body"> -->
+<!-- 	<table class="filter&#45;table form&#45;inline"> -->
+<!-- 		<thead> -->
+<!-- 			<tr> -->
+<!-- 				<th>Name</th> -->
+<!-- 				<th>Value</th> -->
+<!-- 			</tr> -->
+<!-- 		</thead> -->
+<!-- 		<tbody> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total dashboards</td> -->
+<!-- 				<td>{{ctrl.stats.dashboards}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total users</td> -->
+<!-- 				<td>{{ctrl.stats.users}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Active users (seen last 14 days)</td> -->
+<!-- 				<td>{{ctrl.stats.activeUsers}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total organizations</td> -->
+<!-- 				<td>{{ctrl.stats.orgs}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total datasources</td> -->
+<!-- 				<td>{{ctrl.stats.datasources}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total playlists</td> -->
+<!-- 				<td>{{ctrl.stats.playlists}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total snapshots</td> -->
+<!-- 				<td>{{ctrl.stats.snapshots}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total dashboard tags</td> -->
+<!-- 				<td>{{ctrl.stats.tags}}</td> -->
+<!-- 			</tr> -->
+<!-- 			<tr> -->
+<!-- 				<td>Total starred dashboards</td> -->
+<!-- 				<td>{{ctrl.stats.stars}}</td> -->
+<!-- 			</tr> -->
+<!--       <tr> -->
+<!-- 				<td>Total alerts</td> -->
+<!-- 				<td>{{ctrl.stats.alerts}}</td> -->
+<!-- 			</tr> -->
+<!-- 		</tbody> -->
+<!-- 	</table> -->
+<!-- </div> -->

public/app/store/store.ts

@@ -0,0 +1,16 @@
+import { types } from "mobx-state-tree";
+
+const Search = types.model({
+  name: "",
+  done: false
+});
+
+const RootStore = types.model({
+  search: types.map(Search)
+});
+
+const store = RootStore.create({
+  search: {}
+});
+
+export { store };