Skip to content

N
nexpie-grafana-theme
Commit 5cd41adc by Torkel Ödegaard Committed by GitHub
Options

Alerts: Update Alert storybook to show more states (#30908) 

* Alert: Design update for alerts

* Before text color

* Text update

* reverted style changes

* Minor fix

* Updated snapshot
parent 2a3aa951
Showing with 48 additions and 43 deletions
packages/grafana-ui/src/components/Alert/Alert.story.tsx
import React from 'react'; import React from 'react';
import { select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { Alert, AlertVariant } from './Alert'; import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from '../Alert/Alert.mdx'; import mdx from '../Alert/Alert.mdx';
import { StoryExample } from '../../utils/storybook/StoryExample';
export default { export default {
title: 'Overlays/Alert', title: 'Overlays/Alert',
...@@ -18,24 +18,34 @@ export default { ...@@ -18,24 +18,34 @@ export default {
const severities: AlertVariant[] = ['error', 'warning', 'info', 'success']; const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
export const basic = () => { export const Examples = () => {
const severity = select('Severity', severities, 'info');
return <Alert title="Some very important message" severity={severity} />;
};
export const withRemove = () => {
const severity = select('Severity', severities, 'info');
return <Alert title="Some very important message" severity={severity} onRemove={action('Remove button clicked')} />;
};
export const customButtonContent = () => {
const severity = select('Severity', severities, 'info');
return ( return (
<VerticalGroup>
<StoryExample name="With buttonContent and children">
<Alert <Alert
title="Some very important message" title="Some very important message"
severity={severity} severity="error"
buttonContent={<span>Close</span>} buttonContent={<span>Close</span>}
onRemove={action('Remove button clicked')} onRemove={action('Remove button clicked')}
>
Child content that includes some alert details, like maybe what actually happened.
</Alert>
</StoryExample>
<StoryExample name="No dismiss">
<Alert title="Some very important message" severity="info" />
</StoryExample>
<StoryExample name="Severities">
<VerticalGroup>
{severities.map((severity) => (
<Alert
title={`Severity: ${severity}`}
severity={severity}
key={severity}
onRemove={action('Remove button clicked')}
/> />
))}
</VerticalGroup>
</StoryExample>
</VerticalGroup>
); );
}; };
packages/grafana-ui/src/components/Alert/Alert.tsx
...@@ -79,6 +79,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean ...@@ -79,6 +79,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean
return { return {
alert: css` alert: css`
flex-grow: 1;
padding: 15px 20px; padding: 15px 20px;
margin-bottom: ${theme.spacing.xs}; margin-bottom: ${theme.spacing.xs};
position: relative; position: relative;
......
packages/grafana-ui/src/utils/colors.ts
...@@ -134,8 +134,10 @@ export let sortedColors = sortColorsByHue(colors); ...@@ -134,8 +134,10 @@ export let sortedColors = sortColorsByHue(colors);
export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] { export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] {
switch (severity) { switch (severity) {
case 'error': case 'error':
case 'warning':
return [theme.palette.redBase, theme.palette.redShade]; return [theme.palette.redBase, theme.palette.redShade];
case 'warning':
return [theme.palette.queryOrange, theme.palette.orange];
case 'info':
case 'info': case 'info':
return [theme.palette.blue80, theme.palette.blue77]; return [theme.palette.blue80, theme.palette.blue77];
case 'success': case 'success':
......
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
...@@ -23,7 +23,7 @@ import { getRouteParamsId } from 'app/core/selectors/location'; ...@@ -23,7 +23,7 @@ import { getRouteParamsId } from 'app/core/selectors/location';
// Types // Types
import { CoreEvents, StoreState } from 'app/types/'; import { CoreEvents, StoreState } from 'app/types/';
import { DataSourcePluginMeta, DataSourceSettings, NavModel, UrlQueryMap } from '@grafana/data'; import { DataSourcePluginMeta, DataSourceSettings, NavModel, UrlQueryMap } from '@grafana/data';
import { Alert } from '@grafana/ui'; import { Alert, InfoBox } from '@grafana/ui';
import { getDataSourceLoadingNav } from '../state/navModel'; import { getDataSourceLoadingNav } from '../state/navModel';
import PluginStateinfo from 'app/features/plugins/PluginStateInfo'; import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers'; import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
...@@ -100,10 +100,10 @@ export class DataSourceSettingsPage extends PureComponent<Props> { ...@@ -100,10 +100,10 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
renderIsReadOnlyMessage() { renderIsReadOnlyMessage() {
return ( return (
<div className="grafana-info-box span8"> <InfoBox severity="info">
This datasource was added by config and cannot be modified using the UI. Please contact your server admin to This datasource was added by config and cannot be modified using the UI. Please contact your server admin to
update this datasource. update this datasource.
</div> </InfoBox>
); );
} }
......
public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap
...@@ -295,11 +295,11 @@ exports[`Render should render is ready only message 1`] = ` ...@@ -295,11 +295,11 @@ exports[`Render should render is ready only message 1`] = `
<form <form
onSubmit={[Function]} onSubmit={[Function]}
> >
<div <InfoBox
className="grafana-info-box span8" severity="info"
> >
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> </InfoBox>
<CloudInfoBox <CloudInfoBox
dataSource={ dataSource={
Object { Object {
......
public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
...@@ -8,7 +8,7 @@ import { ...@@ -8,7 +8,7 @@ import {
onUpdateDatasourceJsonDataOptionSelect, onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceSecureJsonDataOption, onUpdateDatasourceSecureJsonDataOption,
} from '@grafana/data'; } from '@grafana/data';
import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui'; import { DataSourceHttpSettings, InfoBox, InlineFormLabel, LegacyForms } from '@grafana/ui';
const { Select, Input, SecretFormField } = LegacyForms; const { Select, Input, SecretFormField } = LegacyForms;
import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types'; import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
...@@ -74,7 +74,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -74,7 +74,7 @@ export class ConfigEditor extends PureComponent<Props> {
return ( return (
<div> <div>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="width-30 grafana-info-box"> <InfoBox>
<h5>Support for flux in Grafana is currently in beta</h5> <h5>Support for flux in Grafana is currently in beta</h5>
<p> <p>
Please report any issues to: <br /> Please report any issues to: <br />
...@@ -82,7 +82,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -82,7 +82,7 @@ export class ConfigEditor extends PureComponent<Props> {
https://github.com/grafana/grafana/issues https://github.com/grafana/grafana/issues
</a> </a>
</p> </p>
</div> </InfoBox>
</div> </div>
<br /> <br />
...@@ -231,7 +231,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -231,7 +231,7 @@ export class ConfigEditor extends PureComponent<Props> {
</div> </div>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="grafana-info-box"> <InfoBox>
<h5>Database Access</h5> <h5>Database Access</h5>
<p> <p>
Setting the database for this datasource does not deny access to other databases. The InfluxDB query Setting the database for this datasource does not deny access to other databases. The InfluxDB query
...@@ -242,7 +242,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -242,7 +242,7 @@ export class ConfigEditor extends PureComponent<Props> {
<br /> <br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p> </p>
</div> </InfoBox>
</div> </div>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="gf-form-inline"> <div className="gf-form-inline">
......
public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
...@@ -234,9 +234,7 @@ exports[`Render should disable basic auth password input 1`] = ` ...@@ -234,9 +234,7 @@ exports[`Render should disable basic auth password input 1`] = `
<div <div
className="gf-form-group" className="gf-form-group"
> >
<div <InfoBox>
className="grafana-info-box"
>
<h5> <h5>
Database Access Database Access
</h5> </h5>
...@@ -253,7 +251,7 @@ exports[`Render should disable basic auth password input 1`] = ` ...@@ -253,7 +251,7 @@ exports[`Render should disable basic auth password input 1`] = `
<br /> <br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p> </p>
</div> </InfoBox>
</div> </div>
<div <div
className="gf-form-group" className="gf-form-group"
...@@ -522,9 +520,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = ` ...@@ -522,9 +520,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
<div <div
className="gf-form-group" className="gf-form-group"
> >
<div <InfoBox>
className="grafana-info-box"
>
<h5> <h5>
Database Access Database Access
</h5> </h5>
...@@ -541,7 +537,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = ` ...@@ -541,7 +537,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
<br /> <br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p> </p>
</div> </InfoBox>
</div> </div>
<div <div
className="gf-form-group" className="gf-form-group"
...@@ -810,9 +806,7 @@ exports[`Render should hide white listed cookies input when browser access chose ...@@ -810,9 +806,7 @@ exports[`Render should hide white listed cookies input when browser access chose
<div <div
className="gf-form-group" className="gf-form-group"
> >
<div <InfoBox>
className="grafana-info-box"
>
<h5> <h5>
Database Access Database Access
</h5> </h5>
...@@ -829,7 +823,7 @@ exports[`Render should hide white listed cookies input when browser access chose ...@@ -829,7 +823,7 @@ exports[`Render should hide white listed cookies input when browser access chose
<br /> <br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p> </p>
</div> </InfoBox>
</div> </div>
<div <div
className="gf-form-group" className="gf-form-group"
...@@ -1098,9 +1092,7 @@ exports[`Render should render component 1`] = ` ...@@ -1098,9 +1092,7 @@ exports[`Render should render component 1`] = `
<div <div
className="gf-form-group" className="gf-form-group"
> >
<div <InfoBox>
className="grafana-info-box"
>
<h5> <h5>
Database Access Database Access
</h5> </h5>
...@@ -1117,7 +1109,7 @@ exports[`Render should render component 1`] = ` ...@@ -1117,7 +1109,7 @@ exports[`Render should render component 1`] = `
<br /> <br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p> </p>
</div> </InfoBox>
</div> </div>
<div <div
className="gf-form-group" className="gf-form-group"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment