Display custom time range on cell header when present

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
+      ? <span className="dash-graph--custom-time">{customTimeRange}</span>
+      : null
+  },
+
   render() {
     const {
       cell,
@@ -75,7 +91,12 @@ const NameableGraph = React.createClass({
         />
       )
     } else {
-      nameOrField = <span className="dash-graph--name">{name}</span>
+      nameOrField = (
+        <span className="dash-graph--name">
+          {name}
+          {this.renderCustomTimeIndicator()}
+        </span>
+      )
     }
 
     let onStartRenaming

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;