From 2a1e130000b6c187284c39dc56e378fa7eded6be Mon Sep 17 00:00:00 2001 From: srid12 Date: Fri, 20 Sep 2019 17:11:00 +0530 Subject: [PATCH] AlertBox: Merged Alertbox into Alert (#19212) * refatoring alert box and using alert * refactoring alertbox to alert * Changed default to Error * added buttonText, onButtonClick, omRemove * Minor fix to buttons * fixed onRemove --- .../grafana-ui/src/components/Alert/Alert.tsx | 56 ++++++++---- .../src/components/Alert/_Alert.scss | 85 +++++++++++++++++++ packages/grafana-ui/src/components/index.ts | 2 +- .../src/themes/_variables.scss.tmpl.ts | 2 +- .../app/core/components/AlertBox/AlertBox.tsx | 50 ----------- .../AppNotifications/AppNotificationItem.tsx | 9 +- .../admin/ldap/LdapConnectionStatus.tsx | 4 +- public/app/features/admin/ldap/LdapPage.tsx | 11 ++- .../app/features/admin/ldap/LdapUserPage.tsx | 8 +- public/app/features/alerting/AlertTab.tsx | 6 +- .../dashboard/containers/DashboardPage.tsx | 8 +- .../dashboard/dashgrid/PanelPluginError.tsx | 7 +- public/app/features/explore/Explore.tsx | 3 +- public/app/features/plugins/PluginPage.tsx | 8 +- public/sass/_variables.generated.scss | 2 +- 15 files changed, 158 insertions(+), 103 deletions(-) create mode 100644 packages/grafana-ui/src/components/Alert/_Alert.scss delete mode 100644 public/app/core/components/AlertBox/AlertBox.tsx diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 81b7dab8ef4..c218a89b7e7 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -1,32 +1,58 @@ import React, { FC, ReactNode } from 'react'; +import classNames from 'classnames'; -interface Props { +export type AlertVariant = 'success' | 'warning' | 'error' | 'info'; + +interface AlertProps { title: string; - button?: { - text: string; - onClick: (event: React.MouseEvent) => void; - }; + buttonText?: string; + onButtonClick?: (event: React.MouseEvent) => void; + onRemove?: (event: React.MouseEvent) => void; + severity?: AlertVariant; children?: ReactNode; } -export const Alert: FC = props => { - const { title, button, children } = props; +function getIconFromSeverity(severity: AlertVariant): string { + switch (severity) { + case 'error': { + return 'fa fa-exclamation-triangle'; + } + case 'warning': { + return 'fa fa-exclamation-triangle'; + } + case 'info': { + return 'fa fa-info-circle'; + } + case 'success': { + return 'fa fa-check'; + } + default: + return ''; + } +} + +export const Alert: FC = ({ title, buttonText, onButtonClick, onRemove, children, severity = 'error' }) => { + const alertClass = classNames('alert', `alert-${severity}`); return (
-
+
- +
{title}
{children &&
{children}
}
- {button && ( -
- -
+ {/* If onRemove is specified , giving preference to onRemove */} + {onRemove && ( + + )} + {onButtonClick && ( + )}
diff --git a/packages/grafana-ui/src/components/Alert/_Alert.scss b/packages/grafana-ui/src/components/Alert/_Alert.scss new file mode 100644 index 00000000000..628d0718113 --- /dev/null +++ b/packages/grafana-ui/src/components/Alert/_Alert.scss @@ -0,0 +1,85 @@ +// +// Alerts +// -------------------------------------------------- + +// Base styles +// ------------------------- + +.alert { + padding: 15px 20px; + margin-bottom: $space-xs; + text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); + background: $alert-error-bg; + position: relative; + color: $white; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + border-radius: $border-radius; + display: flex; + flex-direction: row; + align-items: center; +} + +// Alternate styles +// ------------------------- + +.alert-success { + background: $alert-success-bg; +} + +.alert-danger, +.alert-error { + background: $alert-error-bg; +} + +.alert-info { + background: $alert-info-bg; +} + +.alert-warning { + background: $alert-warning-bg; +} + +.page-alert-list { + z-index: 8000; + min-width: 400px; + max-width: 600px; + position: fixed; + right: 10px; + top: 60px; +} + +.alert-close { + padding: 0 0 0 $space-md; + border: none; + background: none; + display: flex; + align-items: center; + .fa { + align-self: flex-end; + font-size: 21px; + color: rgba(255, 255, 255, 0.75); + } +} + +.alert-title { + font-weight: $font-weight-semi-bold; +} + +.alert-icon { + padding: 0 $space-md 0 0; + display: flex; + align-items: center; + justify-content: center; + width: 35px; + .fa { + font-size: 21px; + } +} + +.alert-body { + flex-grow: 1; +} + +.alert-icon-on-top { + align-items: flex-start; +} diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index c47bb3a10d6..a55f3f91d81 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -62,7 +62,7 @@ export { LegendPlacement, LegendDisplayMode, } from './Legend/Legend'; -export { Alert } from './Alert/Alert'; +export { Alert, AlertVariant } from './Alert/Alert'; export { GraphSeriesToggler, GraphSeriesTogglerAPI } from './Graph/GraphSeriesToggler'; export { Collapse } from './Collapse/Collapse'; export { LogLabels } from './Logs/LogLabels'; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 32e1d5db5f4..69db371f492 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -176,7 +176,7 @@ $zindex-typeahead: ${theme.zIndex.typeahead}; // $btn-padding-x: 14px !default; -$btn-padding-y: 10px !default; +$btn-padding-y: 8px !default; $btn-line-height: 1 !default; $btn-font-weight: ${theme.typography.weight.semibold} !default; diff --git a/public/app/core/components/AlertBox/AlertBox.tsx b/public/app/core/components/AlertBox/AlertBox.tsx deleted file mode 100644 index 852a1e51cfb..00000000000 --- a/public/app/core/components/AlertBox/AlertBox.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; -import { AppNotificationSeverity } from 'app/types'; - -interface Props { - title: string; - icon?: string; - body?: ReactNode; - severity: AppNotificationSeverity; - onClose?: () => void; -} - -function getIconFromSeverity(severity: AppNotificationSeverity): string { - switch (severity) { - case AppNotificationSeverity.Error: { - return 'fa fa-exclamation-triangle'; - } - case AppNotificationSeverity.Warning: { - return 'fa fa-exclamation-triangle'; - } - case AppNotificationSeverity.Info: { - return 'fa fa-info-circle'; - } - case AppNotificationSeverity.Success: { - return 'fa fa-check'; - } - default: - return ''; - } -} - -export const AlertBox: FunctionComponent = ({ title, icon, body, severity, onClose }) => { - const alertClass = classNames('alert', `alert-${severity}`); - return ( -
-
- -
-
-
{title}
- {body &&
{body}
} -
- {onClose && ( - - )} -
- ); -}; diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx index 21a7aaf5b9d..86492801057 100644 --- a/public/app/core/components/AppNotifications/AppNotificationItem.tsx +++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { AppNotification } from 'app/types'; -import { AlertBox } from '../AlertBox/AlertBox'; +import { Alert } from '@grafana/ui'; interface Props { appNotification: AppNotification; @@ -23,12 +23,11 @@ export default class AppNotificationItem extends Component { const { appNotification, onClearNotification } = this.props; return ( - onClearNotification(appNotification.id)} + children={appNotification.text} + onRemove={() => onClearNotification(appNotification.id)} /> ); } diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx index f289bb74407..f74fac6f0ab 100644 --- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx +++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; +import { Alert } from '@grafana/ui'; import { AppNotificationSeverity, LdapConnectionInfo, LdapServerInfo } from 'app/types'; interface Props { @@ -78,5 +78,5 @@ export const LdapErrorBox: FC = ({ ldapConnectionInfo
)); - return ; + return ; }; diff --git a/public/app/features/admin/ldap/LdapPage.tsx b/public/app/features/admin/ldap/LdapPage.tsx index 9f65470ff74..9ef29f6957b 100644 --- a/public/app/features/admin/ldap/LdapPage.tsx +++ b/public/app/features/admin/ldap/LdapPage.tsx @@ -2,11 +2,10 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; import { NavModel } from '@grafana/data'; -import { FormField } from '@grafana/ui'; +import { FormField, Alert } from '@grafana/ui'; import { getNavModel } from 'app/core/selectors/navModel'; import config from 'app/core/config'; import Page from 'app/core/components/Page/Page'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; import { LdapConnectionStatus } from './LdapConnectionStatus'; import { LdapSyncInfo } from './LdapSyncInfo'; import { LdapUserInfo } from './LdapUserInfo'; @@ -81,7 +80,7 @@ export class LdapPage extends PureComponent { <> {ldapError && ldapError.title && (
- +
)} @@ -100,11 +99,11 @@ export class LdapPage extends PureComponent { {userError && userError.title && (
-
)} diff --git a/public/app/features/admin/ldap/LdapUserPage.tsx b/public/app/features/admin/ldap/LdapUserPage.tsx index 5a8b99c1504..582518158e6 100644 --- a/public/app/features/admin/ldap/LdapUserPage.tsx +++ b/public/app/features/admin/ldap/LdapUserPage.tsx @@ -2,8 +2,8 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; import { NavModel } from '@grafana/data'; +import { Alert } from '@grafana/ui'; import Page from 'app/core/components/Page/Page'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; import { getNavModel } from 'app/core/selectors/navModel'; import { AppNotificationSeverity, @@ -106,11 +106,11 @@ export class LdapUserPage extends PureComponent { {userError && userError.title && (
-
)} diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx index c7e880c7dd4..d1cb27b2558 100644 --- a/public/app/features/alerting/AlertTab.tsx +++ b/public/app/features/alerting/AlertTab.tsx @@ -10,12 +10,12 @@ import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/Edit import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import StateHistory from './StateHistory'; import 'app/features/alerting/AlertTabCtrl'; +import { Alert } from '@grafana/ui'; // Types import { DashboardModel } from '../dashboard/state/DashboardModel'; import { PanelModel } from '../dashboard/state/PanelModel'; import { TestRuleResult } from './TestRuleResult'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; import { AppNotificationSeverity } from 'app/types'; interface Props { @@ -135,7 +135,7 @@ export class AlertTab extends PureComponent { if (!alert && hasTransformations) { return ( - @@ -156,7 +156,7 @@ export class AlertTab extends PureComponent { <> {alert && hasTransformations && ( - diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index d0fa1d5520a..b498e8d1747 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -14,8 +14,7 @@ import { DashboardGrid } from '../dashgrid/DashboardGrid'; import { DashNav } from '../components/DashNav'; import { SubMenu } from '../components/SubMenu'; import { DashboardSettings } from '../components/DashboardSettings'; -import { CustomScrollbar } from '@grafana/ui'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; +import { CustomScrollbar, Alert } from '@grafana/ui'; // Redux import { initDashboard } from '../state/initDashboard'; @@ -32,7 +31,6 @@ import { AppNotificationSeverity, } from 'app/types'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; - export interface Props { urlUid?: string; urlSlug?: string; @@ -242,10 +240,10 @@ export class DashboardPage extends PureComponent { return (
-
); diff --git a/public/app/features/dashboard/dashgrid/PanelPluginError.tsx b/public/app/features/dashboard/dashgrid/PanelPluginError.tsx index 3f88dcca1c9..643282f7092 100644 --- a/public/app/features/dashboard/dashgrid/PanelPluginError.tsx +++ b/public/app/features/dashboard/dashgrid/PanelPluginError.tsx @@ -2,12 +2,9 @@ import _ from 'lodash'; import React, { PureComponent, ReactNode } from 'react'; -// Components -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; - // Types import { AppNotificationSeverity } from 'app/types'; -import { PanelProps, PanelPlugin, PluginType, PanelPluginMeta } from '@grafana/ui'; +import { PanelProps, PanelPlugin, PluginType, PanelPluginMeta, Alert } from '@grafana/ui'; interface Props { title: string; @@ -29,7 +26,7 @@ class PanelPluginError extends PureComponent { return (
- +
); } diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 03ae6f32f23..deeb4445869 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -280,7 +280,8 @@ export class Explore extends React.PureComponent {
diff --git a/public/app/features/plugins/PluginPage.tsx b/public/app/features/plugins/PluginPage.tsx index 4d32c6ed645..6f83420a61e 100644 --- a/public/app/features/plugins/PluginPage.tsx +++ b/public/app/features/plugins/PluginPage.tsx @@ -8,6 +8,7 @@ import find from 'lodash/find'; import { UrlQueryMap } from '@grafana/runtime'; import { StoreState, AppNotificationSeverity } from 'app/types'; import { + Alert, PluginType, GrafanaPlugin, PluginInclude, @@ -30,7 +31,6 @@ import { PluginDashboards } from './PluginDashboards'; import { appEvents } from 'app/core/core'; import { config } from 'app/core/config'; import { ContextSrv } from '../../core/services/context_srv'; -import { AlertBox } from 'app/core/components/AlertBox/AlertBox'; export function getLoadingNav(): NavModel { const node = { @@ -141,7 +141,7 @@ class PluginPage extends PureComponent { const { plugin, nav } = this.state; if (!plugin) { - return ; + return ; } const active = nav.main.children.find(tab => tab.active); @@ -300,10 +300,10 @@ class PluginPage extends PureComponent {
{plugin.loadError && ( - Check the server startup logs for more information.
If this plugin was loaded from git, make sure it was compiled. diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 87b7d4c313d..ea4f60d132e 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -179,7 +179,7 @@ $zindex-typeahead: 1060; // $btn-padding-x: 14px !default; -$btn-padding-y: 10px !default; +$btn-padding-y: 8px !default; $btn-line-height: 1 !default; $btn-font-weight: 500 !default;