Explorer tabs have names that refer to the query

Name is “Measurement” + First Field Selected Name
If multiple fields selected it only shows the first field not all fields

ui/src/chronograf/components/Explorer.js

@@ -108,7 +108,7 @@ const Explorer = React.createClass({
 
     if (!query) {
       return (
-        <div className="query-editor__empty">
+        <div className="qeditor--empty">
           <h5>This Graph has no Queries</h5>
           <br/>
           <div className="btn btn-primary" role="button" onClick={this.handleAddQuery}>Add a Query</div>
@@ -130,10 +130,10 @@ const Explorer = React.createClass({
     if (!this.props.isExpanded) {
       return null;
     }
-
     return (
       <div className="explorer--tabs">
         {this.props.queries.map((q) => {
+          const queryTabText = (q.measurement && q.fields.length !== 0) ? `${q.measurement}.${q.fields[0].field}` : 'Query';
           return (
             <QueryTabItem
               isActive={this.getActiveQuery().id === q.id}
@@ -141,6 +141,7 @@ const Explorer = React.createClass({
               query={q}
               onSelect={this.handleSetActiveQuery}
               onDelete={this.handleDeleteQuery}
+              queryTabText={queryTabText}
             />
           );
         })}

ui/src/chronograf/components/QueryTabItem.js

@@ -9,6 +9,7 @@ const QueryTabItem = React.createClass({
     }).isRequired,
     onSelect: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
+    queryTabText: PropTypes.string,
   },
 
   handleSelect() {
@@ -23,7 +24,7 @@ const QueryTabItem = React.createClass({
   render() {
     return (
       <div className={classNames('explorer--tab', {active: this.props.isActive})} onClick={this.handleSelect}>
-        <span className="explorer--tab-label">{this.props.query.rawText ? 'Raw Text' : 'Query'}</span>
+        <span className="explorer--tab-label">{this.props.query.rawText ? 'Raw Text' : this.props.queryTabText}</span>
         <span className="explorer--tab-delete" onClick={this.handleDelete}></span>
       </div>
     );