Alerting: Add Copy link to Alert on View rule page (#37967)

* add button to page

* add url to getText

* reorder imports

* build url function

* remove log

* encode
This commit is contained in:
Peter Holmberg 2021-08-18 14:25:56 +02:00 committed by GitHub
parent 0819d15942
commit a7b22a73b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 7 deletions

View File

@ -14,7 +14,7 @@ export default {
page: mdx,
},
controls: {
exclude: ['size', 'variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'],
exclude: ['variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'],
},
},
} as Meta;
@ -32,6 +32,7 @@ const Wrapper: Story<StoryProps> = (args) => {
<div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
<ClipboardButton
variant="secondary"
size={args.size}
getText={() => args.inputText}
onClipboardCopy={() => setCopyMessage(clipboardCopyMessage)}
>
@ -47,4 +48,5 @@ export const CopyToClipboard = Wrapper.bind({});
CopyToClipboard.args = {
inputText: 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only',
buttonText: 'Copy to clipboard',
size: 'md',
};

View File

@ -1,17 +1,19 @@
import { css } from '@emotion/css';
import { GrafanaTheme2, urlUtil } from '@grafana/data';
import { Button, ConfirmModal, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
import React, { FC, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { css } from '@emotion/css';
import { AppEvents, GrafanaTheme2, urlUtil } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Button, ConfirmModal, ClipboardButton, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv';
import { appEvents } from 'app/core/core';
import { useIsRuleEditable } from '../../hooks/useIsRuleEditable';
import { deleteRuleAction } from '../../state/actions';
import { Annotation } from '../../utils/constants';
import { getRulesSourceName, isCloudRulesSource } from '../../utils/datasource';
import { createExploreLink, createViewLink } from '../../utils/misc';
import * as ruleId from '../../utils/rule-id';
import { deleteRuleAction } from '../../state/actions';
import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
interface Props {
rule: CombinedRule;
@ -46,6 +48,15 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
}
};
const buildShareUrl = () => {
if (isCloudRulesSource(rulesSource)) {
const ruleUrl = `${encodeURIComponent(rulesSource.name)}/${encodeURIComponent(rule.name)}`;
return `${config.appUrl}${config.appSubUrl ? '/' + config.appSubUrl : ''}alerting/${ruleUrl}/find`;
}
return window.location.href.split('?')[0];
};
// explore does not support grafana rule queries atm
if (isCloudRulesSource(rulesSource) && contextSrv.isEditor) {
leftButtons.push(
@ -135,6 +146,24 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
returnTo,
});
if (isViewMode) {
rightButtons.push(
<ClipboardButton
onClipboardCopy={() => {
appEvents.emit(AppEvents.alertSuccess, ['URL copied!']);
}}
onClipboardError={(e) => {
appEvents.emit(AppEvents.alertError, ['Error while copying URL', e.text]);
}}
className={style.button}
size="sm"
getText={buildShareUrl}
>
Copy link to rule
</ClipboardButton>
);
}
rightButtons.push(
<LinkButton className={style.button} size="xs" key="edit" variant="secondary" icon="pen" href={editURL}>
Edit