DataSources: minor typescript cleanups and comments (#16860)

* datasource interface cleanup

* more types

* use PluginInclude

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

@@ -330,7 +330,8 @@ export interface QueryHint {
 }
 }
 
 
 /**
 /**
- * Data Source instance edit model
+ * Data Source instance edit model.  This is returned from:
+ *  /api/datasources
  */
  */
 export interface DataSourceSettings {
 export interface DataSourceSettings {
   id: number;
   id: number;
@@ -354,7 +355,8 @@ export interface DataSourceSettings {
 
 
 /**
 /**
  * Frontend settings model that is passed to Datasource constructor. This differs a bit from the model above
  * Frontend settings model that is passed to Datasource constructor. This differs a bit from the model above
- * as this data model is available to every user who has access to a data source (Viewers+).
+ * as this data model is available to every user who has access to a data source (Viewers+).  This is loaded
+ * in bootData (on page load), or from: /api/frontend/settings
  */
  */
 export interface DataSourceInstanceSettings {
 export interface DataSourceInstanceSettings {
   id: number;
   id: number;

public/app/features/datasources/settings/ButtonRow.tsx

@@ -4,8 +4,8 @@ import config from 'app/core/config';
 export interface Props {
 export interface Props {
   isReadOnly: boolean;
   isReadOnly: boolean;
   onDelete: () => void;
   onDelete: () => void;
-  onSubmit: (event) => void;
-  onTest: (event) => void;
+  onSubmit: (event: any) => void;
+  onTest: (event: any) => void;
 }
 }
 
 
 const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
 const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {

public/app/features/datasources/settings/PluginSettings.tsx

@@ -14,11 +14,11 @@ export class PluginSettings extends PureComponent<Props> {
   element: any;
   element: any;
   component: AngularComponent;
   component: AngularComponent;
   scopeProps: {
   scopeProps: {
-    ctrl: { datasourceMeta: Plugin; current: DataSourceSettings };
+    ctrl: { datasourceMeta: DataSourcePluginMeta; current: DataSourceSettings };
     onModelChanged: (dataSource: DataSourceSettings) => void;
     onModelChanged: (dataSource: DataSourceSettings) => void;
   };
   };
 
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     super(props);
 
 
     this.scopeProps = {
     this.scopeProps = {

public/app/features/datasources/state/actions.ts

@@ -105,7 +105,11 @@ export function deleteDataSource(): ThunkResult<void> {
   };
   };
 }
 }
 
 
-export function nameExits(dataSources, name) {
+interface ItemWithName {
+  name: string;
+}
+
+export function nameExits(dataSources: ItemWithName[], name: string) {
   return (
   return (
     dataSources.filter(dataSource => {
     dataSources.filter(dataSource => {
       return dataSource.name.toLowerCase() === name.toLowerCase();
       return dataSource.name.toLowerCase() === name.toLowerCase();
@@ -113,7 +117,7 @@ export function nameExits(dataSources, name) {
   );
   );
 }
 }
 
 
-export function findNewName(dataSources, name) {
+export function findNewName(dataSources: ItemWithName[], name: string) {
   // Need to loop through current data sources to make sure
   // Need to loop through current data sources to make sure
   // the name doesn't exist
   // the name doesn't exist
   while (nameExits(dataSources, name)) {
   while (nameExits(dataSources, name)) {
@@ -143,18 +147,18 @@ function updateFrontendSettings() {
     });
     });
 }
 }
 
 
-function nameHasSuffix(name) {
+function nameHasSuffix(name: string) {
   return name.endsWith('-', name.length - 1);
   return name.endsWith('-', name.length - 1);
 }
 }
 
 
-function getLastDigit(name) {
+function getLastDigit(name: string) {
   return parseInt(name.slice(-1), 10);
   return parseInt(name.slice(-1), 10);
 }
 }
 
 
-function incrementLastDigit(digit) {
+function incrementLastDigit(digit: number) {
   return isNaN(digit) ? 1 : digit + 1;
   return isNaN(digit) ? 1 : digit + 1;
 }
 }
 
 
-function getNewName(name) {
+function getNewName(name: string) {
   return name.slice(0, name.length - 1);
   return name.slice(0, name.length - 1);
 }
 }

public/app/features/datasources/state/navModel.ts

-import { PluginMeta, DataSourceSettings, PluginType, NavModel, NavModelItem } from '@grafana/ui';
+import { PluginMeta, DataSourceSettings, PluginType, NavModel, NavModelItem, PluginInclude } from '@grafana/ui';
 import config from 'app/core/config';
 import config from 'app/core/config';
 
 
 export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: PluginMeta): NavModelItem {
 export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: PluginMeta): NavModelItem {
@@ -15,7 +15,7 @@ export function buildNavModel(dataSource: DataSourceSettings, pluginMeta: Plugin
         icon: 'fa fa-fw fa-sliders',
         icon: 'fa fa-fw fa-sliders',
         id: `datasource-settings-${dataSource.id}`,
         id: `datasource-settings-${dataSource.id}`,
         text: 'Settings',
         text: 'Settings',
-        url: `datasources/edit/${dataSource.id}`,
+        url: `datasources/edit/${dataSource.id}/`,
       },
       },
     ],
     ],
   };
   };
@@ -106,10 +106,10 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
   };
   };
 }
 }
 
 
-function hasDashboards(includes) {
+function hasDashboards(includes: PluginInclude[]): boolean {
   return (
   return (
-    includes.filter(include => {
+    includes.find(include => {
       return include.type === 'dashboard';
       return include.type === 'dashboard';
-    }).length > 0
+    }) !== undefined
   );
   );
 }
 }

public/app/features/plugins/state/navModel.ts

-// Libraries
-import _ from 'lodash';
-
-// Utils & Services
-import config from 'app/core/config';
-
-// Types
-import { NavModel, PluginMeta, DataSourceSettings } from '@grafana/ui';
-
-export function buildNavModel(ds: DataSourceSettings, plugin: PluginMeta, currentPage: string): NavModel {
-  let title = 'New';
-  const subTitle = `Type: ${plugin.name}`;
-
-  if (ds.id) {
-    title = ds.name;
-  }
-
-  const main = {
-    img: plugin.info.logos.large,
-    id: 'ds-edit-' + plugin.id,
-    subTitle: subTitle,
-    url: '',
-    text: title,
-    breadcrumbs: [{ title: 'Data Sources', url: 'datasources' }],
-    children: [
-      {
-        active: currentPage === 'datasource-settings',
-        icon: 'fa fa-fw fa-sliders',
-        id: 'datasource-settings',
-        text: 'Settings',
-        url: `datasources/edit/${ds.id}`,
-      },
-    ],
-  };
-
-  const hasDashboards: any = _.find(plugin.includes, { type: 'dashboard' }) !== undefined;
-  if (hasDashboards && ds.id) {
-    main.children.push({
-      active: currentPage === 'datasource-dashboards',
-      icon: 'fa fa-fw fa-th-large',
-      id: 'datasource-dashboards',
-      text: 'Dashboards',
-      url: `datasources/edit/${ds.id}/dashboards`,
-    });
-  }
-
-  if (config.buildInfo.isEnterprise) {
-    main.children.push({
-      active: currentPage === 'datasource-permissions',
-      icon: 'fa fa-fw fa-lock',
-      id: 'datasource-permissions',
-      text: 'Permissions',
-      url: `datasources/edit/${ds.id}/permissions`,
-    });
-  }
-
-  return {
-    main: main,
-    node: _.find(main.children, { active: true }),
-  };
-}