From 354913a704dc8723d456df2c2476bbb3397fe167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Dec 2017 17:24:04 +0100 Subject: [PATCH] mobx: progress on poc --- public/app/app.ts | 3 + public/app/containers/ServerStats.tsx | 42 ------- public/app/core/angular_wrappers.ts | 4 +- .../core/components/search/SearchResult.tsx | 84 ++++++++++++++ public/app/core/components/search/search.html | 11 +- public/app/features/admin/partials/stats.html | 109 +++++++++--------- public/app/store/store.ts | 20 ---- public/app/stores/RootStore.ts | 11 ++ public/app/stores/SearchStore.ts | 44 +++++++ public/app/stores/store.ts | 7 ++ 10 files changed, 211 insertions(+), 124 deletions(-) delete mode 100644 public/app/containers/ServerStats.tsx create mode 100644 public/app/core/components/search/SearchResult.tsx delete mode 100644 public/app/store/store.ts create mode 100644 public/app/stores/RootStore.ts create mode 100644 public/app/stores/SearchStore.ts create mode 100644 public/app/stores/store.ts diff --git a/public/app/app.ts b/public/app/app.ts index 8ddacc4ed04..0fd00c8e1bb 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -19,6 +19,7 @@ import angular from "angular"; import config from "app/core/config"; import _ from "lodash"; import moment from "moment"; +import { createStore } from "app/stores/store"; // add move to lodash for backward compatabiltiy _.move = function(array, fromIndex, toIndex) { @@ -135,6 +136,8 @@ export class GrafanaApp { Promise.all(preBootRequires) .then(() => { + createStore(); + // disable tool tip animation $.fn.tooltip.defaults.animation = false; // bootstrap the app diff --git a/public/app/containers/ServerStats.tsx b/public/app/containers/ServerStats.tsx deleted file mode 100644 index b6488725f6a..00000000000 --- a/public/app/containers/ServerStats.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import { observer } from "mobx-react"; -import PageHeader from "app/core/components/PageHeader/PageHeader"; -import { NavModel, NavModelSrv } from "app/core/nav_model_srv"; -import { store } from "app/store/store"; - -export interface IState { - navModel: NavModel; - search: any; -} - -@observer -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), - search: store.search - }; - } - - onClick = () => { - this.state.search.search(); - }; - - render() { - console.log("render"); - return ( -
- - -
- name: -

{this.state.search.name}

-
-
- ); - } -} diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 2774b46d3f4..839ff011d5a 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -3,12 +3,12 @@ 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"; +import { SearchResult } from "./components/search/SearchResult"; export function registerAngularDirectives() { react2AngularDirective("passwordStrength", PasswordStrength, ["password"]); react2AngularDirective("pageHeader", PageHeader, ["model", "noTabs"]); react2AngularDirective("emptyListCta", EmptyListCTA, ["model"]); react2AngularDirective("loginBackground", LoginBackground, []); - react2AngularDirective("containerServerStats", ServerStats, []); + react2AngularDirective("searchResult", SearchResult, []); } diff --git a/public/app/core/components/search/SearchResult.tsx b/public/app/core/components/search/SearchResult.tsx new file mode 100644 index 00000000000..fd96e55f912 --- /dev/null +++ b/public/app/core/components/search/SearchResult.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import classNames from "classnames"; +import { observer } from "mobx-react"; +import { store } from "app/stores/store"; + +export interface SearchResultProps { + search: any; +} + +@observer +export class SearchResult extends React.Component { + constructor(props) { + super(props); + + this.state = { + search: store.search + }; + } + + render() { + return this.state.search.sections.map(section => { + return ; + }); + } +} + +export interface SectionProps { + section: any; +} + +@observer +export class SearchResultSection extends React.Component { + constructor(props) { + super(props); + } + + renderItem(item) { + return ( + + + + + +
{item.title}
+ + + ); + } + + toggleSection = () => { + this.props.section.toggle(); + }; + + render() { + let collapseClassNames = classNames({ + fa: true, + "fa-plus": !this.props.section.expanded, + "fa-minus": this.props.section.expanded, + "search-section__header__toggle": true + }); + + return ( +
+
+ + + {this.props.section.title} + + +
+ {this.props.section.expanded && ( +
+ {this.props.section.items.map(this.renderItem)} +
+ )} +
+ ); + } +} diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 3b83284757e..50568d4ed85 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -22,11 +22,12 @@
No dashboards matching your query were found.
- + + + + + +
diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index 4298046f390..e2a4bb62301 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -1,55 +1,54 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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 deleted file mode 100644 index e996d804710..00000000000 --- a/public/app/store/store.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { types } from "mobx-state-tree"; - -const Search = types - .model({ - name: "asdas", - done: false - }) - .actions(self => ({ - search() { - self.name = "changed"; - } - })); - -const RootStore = types.model({ - search: types.optional(Search, {}) -}); - -const store = RootStore.create({}); - -export { store }; diff --git a/public/app/stores/RootStore.ts b/public/app/stores/RootStore.ts new file mode 100644 index 00000000000..512ec8da622 --- /dev/null +++ b/public/app/stores/RootStore.ts @@ -0,0 +1,11 @@ +import { types } from "mobx-state-tree"; +import { SearchStore } from "./SearchStore"; + +export const RootStore = types.model({ + search: types.optional(SearchStore, { + sections: [] + }) +}); + +type IRootStoreType = typeof RootStore.Type; +export interface IRootStore extends IRootStoreType {} diff --git a/public/app/stores/SearchStore.ts b/public/app/stores/SearchStore.ts new file mode 100644 index 00000000000..f4f9a4ece9e --- /dev/null +++ b/public/app/stores/SearchStore.ts @@ -0,0 +1,44 @@ +import { types } from "mobx-state-tree"; + +export const ResultItem = types.model("ResultItem", { + id: types.identifier(types.number), + folderId: types.optional(types.number, 0), + title: types.string, + url: types.string, + icon: types.string, + folderTitle: types.optional(types.string, "") +}); + +export const SearchResultSection = types + .model("SearchResultSection", { + id: types.identifier(), + title: types.string, + icon: types.string, + expanded: types.boolean, + items: types.array(ResultItem) + }) + .actions(self => ({ + toggle() { + self.expanded = !self.expanded; + } + })); + +export const SearchStore = types + .model("SearchStore", { + sections: types.array(SearchResultSection) + }) + .actions(self => ({ + query() { + for (let i = 0; i < 100; i++) { + self.sections.push( + SearchResultSection.create({ + id: "starred" + i, + title: "starred", + icon: "fa fa-fw fa-star-o", + expanded: false, + items: [] + }) + ); + } + } + })); diff --git a/public/app/stores/store.ts b/public/app/stores/store.ts new file mode 100644 index 00000000000..80cb51c3006 --- /dev/null +++ b/public/app/stores/store.ts @@ -0,0 +1,7 @@ +import { RootStore, IRootStore } from "./RootStore"; + +export let store: IRootStore; + +export function createStore() { + store = RootStore.create({}); +}