Merge pull request #15346 from grafana/logs-graph-series-names

Fix for logs graph series names (level names)

public/app/core/core.ts

@@ -1,4 +1,3 @@
-import './directives/dash_class';
 import './directives/dropdown_typeahead';
 import './directives/autofill_event_fix';
 import './directives/metric_segment';

public/app/core/directives/dash_class.ts

@@ -1,39 +0,0 @@
-import $ from 'jquery';
-import _ from 'lodash';
-import coreModule from '../core_module';
-
-/** @ngInject */
-function dashClass($timeout) {
-  return {
-    link: ($scope, elem) => {
-      const body = $('body');
-
-      $scope.ctrl.dashboard.events.on('view-mode-changed', panel => {
-        console.log('view-mode-changed', panel.fullscreen);
-        if (panel.fullscreen) {
-          body.addClass('panel-in-fullscreen');
-        } else {
-          $timeout(() => {
-            body.removeClass('panel-in-fullscreen');
-          });
-        }
-      });
-
-      body.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
-
-      $scope.$watch('ctrl.dashboardViewState.state.editview', newValue => {
-        if (newValue) {
-          elem.toggleClass('dashboard-page--settings-opening', _.isString(newValue));
-          setTimeout(() => {
-            elem.toggleClass('dashboard-page--settings-open', _.isString(newValue));
-          }, 10);
-        } else {
-          elem.removeClass('dashboard-page--settings-opening');
-          elem.removeClass('dashboard-page--settings-open');
-        }
-      });
-    },
-  };
-}
-
-coreModule.directive('dashClass', dashClass);

public/app/core/logs_model.ts

@@ -340,6 +340,11 @@ export function makeSeriesForLogs(rows: LogRowModel[], intervalMs: number): Time
       return a[1] - b[1];
     });
 
-    return { datapoints: series.datapoints, target: series.alias, color: series.color };
+    return {
+      datapoints: series.datapoints,
+      target: series.alias,
+      alias: series.alias,
+      color: series.color
+    };
   });
 }

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -2,61 +2,65 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { Select, SelectOptionItem } from '@grafana/ui';
+// import { Select, SelectOptionItem } from '@grafana/ui';
 
 // Types
 import { QueryEditorProps } from '@grafana/ui/src/types';
 import { LokiDatasource } from '../datasource';
 import { LokiQuery } from '../types';
-import { LokiQueryField } from './LokiQueryField';
+// import { LokiQueryField } from './LokiQueryField';
 
 type Props = QueryEditorProps<LokiDatasource, LokiQuery>;
 
-interface State {
-  query: LokiQuery;
-}
+// interface State {
+//   query: LokiQuery;
+// }
 
 export class LokiQueryEditor extends PureComponent<Props> {
-  state: State = {
-    query: this.props.query,
-  };
-
-  onRunQuery = () => {
-    const { query } = this.state;
-
-    this.props.onChange(query);
-    this.props.onRunQuery();
-  };
-
-  onFieldChange = (query: LokiQuery, override?) => {
-    this.setState({
-      query: {
-        ...this.state.query,
-        expr: query.expr,
-      },
-    });
-  };
-
-  onFormatChanged = (option: SelectOptionItem) => {
-    this.props.onChange({
-      ...this.state.query,
-      resultFormat: option.value,
-    });
-  };
+  // state: State = {
+  //   query: this.props.query,
+  // };
+  //
+  // onRunQuery = () => {
+  //   const { query } = this.state;
+  //
+  //   this.props.onChange(query);
+  //   this.props.onRunQuery();
+  // };
+  //
+  // onFieldChange = (query: LokiQuery, override?) => {
+  //   this.setState({
+  //     query: {
+  //       ...this.state.query,
+  //       expr: query.expr,
+  //     },
+  //   });
+  // };
+  //
+  // onFormatChanged = (option: SelectOptionItem) => {
+  //   this.props.onChange({
+  //     ...this.state.query,
+  //     resultFormat: option.value,
+  //   });
+  // };
 
   render() {
-    const { query } = this.state;
-    const { datasource } = this.props;
-    const formatOptions: SelectOptionItem[] = [
-      { label: 'Time Series', value: 'time_series' },
-      { label: 'Table', value: 'table' },
-    ];
-
-    query.resultFormat = query.resultFormat || 'time_series';
-    const currentFormat = formatOptions.find(item => item.value === query.resultFormat);
+    // const { query } = this.state;
+    // const { datasource } = this.props;
+    // const formatOptions: SelectOptionItem[] = [
+    //   { label: 'Time Series', value: 'time_series' },
+    //   { label: 'Table', value: 'table' },
+    // ];
+    //
+    // query.resultFormat = query.resultFormat || 'time_series';
+    // const currentFormat = formatOptions.find(item => item.value === query.resultFormat);
 
     return (
       <div>
+        <div className="gf-form">
+          <div className="gf-form-label">Loki is currently not supported as dashboard data source. We are working on it!</div>
+        </div>
+        {/*
         <LokiQueryField
           datasource={datasource}
           query={query}
@@ -78,6 +82,7 @@ export class LokiQueryEditor extends PureComponent<Props> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
+        */}
       </div>
     );
   }