Skip to content

N
nexpie-grafana-theme
Commit af1f3dd7 by Torkel Ödegaard
Options

poc: mobx poc

parent 908b6c8d
Showing with 112 additions and 63 deletions
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 → 100644
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
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
<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 → 100644
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 };
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