IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

poc: mobx poc

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-12-19 17:26:51 +01:00
parent 908b6c8d0b
commit af1f3dd77b
5 changed files with 112 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

27
public/app/containers/ServerStats.tsx Normal file
View File

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

20
public/app/core/angular_wrappers.ts
View File

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

109
public/app/features/admin/partials/stats.html
View File

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

16
public/app/store/store.ts Normal file
View File

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