diff --git a/ui/src/shared/components/NameableGraph.js b/ui/src/shared/components/NameableGraph.js
index 1a0712007e..d9420bf90e 100644
--- a/ui/src/shared/components/NameableGraph.js
+++ b/ui/src/shared/components/NameableGraph.js
@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
import classnames from 'classnames'
import OnClickOutside from 'react-onclickoutside'
-const {bool, func, node, number, shape, string} = PropTypes
+const {array, bool, func, node, number, shape, string} = PropTypes
const NameableGraph = React.createClass({
propTypes: {
@@ -11,6 +11,7 @@ const NameableGraph = React.createClass({
isEditing: bool,
x: number.isRequired,
y: number.isRequired,
+ queries: array.isRequired,
}).isRequired,
children: node.isRequired,
onEditCell: func,
@@ -39,6 +40,21 @@ const NameableGraph = React.createClass({
})
},
+ renderCustomTimeIndicator() {
+ const {cell} = this.props
+ let customTimeRange = null
+
+ cell.queries.map(q => {
+ if (!q.query.includes(':dashboardTime:')) {
+ customTimeRange = q.queryConfig.range.lower.split(' ').reverse()[0]
+ }
+ })
+
+ return customTimeRange
+ ? {customTimeRange}
+ : null
+ },
+
render() {
const {
cell,
@@ -75,7 +91,12 @@ const NameableGraph = React.createClass({
/>
)
} else {
- nameOrField = {name}
+ nameOrField = (
+
+ {name}
+ {this.renderCustomTimeIndicator()}
+
+ )
}
let onStartRenaming
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss
index e98f4c5cf1..1a6ef73f39 100644
--- a/ui/src/style/pages/dashboards.scss
+++ b/ui/src/style/pages/dashboards.scss
@@ -144,7 +144,7 @@ $dash-graph-options-arrow: 8px;
.dash-graph--name {
height: $dash-graph-heading;
line-height: $dash-graph-heading;
- width: calc(100% - 50px);
+ width: calc(100% - 30px);
padding-left: 16px;
transition:
color 0.25s ease,
@@ -160,6 +160,19 @@ input.form-control.dash-graph--name-edit {
position: relative;
top: -1px; // Fix for slight offset
}
+.dash-graph--custom-time {
+ font-family: $code-font;
+ color: $c-pool;
+ background-color: $g2-kevlar;
+ height: 24px;
+ font-size: 10px;
+ line-height: 24px;
+ border-radius: 3px;
+ padding: 0 7px;
+ position: absolute;
+ top: 3px;
+ right: 30px;
+}
.dash-graph--options {
width: $dash-graph-heading;
position: absolute;