BarGauge: New multi series enabled gauge like panel with horizontal and vertical…

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

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

@@ -185,7 +185,14 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
             <div>
             <div>
               <form onSubmit={this.onSubmit}>
               <form onSubmit={this.onSubmit}>
                 {this.isReadOnly() && this.renderIsReadOnlyMessage()}
                 {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                {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} />
                       <PluginStateinfo state={dataSourceMeta.state} />
+                    </label>
+                  </div>
+                )}
 
 
                 <BasicSettings
                 <BasicSettings
                   dataSourceName={dataSource.name}
                   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
       <form
         onSubmit={[Function]}
         onSubmit={[Function]}
       >
       >
+        <div
+          className="gf-form"
+        >
+          <label
+            className="gf-form-label width-10"
+          >
+            Plugin state
+          </label>
+          <label
+            className="gf-form-label gf-form-label--transparent"
+          >
             <PluginStateinfo
             <PluginStateinfo
               state="alpha"
               state="alpha"
             />
             />
+          </label>
+        </div>
         <BasicSettings
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           isDefault={false}
@@ -118,9 +131,22 @@ exports[`Render should render beta info text 1`] = `
       <form
       <form
         onSubmit={[Function]}
         onSubmit={[Function]}
       >
       >
+        <div
+          className="gf-form"
+        >
+          <label
+            className="gf-form-label width-10"
+          >
+            Plugin state
+          </label>
+          <label
+            className="gf-form-label gf-form-label--transparent"
+          >
             <PluginStateinfo
             <PluginStateinfo
               state="beta"
               state="beta"
             />
             />
+          </label>
+        </div>
         <BasicSettings
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           isDefault={false}
@@ -225,7 +251,6 @@ exports[`Render should render component 1`] = `
       <form
       <form
         onSubmit={[Function]}
         onSubmit={[Function]}
       >
       >
-        <PluginStateinfo />
         <BasicSettings
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           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.
           This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
         </div>
         </div>
-        <PluginStateinfo />
         <BasicSettings
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           isDefault={false}

public/app/features/plugins/PluginStateInfo.tsx

-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 {
 interface Props {
   state?: PluginState;
   state?: PluginState;
@@ -8,16 +9,10 @@ interface Props {
 function getPluginStateInfoText(state?: PluginState): string | null {
 function getPluginStateInfoText(state?: PluginState): string | null {
   switch (state) {
   switch (state) {
     case PluginState.alpha:
     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:
     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;
   return null;
 }
 }
@@ -28,7 +23,26 @@ const PluginStateinfo: FC<Props> = props => {
     return null;
     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;
 export default PluginStateinfo;

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

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