Merge pull request #26 from grafana/7.4-breaking-changes

chore: update with 7.4 breaking changes
grafana · Feb 5, 2021 · c56f6b2 · c56f6b2
2 parents 88d5867 + b2d1dd2
commit c56f6b2
Show file tree

Hide file tree

Showing 6 changed files with 1,813 additions and 2,765 deletions.
diff --git a/package.json b/package.json
@@ -14,11 +14,11 @@
     "storybook:build": "build-storybook"
   },
   "dependencies": {
-    "@grafana/data": "^7.3.7",
-    "@grafana/runtime": "^7.3.7",
-    "@grafana/toolkit": "^7.3.7",
+    "@grafana/data": "next",
+    "@grafana/runtime": "next",
+    "@grafana/toolkit": "next",
     "@grafana/tsconfig": "^1.0.0-rc1",
-    "@grafana/ui": "^7.3.7",
+    "@grafana/ui": "next",
     "@types/chance": "^1.1.0",
     "rc-cascader": "1.0.1",
     "react": "^16.14.0",

diff --git a/src/components/DataLinks/DataLink.tsx b/src/components/DataLinks/DataLink.tsx
@@ -133,7 +133,6 @@ export const DataLink = (props: Props) => {
           <DataSourcePicker
             // Uid and value should be always set in the db and so in the items.
             onChange={ds => {
-              console.log("We selected datasource", ds);
               onChange({
                 ...value,
                 datasourceUid: ds.uid,

diff --git a/src/components/DataLinks/DataLinks.tsx b/src/components/DataLinks/DataLinks.tsx
@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import { css } from 'emotion';
 import { Button, stylesFactory, useTheme } from '@grafana/ui';
-import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars, DataSourceSelectItem } from '@grafana/data';
+import {
+  GrafanaTheme,
+  VariableOrigin,
+  DataLinkBuiltInVars,
+  DataSourceSelectItem,
+} from '@grafana/data';
 import { DataLinkConfig } from './types';
 import { DataLink } from './DataLink';
 
@@ -21,50 +26,51 @@ type Props = {
 };
 export const DataLinks = (props: Props) => {
   const { value, onChange } = props;
-  const [ datasources, setDatasources ] = useState<DataSourceSelectItem[]>([]);
+  const [datasources, setDatasources] = useState<DataSourceSelectItem[]>([]);
   const theme = useTheme();
   const styles = getStyles(theme);
 
   if (!datasources?.length) {
     fetch('/api/datasources').then(async (resp: Response) => {
-      const restDS = await resp.json() as any[];
-      const newDS: DataSourceSelectItem[] = restDS.map(ds => {
-        return {
-            name: ds.name,
-            value: ds.type,
-            meta: {
-              id: ds.id,
-              info: {
-                logos: {
-                  small: ds.typeLogoUrl
-                }
-              }
+      const restDS = (await resp.json()) as any[];
+      const newDS: DataSourceSelectItem[] = restDS.map((ds) => {
+        return ({
+          name: ds.name,
+          value: ds.type,
+          meta: {
+            id: ds.id,
+            info: {
+              logos: {
+                small: ds.typeLogoUrl,
+              },
             },
-            sort: '',
-        } as DataSourceSelectItem;
+          },
+          sort: '',
+        } as unknown) as DataSourceSelectItem;
       });
-      
+
       setDatasources(newDS);
-    });  
+    });
   }
-  
+
   return (
     <>
-      <h3 className="page-heading">Data links</h3>
+      <h3 className='page-heading'>Data links</h3>
 
       <div className={styles.infoText}>
-        Add links to existing fields. Links will be shown in log row details next to the field value.
+        Add links to existing fields. Links will be shown in log row details
+        next to the field value.
       </div>
 
-      <div className="gf-form-group">
+      <div className='gf-form-group'>
         {value &&
           value.map((field, index) => {
             return (
               <DataLink
                 className={styles.dataLink}
                 key={index}
                 value={field}
-                onChange={newField => {
+                onChange={(newField) => {
                   const newDataLinks = [...value];
                   newDataLinks.splice(index, 1, newField);
                   onChange(newDataLinks);
@@ -91,10 +97,13 @@ export const DataLinks = (props: Props) => {
             className={css`
               margin-right: 10px;
             `}
-            icon="plus"
-            onClick={event => {
+            icon='plus'
+            onClick={(event) => {
               event.preventDefault();
-              const newDataLinks = [...(value || []), { field: '', label: '', matcherRegex: '', url: '' }];
+              const newDataLinks = [
+                ...(value || []),
+                { field: '', label: '', matcherRegex: '', url: '' },
+              ];
               onChange(newDataLinks);
             }}
           >

diff --git a/src/components/DataSourcePicker/DataSourcePicker.tsx b/src/components/DataSourcePicker/DataSourcePicker.tsx
@@ -5,7 +5,10 @@ import React, { PureComponent } from 'react';
 import { HorizontalGroup, Select } from '@grafana/ui';
 import { DataSourceInstanceSettings, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';
+import {
+  isUnsignedPluginSignature,
+  PluginSignatureBadge,
+} from '../Plugins/PluginSignatureBadge';
 import { getDataSourceSrv } from '@grafana/runtime';
 
 export interface Props {
@@ -47,16 +50,14 @@ export class DataSourcePicker extends PureComponent<Props, State> {
 
   componentDidMount() {
     const { current } = this.props;
-    const dsSettings = this.dataSourceSrv.getDataSourceSettingsByUid(current!);
+    const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);
     if (!dsSettings) {
       this.setState({ error: 'Could not find data source ' + current });
     }
   }
 
   onChange = (item: SelectableValue<string>) => {
-    console.log("We got an item", item, item.value);
-    const dsSettings = this.dataSourceSrv.getDataSourceSettingsByUid(item.value!);
-    console.log("ds settings is", dsSettings);
+    const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);
 
     if (dsSettings) {
       this.props.onChange(dsSettings);
@@ -73,7 +74,7 @@ export class DataSourcePicker extends PureComponent<Props, State> {
       };
     }
 
-    const ds = this.dataSourceSrv.getDataSourceSettingsByUid(current!);
+    const ds = this.dataSourceSrv.getInstanceSettings(current!);
 
     if (ds) {
       return {
@@ -94,14 +95,12 @@ export class DataSourcePicker extends PureComponent<Props, State> {
   }
 
   getDataSourceOptions() {
-    const options = this.dataSourceSrv
-      .getAll()
-      .map(ds => ({
-        value: ds.uid,
-        label: ds.name,
-        imgUrl: ds.meta.info.logos.small,
-        meta: ds.meta,
-      }));
+    const options = this.dataSourceSrv.getList().map((ds) => ({
+      value: ds.uid,
+      label: ds.name,
+      imgUrl: ds.meta.info.logos.small,
+      meta: ds.meta,
+    }));
 
     return options;
   }
@@ -115,7 +114,7 @@ export class DataSourcePicker extends PureComponent<Props, State> {
     return (
       <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
-          className="ds-picker select-container"
+          className='ds-picker select-container'
           isMulti={false}
           isClearable={false}
           backspaceRemovesValue={false}
@@ -126,14 +125,19 @@ export class DataSourcePicker extends PureComponent<Props, State> {
           openMenuOnFocus={openMenuOnFocus}
           maxMenuHeight={500}
           placeholder={placeholder}
-          noOptionsMessage="No datasources found"
+          noOptionsMessage='No datasources found'
           value={value}
           invalid={!!error}
-          getOptionLabel={o => {
-            if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
+          getOptionLabel={(o) => {
+            if (
+              o.meta &&
+              isUnsignedPluginSignature(o.meta.signature) &&
+              o !== value
+            ) {
               return (
-                <HorizontalGroup align="center" justify="space-between">
-                  <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />
+                <HorizontalGroup align='center' justify='space-between'>
+                  <span>{o.label}</span>{' '}
+                  <PluginSignatureBadge status={o.meta.signature} />
                 </HorizontalGroup>
               );
             }
@@ -143,4 +147,4 @@ export class DataSourcePicker extends PureComponent<Props, State> {
       </div>
     );
   }
-}
+}
diff --git a/src/test/mocks/Datasource.ts b/src/test/mocks/Datasource.ts
@@ -14,8 +14,10 @@ export const mockDatasource = (): DataSourceWithBackend => ({
   callHealthCheck: jest.fn(),
   testDatasource: jest.fn(),
   // DataSourceApi
+  uid: Chance().guid(),
   name: Chance().word(),
   id: 1,
+  type: Chance().word(),
   interval: Chance().word(),
   importQueries: jest.fn(),
   init: jest.fn(),