BarGauge: New multi series enabled gauge like panel with horizontal and vertical layouts and 3 display modes (#16918)

* BarGauge: switched to beta and updated beta notice design

* Updated snapshot

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

@@ -185,11 +185,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
       );
     } else {
       return (
-        <div className="toolbar__main" onClick={this.onOpenVizPicker}>
-          <img className="toolbar__main-image" src={meta.info.logos.small} />
-          <div className="toolbar__main-name">{meta.name}</div>
-          <i className="fa fa-caret-down" />
-        </div>
+        <>
+          <div className="toolbar__main" onClick={this.onOpenVizPicker}>
+            <img className="toolbar__main-image" src={meta.info.logos.small} />
+            <div className="toolbar__main-name">{meta.name}</div>
+            <i className="fa fa-caret-down" />
+          </div>
+          <PluginStateinfo state={meta.state} />
+        </>
       );
     }
   };
@@ -237,7 +240,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
               onClose={this.onCloseVizPicker}
             />
           </FadeIn>
-          <PluginStateinfo state={meta.state} />
           {this.renderPanelOptions()}
         </>
       </EditorTabBody>

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

@@ -185,7 +185,14 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
             <div>
               <form onSubmit={this.onSubmit}>
                 {this.isReadOnly() && this.renderIsReadOnlyMessage()}
-                <PluginStateinfo state={dataSourceMeta.state} />
+                {dataSourceMeta.state && (
+                  <div className="gf-form">
+                    <label className="gf-form-label width-10">Plugin state</label>
+                    <label className="gf-form-label gf-form-label--transparent">
+                      <PluginStateinfo state={dataSourceMeta.state} />
+                    </label>
+                  </div>
+                )}
 
                 <BasicSettings
                   dataSourceName={dataSource.name}

public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap

@@ -11,9 +11,22 @@ exports[`Render should render alpha info text 1`] = `
       <form
         onSubmit={[Function]}
       >
-        <PluginStateinfo
-          state="alpha"
-        />
+        <div
+          className="gf-form"
+        >
+          <label
+            className="gf-form-label width-10"
+          >
+            Plugin state
+          </label>
+          <label
+            className="gf-form-label gf-form-label--transparent"
+          >
+            <PluginStateinfo
+              state="alpha"
+            />
+          </label>
+        </div>
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
@@ -118,9 +131,22 @@ exports[`Render should render beta info text 1`] = `
       <form
         onSubmit={[Function]}
       >
-        <PluginStateinfo
-          state="beta"
-        />
+        <div
+          className="gf-form"
+        >
+          <label
+            className="gf-form-label width-10"
+          >
+            Plugin state
+          </label>
+          <label
+            className="gf-form-label gf-form-label--transparent"
+          >
+            <PluginStateinfo
+              state="beta"
+            />
+          </label>
+        </div>
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
@@ -225,7 +251,6 @@ exports[`Render should render component 1`] = `
       <form
         onSubmit={[Function]}
       >
-        <PluginStateinfo />
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
@@ -334,7 +359,6 @@ exports[`Render should render is ready only message 1`] = `
         >
           This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
         </div>
-        <PluginStateinfo />
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}

public/app/features/plugins/PluginStateInfo.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
-import { PluginState } from '@grafana/ui';
+import React, { FC, useContext } from 'react';
+import { css } from 'emotion';
+import { PluginState, Tooltip, ThemeContext } from '@grafana/ui';
 
 interface Props {
   state?: PluginState;
@@ -8,16 +9,10 @@ interface Props {
 function getPluginStateInfoText(state?: PluginState): string | null {
   switch (state) {
     case PluginState.alpha:
-      return (
-        'This plugin is marked as being in alpha state, which means it is in early development phase and updates' +
-        ' will include breaking changes.'
-      );
+      return 'Plugin in alpha state. Means work in progress and updates may include breaking changes.';
 
     case PluginState.beta:
-      return (
-        'This plugin is marked as being in a beta development state. This means it is in currently in active' +
-        ' development and could be missing important features.'
-      );
+      return 'Plugin in beta state. Means there could be bugs and minor breaking changes.';
   }
   return null;
 }
@@ -28,7 +23,26 @@ const PluginStateinfo: FC<Props> = props => {
     return null;
   }
 
-  return <div className="grafana-info-box">{text}</div>;
+  const theme = useContext(ThemeContext);
+
+  const styles = css`
+    background: linear-gradient(to bottom, ${theme.colors.blueBase}, ${theme.colors.blueShade});
+    color: ${theme.colors.gray7};
+    white-space: nowrap;
+    border-radius: 3px;
+    text-shadow: none;
+    font-size: 13px;
+    padding: 4px 8px;
+    margin-left: 16px;
+  `;
+
+  return (
+    <Tooltip content={text}>
+      <div className={styles}>
+        <i className="fa fa-warning" /> {props.state}
+      </div>
+    </Tooltip>
+  );
 };
 
 export default PluginStateinfo;

public/app/plugins/panel/bargauge/plugin.json

@@ -2,7 +2,7 @@
   "type": "panel",
   "name": "Bar Gauge",
   "id": "bargauge",
-  "state": "alpha",
+  "state": "beta",
 
   "dataFormats": ["time_series"],