Templates tweaks (#1993)
# What this PR does - Hide timeline numbering when `isDisabled` is being sent - Fixed tooltips within expanded route for escalation chains actions - Replaced GSelect with Select to allow refreshing list manually
This commit is contained in:
Rares Mardare
GitHub
parent
aedd830184
commit
71e9237611
5 changed files with 41 additions and 28 deletions
|
|
@ -27,3 +27,7 @@
|
|||
word-break: break-word;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content--noMargin {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
|
|||
{number}
|
||||
</div>
|
||||
)}
|
||||
<div className={cx('content', contentClassName)}>{children}</div>
|
||||
<div className={cx('content', contentClassName, { 'content--noMargin': isDisabled })}>{children}</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@ import { getVar } from 'utils/DOM';
|
|||
|
||||
interface ChatOpsConnectorsProps {
|
||||
channelFilterId: ChannelFilter['id'];
|
||||
showLineNumber?: boolean;
|
||||
}
|
||||
|
||||
export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
|
||||
const { channelFilterId } = props;
|
||||
const { channelFilterId, showLineNumber = true } = props;
|
||||
|
||||
const store = useStore();
|
||||
const { telegramChannelStore } = store;
|
||||
|
|
@ -29,7 +30,7 @@ export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Timeline.Item number={0} backgroundColor={getVar('--tag-secondary')}>
|
||||
<Timeline.Item number={0} backgroundColor={getVar('--tag-secondary')} isDisabled={!showLineNumber}>
|
||||
<VerticalGroup>
|
||||
{isSlackInstalled && <SlackConnector channelFilterId={channelFilterId} />}
|
||||
{isTelegramInstalled && <TelegramConnector channelFilterId={channelFilterId} />}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,6 @@ const GSelect = observer((props: GSelectProps) => {
|
|||
|
||||
return (
|
||||
<div className={cx('root', className)}>
|
||||
{/*@ts-ignore*/}
|
||||
<Tag
|
||||
autoFocus={autoFocus}
|
||||
isSearchable={showSearch}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useReducer } from 'react';
|
||||
import React, { useEffect, useReducer } from 'react';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, ConfirmModal } from '@grafana/ui';
|
||||
import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, ConfirmModal, Select } from '@grafana/ui';
|
||||
import cn from 'classnames/bind';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
|
|
@ -13,13 +13,13 @@ import Text from 'components/Text/Text';
|
|||
import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
|
||||
import { ChatOpsConnectors } from 'containers/AlertRules/parts';
|
||||
import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
|
||||
import GSelect from 'containers/GSelect/GSelect';
|
||||
import styles from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss';
|
||||
import TeamName from 'containers/TeamName/TeamName';
|
||||
import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
|
||||
import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
|
||||
import { AlertTemplatesDTO } from 'models/alert_templates';
|
||||
import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
|
||||
import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
|
||||
import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config';
|
||||
import IntegrationHelper from 'pages/integration_2/Integration2.helper';
|
||||
import { AppFeature } from 'state/features';
|
||||
|
|
@ -71,6 +71,10 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
|
|||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
escalationChainStore.updateItems();
|
||||
}, []);
|
||||
|
||||
const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId];
|
||||
const channelFiltersTotal = Object.keys(alertReceiveChannelStore.channelFilters);
|
||||
if (!channelFilter) {
|
||||
|
|
@ -152,7 +156,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
|
|||
<IntegrationBlockItem>
|
||||
<VerticalGroup spacing="md">
|
||||
<Text type="primary">Publish to ChatOps</Text>
|
||||
<ChatOpsConnectors channelFilterId={channelFilterId} />
|
||||
<ChatOpsConnectors channelFilterId={channelFilterId} showLineNumber={false} />
|
||||
</VerticalGroup>
|
||||
</IntegrationBlockItem>
|
||||
)}
|
||||
|
|
@ -162,18 +166,21 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
|
|||
<HorizontalGroup spacing={'xs'}>
|
||||
<InlineLabel width={20}>Escalation chain</InlineLabel>
|
||||
<WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
|
||||
<GSelect
|
||||
showSearch
|
||||
modelName="escalationChainStore"
|
||||
isLoading={isRefreshingEscalationChains}
|
||||
displayField="name"
|
||||
placeholder="Select Escalation Chain"
|
||||
className={cx('select', 'control')}
|
||||
value={channelFilter.escalation_chain}
|
||||
onChange={onEscalationChainChange}
|
||||
showWarningIfEmptyValue={true}
|
||||
<Select
|
||||
isSearchable
|
||||
width={'auto'}
|
||||
icon={'list-ul'}
|
||||
menuShouldPortal
|
||||
className={cx('select', 'control')}
|
||||
placeholder="Select escalation chain"
|
||||
isLoading={isRefreshingEscalationChains}
|
||||
onChange={onEscalationChainChange}
|
||||
options={Object.keys(escalationChainStore.items).map(
|
||||
(eschalationChainId: EscalationChain['id']) => ({
|
||||
value: escalationChainStore.items[eschalationChainId].id,
|
||||
label: escalationChainStore.items[eschalationChainId].name,
|
||||
})
|
||||
)}
|
||||
value={channelFilter.escalation_chain}
|
||||
getOptionLabel={(item: SelectableValue) => {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -185,18 +192,20 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
|
|||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
></Select>
|
||||
</WithPermissionControlTooltip>
|
||||
|
||||
<Button variant={'secondary'} icon={'sync'} size={'md'} onClick={onEscalationChainsRefresh} />
|
||||
<Tooltip content={'Reload escalation chains list'} placement={'top'}>
|
||||
<Button variant={'secondary'} icon={'sync'} size={'md'} onClick={onEscalationChainsRefresh} />
|
||||
</Tooltip>
|
||||
|
||||
<PluginLink className={cx('hover-button')} target="_blank" query={escalationChainRedirectObj}>
|
||||
<Button
|
||||
variant={'secondary'}
|
||||
tooltip={channelFilter.escalation_chain ? 'Edit escalation chain' : 'Add escalation chain'}
|
||||
icon={'external-link-alt'}
|
||||
size={'md'}
|
||||
/>
|
||||
<Tooltip
|
||||
placement={'top'}
|
||||
content={channelFilter.escalation_chain ? 'Edit escalation chain' : 'Add an escalation chain'}
|
||||
>
|
||||
<Button variant={'secondary'} icon={'external-link-alt'} size={'md'} />
|
||||
</Tooltip>
|
||||
</PluginLink>
|
||||
|
||||
{channelFilter.escalation_chain && (
|
||||
|
|
@ -240,7 +249,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
|
|||
await alertReceiveChannelStore.deleteChannelFilter(routeIdForDeletion);
|
||||
}
|
||||
|
||||
function onEscalationChainChange(value: string) {
|
||||
function onEscalationChainChange({ value }) {
|
||||
alertReceiveChannelStore
|
||||
.saveChannelFilter(channelFilterId, {
|
||||
escalation_chain: value,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue