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;