From af1f3dd77b4becc34354c4395ebcf0023c2889a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 19 Dec 2017 17:26:51 +0100 Subject: [PATCH] poc: mobx poc --- package.json | 3 + public/app/containers/ServerStats.tsx | 27 +++++ public/app/core/angular_wrappers.ts | 20 ++-- public/app/features/admin/partials/stats.html | 109 +++++++++--------- public/app/store/store.ts | 16 +++ 5 files changed, 112 insertions(+), 63 deletions(-) create mode 100644 public/app/containers/ServerStats.tsx create mode 100644 public/app/store/store.ts diff --git a/package.json b/package.json index 17817d60ef8..32846b2d493 100644 --- a/package.json +++ b/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", diff --git a/public/app/containers/ServerStats.tsx b/public/app/containers/ServerStats.tsx new file mode 100644 index 00000000000..8f6a6ac3ca2 --- /dev/null +++ b/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 { + constructor(props) { + super(props); + + const navModelSrv = new NavModelSrv(); + + this.state = { + navModel: navModelSrv.getNav("cfg", "admin", "server-stats", 1) + }; + } + + render() { + return ( + +

ServerStats

+ + ); + } +} diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 83a70fa4c8a..2774b46d3f4 100644 --- a/public/app/core/angular_wrappers.ts +++ b/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, []); } diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index e2a4bb62301..4298046f390 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -1,54 +1,55 @@ - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameValue
Total dashboards{{ctrl.stats.dashboards}}
Total users{{ctrl.stats.users}}
Active users (seen last 14 days){{ctrl.stats.activeUsers}}
Total organizations{{ctrl.stats.orgs}}
Total datasources{{ctrl.stats.datasources}}
Total playlists{{ctrl.stats.playlists}}
Total snapshots{{ctrl.stats.snapshots}}
Total dashboard tags{{ctrl.stats.tags}}
Total starred dashboards{{ctrl.stats.stars}}
Total alerts{{ctrl.stats.alerts}}
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/store/store.ts b/public/app/store/store.ts new file mode 100644 index 00000000000..e18e73690b8 --- /dev/null +++ b/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 };