Azure Monitor and Log Analytics converted and separated into components (#18259)

* Azure Monitor and Log Analytics converted and separated into components

* Insights creds converted

* remove angular config

* fix workspaces and missing sameas key

* fix workspace save

* set subscriptionId key

* editor fields, load workspaces btn

* workspace load req fields updated

* added tooltip to switch, disable buttons instead of hide

* master merge and tests

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
 import uniqueId from 'lodash/uniqueId';
+import { Tooltip } from '../Tooltip/Tooltip';
+import * as PopperJS from 'popper.js';
 
 export interface Props {
   label: string;
@@ -7,6 +9,8 @@ export interface Props {
   className?: string;
   labelClass?: string;
   switchClass?: string;
+  tooltip?: string;
+  tooltipPlacement?: PopperJS.Placement;
   transparent?: boolean;
   onChange: (event?: React.SyntheticEvent<HTMLInputElement>) => void;
 }
@@ -26,7 +30,16 @@ export class Switch extends PureComponent<Props, State> {
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
+    const {
+      labelClass = '',
+      switchClass = '',
+      label,
+      checked,
+      transparent,
+      className,
+      tooltip,
+      tooltipPlacement,
+    } = this.props;
 
     const labelId = this.state.id;
     const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
@@ -35,7 +48,18 @@ export class Switch extends PureComponent<Props, State> {
     return (
       <div className="gf-form-switch-container-react">
         <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
-          {label && <div className={labelClassName}>{label}</div>}
+          {label && (
+            <div className={labelClassName}>
+              {label}
+              {tooltip && (
+                <Tooltip placement={tooltipPlacement ? tooltipPlacement : 'auto'} content={tooltip} theme={'info'}>
+                  <div className="gf-form-help-icon gf-form-help-icon--right-normal">
+                    <i className="fa fa-info-circle" />
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+          )}
           <div className={switchClassName}>
             <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
             <span className="gf-form-switch__slider" />