Merge remote-tracking branch 'grafana/master' into nav-model-to-grafa…

…naui

* grafana/master:
  Explore: Support user timezone (grafana#16469)
  Plugins: rename vizPlugin to panelPlugin (grafana#16802)
  Plugins: move app/feature/plugin properties into PluginMeta (grafana#16809)
  Plugins: move PanelPluginMeta to grafana/ui (grafana#16804)

packages/grafana-ui/src/types/panel.ts

@@ -2,9 +2,28 @@ import { ComponentClass, ComponentType } from 'react';
 import { LoadingState, SeriesData } from './data';
 import { TimeRange } from './time';
 import { ScopedVars, DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource';
+import { PluginMeta } from './plugin';
 
 export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
+export interface PanelPluginMeta extends PluginMeta {
+  hideFromList?: boolean;
+  sort: number;
+  angularPlugin: AngularPanelPlugin | null;
+  panelPlugin: PanelPlugin | null;
+  hasBeenImported?: boolean;
+
+  // if length>0 the query tab will show up
+  // Before 6.2 this could be table and/or series, but 6.2+ supports both transparently
+  // so it will be deprecated soon
+  dataFormats?: PanelDataFormat[];
+}
+
+export enum PanelDataFormat {
+  Table = 'table',
+  TimeSeries = 'time_series',
+}
+
 export interface PanelData {
   state: LoadingState;
   series: SeriesData[];

packages/grafana-ui/src/types/plugin.ts

@@ -24,6 +24,10 @@ export interface PluginMeta {
   // Filled in by the backend
   jsonData?: { [str: string]: any };
   enabled?: boolean;
+  defaultNavUrl?: string;
+  hasUpdate?: boolean;
+  latestVersion?: string;
+  pinned?: boolean;
 }
 
 export enum PluginIncludeType {

packages/grafana-ui/src/types/time.ts

@@ -11,11 +11,30 @@ export interface TimeRange {
   raw: RawTimeRange;
 }
 
+export interface AbsoluteTimeRange {
+  from: number;
+  to: number;
+}
+
 export interface IntervalValues {
   interval: string; // 10s,5m
   intervalMs: number;
 }
 
+export interface TimeZone {
+  raw: string;
+  isUtc: boolean;
+}
+
+export const parseTimeZone = (raw: string): TimeZone => {
+  return {
+    raw,
+    isUtc: raw === 'utc',
+  };
+};
+
+export const DefaultTimeZone = parseTimeZone('browser');
+
 export interface TimeOption {
   from: string;
   to: string;

public/app/core/config.ts

@@ -1,6 +1,5 @@
 import _ from 'lodash';
-import { PanelPluginMeta } from 'app/types/plugins';
-import { GrafanaTheme, getTheme, GrafanaThemeType, DataSourceInstanceSettings } from '@grafana/ui';
+import { GrafanaTheme, getTheme, GrafanaThemeType, PanelPluginMeta, DataSourceInstanceSettings } from '@grafana/ui';
 
 export interface BuildInfo {
   version: string;

public/app/core/utils/explore.ts

@@ -1,18 +1,17 @@
 // Libraries
 import _ from 'lodash';
+import moment, { Moment } from 'moment';
 
 // Services & Utils
 import * as dateMath from 'app/core/utils/datemath';
 import { renderUrl } from 'app/core/utils/url';
 import kbn from 'app/core/utils/kbn';
 import store from 'app/core/store';
-import { parse as parseDate } from 'app/core/utils/datemath';
-import { colors } from '@grafana/ui';
 import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
 import { getNextRefIdChar } from './query';
 
 // Types
-import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui';
+import { colors, TimeRange, RawTimeRange, TimeZone, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui';
 import TimeSeries from 'app/core/time_series2';
 import {
   ExploreUrlState,
@@ -104,7 +103,7 @@ export function buildQueryTransaction(
   rowIndex: number,
   resultType: ResultType,
   queryOptions: QueryOptions,
-  range: RawTimeRange,
+  range: TimeRange,
   queryIntervals: QueryIntervals,
   scanning: boolean
 ): QueryTransaction {
@@ -131,12 +130,8 @@ export function buildQueryTransaction(
     intervalMs,
     panelId,
     targets: configuredQueries, // Datasources rely on DataQueries being passed under the targets key.
-    range: {
-      from: dateMath.parse(range.from, false),
-      to: dateMath.parse(range.to, true),
-      raw: range,
-    },
-    rangeRaw: range,
+    range,
+    rangeRaw: range.raw,
     scopedVars: {
       __interval: { text: interval, value: interval },
       __interval_ms: { text: intervalMs, value: intervalMs },
@@ -315,17 +310,12 @@ export function calculateResultsFromQueryTransactions(
   };
 }
 
-export function getIntervals(range: RawTimeRange, lowLimit: string, resolution: number): IntervalValues {
+export function getIntervals(range: TimeRange, lowLimit: string, resolution: number): IntervalValues {
   if (!resolution) {
     return { interval: '1s', intervalMs: 1000 };
   }
 
-  const absoluteRange: RawTimeRange = {
-    from: parseDate(range.from, false),
-    to: parseDate(range.to, true),
-  };
-
-  return kbn.calculateInterval(absoluteRange, resolution, lowLimit);
+  return kbn.calculateInterval(range, resolution, lowLimit);
 }
 
 export const makeTimeSeriesList: ResultGetter = (dataList, transaction, allTransactions) => {
@@ -395,3 +385,51 @@ export const getQueryKeys = (queries: DataQuery[], datasourceInstance: DataSourc
 
   return queryKeys;
 };
+
+export const getTimeRange = (timeZone: TimeZone, rawRange: RawTimeRange): TimeRange => {
+  return {
+    from: dateMath.parse(rawRange.from, false, timeZone.raw as any),
+    to: dateMath.parse(rawRange.to, true, timeZone.raw as any),
+    raw: rawRange,
+  };
+};
+
+const parseRawTime = (value): Moment | string => {
+  if (value === null) {
+    return null;
+  }
+
+  if (value.indexOf('now') !== -1) {
+    return value;
+  }
+  if (value.length === 8) {
+    return moment.utc(value, 'YYYYMMDD');
+  }
+  if (value.length === 15) {
+    return moment.utc(value, 'YYYYMMDDTHHmmss');
+  }
+  // Backward compatibility
+  if (value.length === 19) {
+    return moment.utc(value, 'YYYY-MM-DD HH:mm:ss');
+  }
+
+  if (!isNaN(value)) {
+    const epoch = parseInt(value, 10);
+    return moment.utc(epoch);
+  }
+
+  return null;
+};
+
+export const getTimeRangeFromUrl = (range: RawTimeRange, timeZone: TimeZone): TimeRange => {
+  const raw = {
+    from: parseRawTime(range.from),
+    to: parseRawTime(range.to),
+  };
+
+  return {
+    from: dateMath.parse(raw.from, false, timeZone.raw as any),
+    to: dateMath.parse(raw.to, true, timeZone.raw as any),
+    raw,
+  };
+};

public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts

@@ -9,7 +9,7 @@ import config from 'app/core/config';
 import { DashboardExporter } from './DashboardExporter';
 import { DashboardModel } from '../../state/DashboardModel';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { PanelPluginMeta } from 'app/types';
+import { PanelPluginMeta } from '@grafana/ui';
 
 describe('given dashboard with repeated panels', () => {
   let dash: any, exported: any;

public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts

@@ -4,7 +4,7 @@ import config from 'app/core/config';
 import { DashboardModel } from '../../state/DashboardModel';
 import DatasourceSrv from 'app/features/plugins/datasource_srv';
 import { PanelModel } from 'app/features/dashboard/state';
-import { PanelPluginMeta } from 'app/types/plugins';
+import { PanelPluginMeta } from '@grafana/ui';
 
 interface Input {
   name: string;

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -17,8 +17,7 @@ import { PanelResizer } from './PanelResizer';
 
 // Types
 import { PanelModel, DashboardModel } from '../state';
-import { PanelPluginMeta } from 'app/types';
-import { AngularPanelPlugin, PanelPlugin } from '@grafana/ui/src/types/panel';
+import { PanelPluginMeta, AngularPanelPlugin, PanelPlugin } from '@grafana/ui/src/types/panel';
 import { AutoSizer } from 'react-virtualized';
 
 export interface Props {
@@ -102,7 +101,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
       if (importedPlugin instanceof AngularPanelPlugin) {
         plugin.angularPlugin = importedPlugin as AngularPanelPlugin;
       } else if (importedPlugin instanceof PanelPlugin) {
-        plugin.vizPlugin = importedPlugin as PanelPlugin;
+        plugin.panelPlugin = importedPlugin as PanelPlugin;
       }
     } catch (e) {
       plugin = getPanelPluginNotFound(plugin.id);
@@ -210,7 +209,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
               onMouseLeave={this.onMouseLeave}
               style={styles}
             >
-              {plugin.vizPlugin && this.renderReactPanel()}
+              {plugin.panelPlugin && this.renderReactPanel()}
               {plugin.angularPlugin && this.renderAngularPanel()}
             </div>
           )}

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -16,8 +16,7 @@ import config from 'app/core/config';
 
 // Types
 import { DashboardModel, PanelModel } from '../state';
-import { PanelPluginMeta } from 'app/types';
-import { LoadingState, PanelData } from '@grafana/ui';
+import { PanelPluginMeta, LoadingState, PanelData } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui';
 
 import templateSrv from 'app/features/templating/template_srv';
@@ -216,7 +215,7 @@ export class PanelChrome extends PureComponent<Props, State> {
   renderPanel(width: number, height: number): JSX.Element {
     const { panel, plugin } = this.props;
     const { renderCounter, data, isFirstLoad } = this.state;
-    const PanelComponent = plugin.vizPlugin.panel;
+    const PanelComponent = plugin.panelPlugin.panel;
 
     // This is only done to increase a counter that is used by backend
     // image rendering (phantomjs/headless chrome) to know when to capture image
@@ -237,7 +236,7 @@ export class PanelChrome extends PureComponent<Props, State> {
           <PanelComponent
             data={data}
             timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
-            options={panel.getOptions(plugin.vizPlugin.defaults)}
+            options={panel.getOptions(plugin.panelPlugin.defaults)}
             width={width - 2 * config.theme.panelPadding.horizontal}
             height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
             renderCounter={renderCounter}

public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx

@@ -6,8 +6,8 @@ import React, { PureComponent } from 'react';
 import { AlertBox } from 'app/core/components/AlertBox/AlertBox';
 
 // Types
-import { PanelPluginMeta, AppNotificationSeverity } from 'app/types';
-import { PanelProps, PanelPlugin, PluginType } from '@grafana/ui';
+import { AppNotificationSeverity } from 'app/types';
+import { PanelPluginMeta, PanelProps, PanelPlugin, PluginType } from '@grafana/ui';
 
 interface Props {
   pluginId: string;
@@ -63,7 +63,7 @@ export function getPanelPluginNotFound(id: string): PanelPluginMeta {
       updated: '',
       version: '',
     },
-    vizPlugin: new PanelPlugin(NotFound),
+    panelPlugin: new PanelPlugin(NotFound),
     angularPlugin: null,
   };
 }

public/app/features/dashboard/panel_editor/PanelEditor.tsx

@@ -13,9 +13,7 @@ import { AngularComponent } from 'app/core/services/AngularLoader';
 
 import { PanelModel } from '../state/PanelModel';
 import { DashboardModel } from '../state/DashboardModel';
-import { PanelPluginMeta } from 'app/types/plugins';
-
-import { Tooltip } from '@grafana/ui';
+import { PanelPluginMeta, Tooltip } from '@grafana/ui';
 
 interface PanelEditorProps {
   panel: PanelModel;

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -16,9 +16,9 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
 // Types
 import { PanelModel } from '../state';
 import { DashboardModel } from '../state';
-import { PanelPluginMeta } from 'app/types/plugins';
 import { VizPickerSearch } from './VizPickerSearch';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
+import { PanelPluginMeta } from '@grafana/ui';
 
 interface Props {
   panel: PanelModel;
@@ -54,7 +54,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
   getReactPanelOptions = () => {
     const { panel, plugin } = this.props;
-    return panel.getOptions(plugin.vizPlugin.defaults);
+    return panel.getOptions(plugin.panelPlugin.defaults);
   };
 
   renderPanelOptions() {
@@ -64,8 +64,8 @@ export class VisualizationTab extends PureComponent<Props, State> {
       return <div ref={element => (this.element = element)} />;
     }
 
-    if (plugin.vizPlugin) {
-      const PanelEditor = plugin.vizPlugin.editor;
+    if (plugin.panelPlugin) {
+      const PanelEditor = plugin.panelPlugin.editor;
 
       if (PanelEditor) {
         return <PanelEditor options={this.getReactPanelOptions()} onOptionsChange={this.onPanelOptionsChanged} />;

public/app/features/dashboard/panel_editor/VizPickerSearch.tsx

@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
-
-import { PanelPluginMeta } from 'app/types';
+import { PanelPluginMeta } from '@grafana/ui';
 
 interface Props {
   plugin: PanelPluginMeta;

public/app/features/dashboard/panel_editor/VizTypePicker.tsx

@@ -1,9 +1,8 @@
 import React, { PureComponent } from 'react';
 
 import config from 'app/core/config';
-import { PanelPluginMeta } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
-import { EmptySearchResult } from '@grafana/ui';
+import { PanelPluginMeta, EmptySearchResult } from '@grafana/ui';
 
 export interface Props {
   current: PanelPluginMeta;

public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { PanelPluginMeta } from 'app/types/plugins';
+import { PanelPluginMeta } from '@grafana/ui';
 
 interface Props {
   isCurrent: boolean;

public/app/features/dashboard/state/PanelModel.test.ts

@@ -129,7 +129,7 @@ describe('PanelModel', () => {
         model.changePlugin(
           getPanelPlugin({
             id: 'react',
-            vizPlugin: reactPlugin,
+            panelPlugin: reactPlugin,
           })
         );
       });