IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* BarGauge: switched to beta and updated beta notice design

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2019-05-07 12:18:08 +02:00
committed by GitHub
parent f001815d9d
commit 6d6242c153
5 changed files with 74 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@@ -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>

9
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
View File

@@ -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}

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

@@ -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}

36
public/app/features/plugins/PluginStateInfo.tsx
View File

@@ -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;

2
public/app/plugins/panel/bargauge/plugin.json
View File

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