From c045443dc95be57042626f1a7cebe2ae89feefab Mon Sep 17 00:00:00 2001 From: Tim Raymond Date: Tue, 13 Dec 2016 16:36:33 -0500 Subject: [PATCH 1/4] Initial Dashboard Index Page This sets up the routing, sidebar links, and a stubbed out table view of the dashboards. --- .../dashboards/containers/DashboardsPage.js | 72 +++++++++++++++++++ ui/src/dashboards/index.js | 2 + ui/src/index.js | 2 + ui/src/side_nav/components/SideNav.js | 1 + 4 files changed, 77 insertions(+) create mode 100644 ui/src/dashboards/containers/DashboardsPage.js create mode 100644 ui/src/dashboards/index.js diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js new file mode 100644 index 0000000000..dbc58ed399 --- /dev/null +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -0,0 +1,72 @@ +import React from 'react'; + +const DashboardsPage = React.createClass({ + getInitialState() { + return { + dashboards: [], + }; + }, + + componentDidMount() { + // getDashboards().then((dashboards) => { + const dashboards = []; + this.state({ + dashboards, + }); + // }); + }, + + render() { + return ( +
+
+
+
+

+ Bond Villain Dashboards +

+
+
+
+
+
+
+
+
+
+

4 Doomsday Devices

+
+
+ + + + + + + + + + + + + + + + + + + + +
Name
Goldeneye System Status
Carver Media Group Broadcast System Status
King Oil Pipeline Status
Icarus Space Program Status
+
+
+
+
+
+
+
+ ); + }, +}); + +export default DashboardsPage; diff --git a/ui/src/dashboards/index.js b/ui/src/dashboards/index.js new file mode 100644 index 0000000000..13fd48331e --- /dev/null +++ b/ui/src/dashboards/index.js @@ -0,0 +1,2 @@ +import DashboardsPage from './containers/DashboardsPage'; +export {DashboardsPage}; diff --git a/ui/src/index.js b/ui/src/index.js index 734a6e7ddc..c96489a8b1 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -11,6 +11,7 @@ import {KubernetesPage} from 'src/kubernetes'; import {Login} from 'src/auth'; import {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage} from 'src/kapacitor'; import DataExplorer from 'src/chronograf'; +import {DashboardsPage} from 'src/dashboards'; import {CreateSource, SourceForm, ManageSources} from 'src/sources'; import NotFound from 'src/shared/components/NotFound'; import configureStore from 'src/store/configureStore'; @@ -104,6 +105,7 @@ const Root = React.createClass({ + diff --git a/ui/src/side_nav/components/SideNav.js b/ui/src/side_nav/components/SideNav.js index 14448489a6..38f60b0ed8 100644 --- a/ui/src/side_nav/components/SideNav.js +++ b/ui/src/side_nav/components/SideNav.js @@ -33,6 +33,7 @@ const SideNav = React.createClass({ Explorer + Dashboards From 4bcca2e9883b0f26f95c9abb921627b06c863bb0 Mon Sep 17 00:00:00 2001 From: Tim Raymond Date: Tue, 13 Dec 2016 17:01:34 -0500 Subject: [PATCH 2/4] Build dashboard table from API This pulls the table data into a fetch from the mocked-out API. A subsequent commit will remove the commented-out sections to actually hit the backend. --- ui/src/dashboards/apis/index.js | 17 ++++++++ .../dashboards/containers/DashboardsPage.js | 43 +++++++++++-------- 2 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 ui/src/dashboards/apis/index.js diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js new file mode 100644 index 0000000000..3e6aa691d4 --- /dev/null +++ b/ui/src/dashboards/apis/index.js @@ -0,0 +1,17 @@ +// import AJAX from 'utils/ajax'; + +export function getDashboards() { + // return AJAX({ + // method: 'GET', + // url: `/chronograf/v1/dashboards`, + // }); + return { + then(cb) { + cb([ + {name: "Goldeneye System Status"}, + {name: "Carver Media Group Broadcast System Status"}, + {name: "Icarus Space Program Status"}, + ]); + }, + }; +} diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index dbc58ed399..e36d2cca59 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -1,5 +1,7 @@ import React from 'react'; +import {getDashboards} from '../apis'; + const DashboardsPage = React.createClass({ getInitialState() { return { @@ -8,22 +10,28 @@ const DashboardsPage = React.createClass({ }, componentDidMount() { - // getDashboards().then((dashboards) => { - const dashboards = []; - this.state({ - dashboards, + getDashboards().then((dashboards) => { + this.setState({ + dashboards, + }); }); - // }); }, render() { + let tableHeader; + if (this.state.dashboards.length === 0) { + tableHeader = "Loading Dashboards..."; + } else { + tableHeader = `${this.state.dashboards.length} Dashboards`; + } + return (

- Bond Villain Dashboards + Dashboards

@@ -34,7 +42,7 @@ const DashboardsPage = React.createClass({
-

4 Doomsday Devices

+

{tableHeader}

@@ -44,18 +52,15 @@ const DashboardsPage = React.createClass({ - - - - - - - - - - - - + { + this.state.dashboards.map((dashboard) => { + return ( + + + + ); + }) + }
Goldeneye System Status
Carver Media Group Broadcast System Status
King Oil Pipeline Status
Icarus Space Program Status
{dashboard.name}
From a3cb25a500de88eb9db1faccc78320257a20cd49 Mon Sep 17 00:00:00 2001 From: Tim Raymond Date: Tue, 13 Dec 2016 17:04:42 -0500 Subject: [PATCH 3/4] Make dashboard list fetch from API This removes some mocked-out data to make the Dashboard list actually hit the API. --- ui/src/dashboards/apis/index.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js index 3e6aa691d4..f0106f76bb 100644 --- a/ui/src/dashboards/apis/index.js +++ b/ui/src/dashboards/apis/index.js @@ -1,17 +1,8 @@ -// import AJAX from 'utils/ajax'; +import AJAX from 'utils/ajax'; export function getDashboards() { - // return AJAX({ - // method: 'GET', - // url: `/chronograf/v1/dashboards`, - // }); - return { - then(cb) { - cb([ - {name: "Goldeneye System Status"}, - {name: "Carver Media Group Broadcast System Status"}, - {name: "Icarus Space Program Status"}, - ]); - }, - }; + return AJAX({ + method: 'GET', + url: `/chronograf/v1/dashboards`, + }); } From 407c28f472e9a018934fb8d463a30f1633a16483 Mon Sep 17 00:00:00 2001 From: Tim Raymond Date: Tue, 13 Dec 2016 17:23:36 -0500 Subject: [PATCH 4/4] Use the dashboard ID for the iterator key Iterator keys should use something unique, like an ID :). --- ui/src/dashboards/containers/DashboardsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index e36d2cca59..b3f0a42854 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -55,7 +55,7 @@ const DashboardsPage = React.createClass({ { this.state.dashboards.map((dashboard) => { return ( - + {dashboard.name} );