From b769a0af8f07b0b46a56670a05804c4bc7a3b6b4 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Wed, 20 May 2020 12:04:55 +0300 Subject: [PATCH] Action button refactor --- src/components/AckButton/AckButton.tsx | 13 ++++ src/components/ActionButton/ActionButton.tsx | 71 +++++++++++++++++++ .../ExploreButton/ExploreButton.tsx | 43 ++--------- src/components/index.ts | 1 + .../components/Problems/ProblemDetails.tsx | 40 ++--------- src/sass/_panel-problems.scss | 47 +----------- 6 files changed, 96 insertions(+), 119 deletions(-) create mode 100644 src/components/AckButton/AckButton.tsx create mode 100644 src/components/ActionButton/ActionButton.tsx diff --git a/src/components/AckButton/AckButton.tsx b/src/components/AckButton/AckButton.tsx new file mode 100644 index 0000000..e5d6f96 --- /dev/null +++ b/src/components/AckButton/AckButton.tsx @@ -0,0 +1,13 @@ +import React, { FC } from 'react'; +import { ActionButton } from '../ActionButton/ActionButton'; + +interface Props { + className?: string; + onClick(): void; +} + +export const AckButton: FC = ({ className, onClick }) => { + return ( + + ); +}; diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx new file mode 100644 index 0000000..d83fbe0 --- /dev/null +++ b/src/components/ActionButton/ActionButton.tsx @@ -0,0 +1,71 @@ +import React, { FC } from 'react'; +import { cx, css } from 'emotion'; +import { stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme, GrafanaThemeType } from '@grafana/data'; +import { FAIcon } from '../FAIcon/FAIcon'; +import { Tooltip } from '../Tooltip/Tooltip'; + +interface Props { + icon?: string; + width?: number; + tooltip?: string; + className?: string; + onClick(event: React.MouseEvent): void; +} + +export const ActionButton: FC = ({ icon, width, tooltip, className, children, onClick }) => { + const theme = useTheme(); + const styles = getStyles(theme); + const buttonClass = cx( + 'btn', + styles.button, + css`width: ${width || 3}rem`, + className, + ); + + let button = ( + + ); + + if (tooltip) { + button = ( + + {button} + + ); + } + + return button; +}; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + const actionBlue = theme.type === GrafanaThemeType.Light ? '#497dc0' : '#005f81'; + const hoverBlue = theme.type === GrafanaThemeType.Light ? '#456ba4' : '#354f77'; + + return { + button: css` + height: 2rem; + background-image: none; + background-color: ${actionBlue}; + border: 1px solid ${theme.colors.gray1}; + border-radius: 1px; + color: ${theme.colors.text}; + + i { + vertical-align: middle; + } + + &:hover { + background-color: ${hoverBlue}; + } + `, + icon: css` + i { + color: ${theme.colors.text}; + } + `, + }; +}); diff --git a/src/components/ExploreButton/ExploreButton.tsx b/src/components/ExploreButton/ExploreButton.tsx index ac3aaf2..2396910 100644 --- a/src/components/ExploreButton/ExploreButton.tsx +++ b/src/components/ExploreButton/ExploreButton.tsx @@ -1,13 +1,10 @@ import React, { FC } from 'react'; -import { cx, css } from 'emotion'; -import { stylesFactory, useTheme } from '@grafana/ui'; -import { GrafanaTheme, GrafanaThemeType } from '@grafana/data'; import { getLocationSrv } from '@grafana/runtime'; import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants'; import { renderUrl } from '../../panel-triggers/utils'; import { expandItemName } from '../../datasource-zabbix/utils'; -import { FAIcon } from '../FAIcon/FAIcon'; import { ProblemDTO } from '../../datasource-zabbix/types'; +import { ActionButton } from '../ActionButton/ActionButton'; interface Props { problem: ProblemDTO; @@ -15,14 +12,10 @@ interface Props { } export const ExploreButton: FC = ({ problem, panelId }) => { - const theme = useTheme(); - const styles = getStyles(theme); - const buttonClass = cx('btn', styles.button); - return ( - + openInExplore(problem, panelId)}> + Explore + ); }; @@ -59,31 +52,3 @@ const openInExplore = (problem: ProblemDTO, panelId: number) => { const url = renderUrl('/explore', { left: exploreState }); getLocationSrv().update({ path: url, query: {} }); }; - -const getStyles = stylesFactory((theme: GrafanaTheme) => { - const actionBlue = theme.type === GrafanaThemeType.Light ? '#497dc0' : '#005f81'; - return { - button: css` - width: 6rem; - height: 2rem; - background-image: none; - background-color: ${actionBlue}; - border: 1px solid darken(${actionBlue}, 6%); - border-radius: 1px; - margin-right: 1.6rem; - - i { - vertical-align: middle; - } - - &:hover { - background-color: darken(${actionBlue}, 4%); - } - `, - icon: css` - i { - color: ${theme.colors.text}; - } - `, - }; -}); diff --git a/src/components/index.ts b/src/components/index.ts index 6a2d516..767e5b0 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon'; export { FAIcon } from './FAIcon/FAIcon'; +export { AckButton } from './AckButton/AckButton'; export { ExploreButton } from './ExploreButton/ExploreButton'; export { Tooltip } from './Tooltip/Tooltip'; export { ModalController } from './Modal/ModalController'; diff --git a/src/panel-triggers/components/Problems/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx index 01cf92e..4514b3b 100644 --- a/src/panel-triggers/components/Problems/ProblemDetails.tsx +++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx @@ -8,7 +8,7 @@ import EventTag from '../EventTag'; import ProblemStatusBar from './ProblemStatusBar'; import AcknowledgesList from './AcknowledgesList'; import ProblemTimeline from './ProblemTimeline'; -import { FAIcon, ExploreButton, Tooltip, ModalController } from '../../../components'; +import { FAIcon, ExploreButton, AckButton, Tooltip, ModalController } from '../../../components'; interface ProblemDetailsProps extends RTRow { rootWidth: number; @@ -96,16 +96,16 @@ export class ProblemDetails extends PureComponent {problem.items && } - +
+ +
{problem.showAckButton &&
{({ showModal, hideModal }) => ( - { showModal(AckModal, { canClose: problem.manual_close === '1', @@ -241,33 +241,3 @@ class ProblemHosts extends PureComponent { )); } } - -interface ProblemActionButtonProps { - icon: string; - tooltip?: string; - className?: string; - onClick?: (event?) => void; -} - -class ProblemActionButton extends PureComponent { - handleClick = (event) => { - this.props.onClick(event); - } - - render() { - const { icon, tooltip, className } = this.props; - let button = ( - - ); - if (tooltip) { - button = ( - - {button} - - ); - } - return button; - } -} diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss index 9176635..d30368a 100644 --- a/src/sass/_panel-problems.scss +++ b/src/sass/_panel-problems.scss @@ -339,51 +339,8 @@ margin-left: 1.6rem; } - .problem-action-button { - &.btn { - width: 3rem; - height: 2rem; - align-items: baseline; - - background-image: none; - background-color: $action-button-color; - border: 1px solid darken($action-button-color, 6%); - border-radius: 1px; - - span { - color: $action-button-text-color; - } - - &:hover { - background-color: darken($action-button-color, 4%); - } - } - } - - .problem-explore-button { - &.btn { - width: 6rem; - height: 2rem; - - background-image: none; - background-color: $action-button-color; - border: 1px solid darken($action-button-color, 6%); - border-radius: 1px; - - margin-right: 1.6rem; - - span { - color: $action-button-text-color; - } - - i { - vertical-align: middle; - } - - &:hover { - background-color: darken($action-button-color, 4%); - } - } + .problem-actions-left { + margin-right: 1.6rem; } .problem-details-middle {