diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2b183963e..344465bc8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
### Bug Fixes
### Features
### UI Improvements
+ 1. [#1259](https://github.com/influxdata/chronograf/pull/1259): Add default display for empty dashboard
1. [#1258](https://github.com/influxdata/chronograf/pull/1258): Display Kapacitor alert endpoint options as radio button group
## v1.2.0-beta8 [2017-04-07]
diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js
index 0a06ea8330..b94e2c4543 100644
--- a/ui/src/dashboards/components/Dashboard.js
+++ b/ui/src/dashboards/components/Dashboard.js
@@ -7,6 +7,7 @@ const Dashboard = ({
dashboard,
isEditMode,
inPresentationMode,
+ onAddCell,
onPositionChange,
onEditCell,
onRenameCell,
@@ -21,16 +22,6 @@ const Dashboard = ({
return null
}
- return (
-
-
- {Dashboard.renderDashboard(dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies)}
-
-
- )
-}
-
-Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies) => {
const cells = dashboard.cells.map((cell) => {
const dashboardCell = {...cell}
dashboardCell.queries = dashboardCell.queries.map(({label, query, queryConfig, db}) =>
@@ -47,18 +38,33 @@ Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositi
})
return (
-
+
+ {cells.length ?
+
+
+
:
+
+
This Dashboard has no Graphs
+
+
+ }
+
)
}
@@ -74,6 +80,7 @@ Dashboard.propTypes = {
dashboard: shape({}).isRequired,
isEditMode: bool,
inPresentationMode: bool,
+ onAddCell: func,
onPositionChange: func,
onEditCell: func,
onRenameCell: func,
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index 95d7a6c992..46389c83f3 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -232,6 +232,7 @@ const DashboardPage = React.createClass({
source={source}
autoRefresh={autoRefresh}
timeRange={timeRange}
+ onAddCell={this.handleAddCell}
onPositionChange={this.handleUpdatePosition}
onEditCell={this.handleEditDashboardCell}
onRenameCell={this.handleRenameDashboardCell}
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss
index 46cc66094b..f9183629bc 100644
--- a/ui/src/style/pages/dashboards.scss
+++ b/ui/src/style/pages/dashboards.scss
@@ -49,6 +49,20 @@ $dash-graph-options-arrow: 8px;
left: 0;
}
}
+.dashboard__empty {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ p {
+ color: $g13-mist;
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 20px;
+ }
+}
.dash-graph {
position: absolute;
width: 100%;