diff --git a/CHANGELOG.md b/CHANGELOG.md index dc47517a..b521acd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Fixed + +- Fix schedules invalid dates issue ([#support-escalations/issues/8084](https://github.com/grafana/support-escalations/issues/8084)) + +## v1.3.76 (2023-12-11) + +### Fixed + +– Fix minor UI bugs + ## v1.3.75 (2023-12-08) ### Fixed diff --git a/grafana-plugin/e2e-tests/integrations/heartbeat.test.ts b/grafana-plugin/e2e-tests/integrations/heartbeat.test.ts index 374ca6ae..2ba7e16e 100644 --- a/grafana-plugin/e2e-tests/integrations/heartbeat.test.ts +++ b/grafana-plugin/e2e-tests/integrations/heartbeat.test.ts @@ -7,6 +7,7 @@ const HEARTBEAT_SETTINGS_FORM_TEST_ID = 'heartbeat-settings-form'; test.describe("updating an integration's heartbeat interval works", async () => { const _openHeartbeatSettingsForm = async (page: Page) => { await page.getByTestId('integration-settings-context-menu-wrapper').getByRole('img').click(); + await page.waitForTimeout(1000); await page.getByTestId('integration-heartbeat-settings').click(); }; @@ -29,6 +30,8 @@ test.describe("updating an integration's heartbeat interval works", async () => await heartbeatSettingsForm.getByTestId('update-heartbeat').click(); + await page.waitForTimeout(1000); + await _openHeartbeatSettingsForm(page); const heartbeatIntervalValue = await heartbeatSettingsForm diff --git a/grafana-plugin/e2e-tests/utils/schedule.ts b/grafana-plugin/e2e-tests/utils/schedule.ts index 3627109a..9c5257f6 100644 --- a/grafana-plugin/e2e-tests/utils/schedule.ts +++ b/grafana-plugin/e2e-tests/utils/schedule.ts @@ -20,13 +20,6 @@ export const createOnCallSchedule = async (page: Page, scheduleName: string, use await clickButton({ page, buttonText: 'Add rotation' }); - /** - * Drag the modal such that the "Create" button will always be visible within the viewport. We cannot scroll - * on the modal itself - * https://playwright.dev/docs/input#dragging-manually - */ - await page.locator('.ReactModal__Content .drag-handler').dragTo(page.locator('.page-header__logo')); - await selectDropdownValue({ page, selectType: 'grafanaSelect', diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 60ac20c9..33214b17 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -122,7 +122,7 @@ "@grafana/data": "^9.2.4", "@grafana/faro-web-sdk": "^1.0.0-beta4", "@grafana/faro-web-tracing": "^1.0.0-beta4", - "@grafana/labels": "~1.4.2", + "@grafana/labels": "~1.4.3", "@grafana/runtime": "9.3.0-beta1", "@grafana/ui": "^10.2.0", "@lifeomic/attempt": "^3.0.3", diff --git a/grafana-plugin/src/PluginPage.tsx b/grafana-plugin/src/PluginPage.tsx index 4497af92..5b81bdc2 100644 --- a/grafana-plugin/src/PluginPage.tsx +++ b/grafana-plugin/src/PluginPage.tsx @@ -3,8 +3,10 @@ import React from 'react'; import { PluginPageProps, PluginPage as RealPluginPage } from '@grafana/runtime'; import Header from 'navbar/Header/Header'; +import RenderConditionally from 'components/RenderConditionally/RenderConditionally'; import { pages } from 'pages'; import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers'; +import { DEFAULT_PAGE } from 'utils/consts'; interface AppPluginPageProps extends PluginPageProps { page?: string; @@ -14,10 +16,14 @@ export const PluginPage = (isTopNavbar() ? RealPlugin : PluginPageFallback) as R function RealPlugin(props: AppPluginPageProps): React.ReactNode { const { page } = props; + const isDefaultPage = page === DEFAULT_PAGE; return ( -
+ +
+ + {pages[page]?.text && !pages[page]?.hideTitle && (

{pages[page].text} diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index 68e86e61..d60a6742 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -36,12 +36,32 @@ margin-right: 4px; } +.u-margin-bottom-none { + margin-bottom: 0; +} + +.u-margin-bottom-md { + margin-bottom: 12px; +} + +.u-margin-top-xs { + margin-top: 4px; +} + .u-padding-top-md { padding-top: 12px; } -.u-margin-bottom-none { - margin-bottom: 0; +.u-padding-top-none { + padding-top: 0; +} + +.u-padding-left-lg { + padding-left: 24px; +} + +.u-padding-vertical-xs { + padding: 4px 0; } .u-pull-right { diff --git a/grafana-plugin/src/components/GForm/GForm.tsx b/grafana-plugin/src/components/GForm/GForm.tsx index fb1c77ec..fdb523f8 100644 --- a/grafana-plugin/src/components/GForm/GForm.tsx +++ b/grafana-plugin/src/components/GForm/GForm.tsx @@ -238,11 +238,13 @@ class GForm extends React.Component { error={formItem.label ? `${formItem.label} is required` : `${capitalCase(formItem.name)} is required`} description={formItem.description} > - {onFieldRender - ? onFieldRender(formItem, disabled, formControl, getValues(), (value) => - setValue(formItem.name, value) - ) - : formControl} +
+ {onFieldRender + ? onFieldRender(formItem, disabled, formControl, getValues(), (value) => + setValue(formItem.name, value) + ) + : formControl} +
); }; diff --git a/grafana-plugin/src/components/GForm/GForm.types.ts b/grafana-plugin/src/components/GForm/GForm.types.ts index bf9560a8..710c8f2d 100644 --- a/grafana-plugin/src/components/GForm/GForm.types.ts +++ b/grafana-plugin/src/components/GForm/GForm.types.ts @@ -1,3 +1,5 @@ +import { ReactNode } from 'react'; + export enum FormItemType { 'Input' = 'input', 'Password' = 'password', @@ -13,10 +15,10 @@ export enum FormItemType { export interface FormItem { name: string; - label?: string; + label?: ReactNode; type: FormItemType; disabled?: boolean; - description?: string; + description?: ReactNode; placeholder?: string; normalize?: (value: any) => any; isVisible?: (data: any) => any; diff --git a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx index c270e278..3f93ea65 100644 --- a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx +++ b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx @@ -128,7 +128,7 @@ const IntegrationContactPoint: React.FC<{ Grafana Alerting Contact point - + {isConnectOpen ? : } diff --git a/grafana-plugin/src/components/PluginLink/PluginLink.tsx b/grafana-plugin/src/components/PluginLink/PluginLink.tsx index df846bef..c3c182d9 100644 --- a/grafana-plugin/src/components/PluginLink/PluginLink.tsx +++ b/grafana-plugin/src/components/PluginLink/PluginLink.tsx @@ -14,12 +14,13 @@ interface PluginLinkProps { children: any; query?: Record; target?: string; + onClick?: () => void; } const cx = cn.bind(styles); const PluginLink: FC = (props) => { - const { children, query, disabled, className, wrap = true, target } = props; + const { children, query, disabled, className, wrap = true, target, onClick } = props; const newPath = useMemo(() => getPathFromQueryParams(query), [query]); @@ -27,11 +28,15 @@ const PluginLink: FC = (props) => { (event) => { event.stopPropagation(); - if (disabled) { + if (disabled || onClick) { event.preventDefault(); } + + if (onClick) { + onClick(); + } }, - [disabled] + [disabled, onClick] ); return ( diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.ts b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.tsx similarity index 76% rename from grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.ts rename to grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.tsx index 93fe8cce..fa5aedab 100644 --- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.ts +++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.tsx @@ -1,3 +1,7 @@ +import React from 'react'; + +import { Icon, Label, Tooltip } from '@grafana/ui'; + import { FormItem, FormItemType } from 'components/GForm/GForm.types'; import { generateAssignToTeamInputDescription } from 'utils/consts'; @@ -19,8 +23,14 @@ export const form: { name: string; fields: FormItem[] } = { }, { name: 'team', - label: 'Assign to team', - description: generateAssignToTeamInputDescription('Integrations'), + label: ( + + ), type: FormItemType.GSelect, extra: { modelName: 'grafanaTeamStore', diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx index d4000f47..cd3c62bf 100644 --- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx +++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx @@ -12,7 +12,6 @@ import { RadioButtonGroup, Select, Icon, - Label, Field, } from '@grafana/ui'; import cn from 'classnames/bind'; @@ -23,6 +22,7 @@ import Collapse from 'components/Collapse/Collapse'; import Block from 'components/GBlock/Block'; import GForm, { CustomFieldSectionRendererProps } from 'components/GForm/GForm'; import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo'; +import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; import Labels from 'containers/Labels/Labels'; import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip'; @@ -48,6 +48,7 @@ interface IntegrationFormProps { isTableView?: boolean; onHide: () => void; onSubmit: () => Promise; + navigateToAlertGroupLabels: (id: AlertReceiveChannel['id']) => void; } const IntegrationForm = observer((props: IntegrationFormProps) => { @@ -56,7 +57,7 @@ const IntegrationForm = observer((props: IntegrationFormProps) => { const labelsRef = useRef(null); - const { id, onHide, onSubmit, isTableView = true } = props; + const { id, onHide, onSubmit, isTableView = true, navigateToAlertGroupLabels } = props; const { alertReceiveChannelStore, userStore: { currentUser: user }, @@ -139,7 +140,25 @@ const IntegrationForm = observer((props: IntegrationFormProps) => { {store.hasFeature(AppFeature.Labels) && (
- + + Labels{id === 'new' ? ' will be ' : ' '}applied to the integration and inherited by alert + groups. +
+ You can modify behaviour in{' '} + {id === 'new' ? ( + 'Alert group labeling' + ) : ( + navigateToAlertGroupLabels(id)}>Alert group labels + )}{' '} + drawer. + + } + />
)} @@ -338,8 +357,10 @@ const CustomFieldSectionRenderer: React.FC = ({
- - + + Grafana Alerting Contact point + +
diff --git a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.test.ts b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.test.ts new file mode 100644 index 00000000..73c69188 --- /dev/null +++ b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.test.ts @@ -0,0 +1,41 @@ +import { getIsTooManyLabelsWarningVisible } from './IntegrationLabelsForm.helpers'; + +describe('getIsTooManyLabelsWarningVisible()', () => { + const CUSTOM_LABEL = { key: { id: 'c', name: 'c' }, value: { id: 'c', name: 'c' } }; + + it('should return false if limit is not exceeded', () => { + expect( + getIsTooManyLabelsWarningVisible( + { + inheritable: undefined, + custom: undefined, + template: null, + }, + 3 + ) + ).toBe(false); + expect( + getIsTooManyLabelsWarningVisible( + { + inheritable: { a: true, b: false }, + custom: [CUSTOM_LABEL, CUSTOM_LABEL], + template: null, + }, + 3 + ) + ).toBe(false); + }); + + it('should return true if limit is exceeded', () => { + expect( + getIsTooManyLabelsWarningVisible( + { + inheritable: { a: true, b: true }, + custom: [CUSTOM_LABEL, CUSTOM_LABEL], + template: null, + }, + 3 + ) + ).toBe(true); + }); +}); diff --git a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.ts b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.ts new file mode 100644 index 00000000..f1d9d8fd --- /dev/null +++ b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.ts @@ -0,0 +1,20 @@ +import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; + +const countNumberOfInheritedAndCustomLabels = (alert_group_labels: AlertReceiveChannel['alert_group_labels']) => { + const inheritedCount = alert_group_labels.inheritable + ? Object.keys(alert_group_labels.inheritable).filter((labelKey) => alert_group_labels.inheritable?.[labelKey]) + .length + : 0; + const customCount = alert_group_labels.custom?.length || 0; + return inheritedCount + customCount; +}; + +export const getIsTooManyLabelsWarningVisible = ( + alert_group_labels: AlertReceiveChannel['alert_group_labels'], + limit = 15 +) => countNumberOfInheritedAndCustomLabels(alert_group_labels) > limit; + +export const getIsAddBtnDisabled = ({ custom }: AlertReceiveChannel['alert_group_labels']) => { + const lastItem = custom.at(-1); + return lastItem && (lastItem?.key.id === undefined || lastItem?.value.id === undefined); +}; diff --git a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx index 9d1703c7..a83c912b 100644 --- a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx +++ b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx @@ -2,16 +2,14 @@ import React, { ChangeEvent, useCallback, useState } from 'react'; import { ServiceLabels } from '@grafana/labels'; import { + Alert, Button, Drawer, Dropdown, HorizontalGroup, - Icon, InlineSwitch, Input, - Label, Menu, - Tooltip, VerticalGroup, } from '@grafana/ui'; import cn from 'classnames/bind'; @@ -19,12 +17,18 @@ import { observer } from 'mobx-react'; import Collapse from 'components/Collapse/Collapse'; import MonacoEditor, { MONACO_LANGUAGE } from 'components/MonacoEditor/MonacoEditor'; +import PluginLink from 'components/PluginLink/PluginLink'; +import RenderConditionally from 'components/RenderConditionally/RenderConditionally'; import Text from 'components/Text/Text'; import IntegrationTemplate from 'containers/IntegrationTemplate/IntegrationTemplate'; import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; +import { LabelsErrors } from 'models/label/label.types'; import { ApiSchemas } from 'network/oncall-api/api.types'; import { useStore } from 'state/useStore'; import { openErrorNotification } from 'utils'; +import { DOCS_ROOT } from 'utils/consts'; + +import { getIsAddBtnDisabled, getIsTooManyLabelsWarningVisible } from './IntegrationLabelsForm.helpers'; import styles from './IntegrationLabelsForm.module.css'; @@ -36,15 +40,16 @@ interface IntegrationLabelsFormProps { id: AlertReceiveChannel['id']; onSubmit: () => void; onHide: () => void; - onOpenIntegraionSettings: (id: AlertReceiveChannel['id']) => void; + onOpenIntegrationSettings: (id: AlertReceiveChannel['id']) => void; } const IntegrationLabelsForm = observer((props: IntegrationLabelsFormProps) => { - const { id, onHide, onSubmit, onOpenIntegraionSettings } = props; + const { id, onHide, onSubmit, onOpenIntegrationSettings } = props; const store = useStore(); const [showTemplateEditor, setShowTemplateEditor] = useState(false); + const [customLabelsErrors, setCustomLabelsErrors] = useState([]); const [customLabelIndexToShowTemplateEditor, setCustomLabelIndexToShowTemplateEditor] = useState(undefined); const { alertReceiveChannelStore } = store; @@ -54,18 +59,22 @@ const IntegrationLabelsForm = observer((props: IntegrationLabelsFormProps) => { const [alertGroupLabels, setAlertGroupLabels] = useState(alertReceiveChannel.alert_group_labels); - const handleSave = () => { - alertReceiveChannelStore.saveAlertReceiveChannel(id, { alert_group_labels: alertGroupLabels }); - - onSubmit(); - - onHide(); + const handleSave = async () => { + try { + await alertReceiveChannelStore.saveAlertReceiveChannel(id, { alert_group_labels: alertGroupLabels }); + onSubmit(); + onHide(); + } catch (err) { + if (err.response?.data?.alert_group_labels?.custom) { + setCustomLabelsErrors(err.response.data.alert_group_labels.custom); + } + } }; const handleOpenIntegrationSettings = () => { onHide(); - onOpenIntegraionSettings(id); + onOpenIntegrationSettings(id); }; const onInheritanceChange = (keyId: ApiSchemas['LabelKey']['id']) => { @@ -77,31 +86,54 @@ const IntegrationLabelsForm = observer((props: IntegrationLabelsFormProps) => { return ( <> - + + Combination of settings that manage the labeling of alert groups. More information in{' '} + + documentation + + . + + } + onClose={onHide} + closeOnMaskClick={false} + width="640px" + > + + + We support up to 15 labels per Alert group. Please remove extra labels. +
+ Otherwise, only the first 15 labels (alphabetically sorted by keys) will be applied. + + - - - - - - + Integration labels {alertReceiveChannel.labels.length ? ( -
    - {alertReceiveChannel.labels.map((label) => ( -
  • - - - - onInheritanceChange(label.key.id)} - /> - -
    • - ))} -
+ + + Labels inherited from the integration + . This behavior can be disabled using the toggle option. + +
    + {alertReceiveChannel.labels.map((label) => ( +
  • + + + + onInheritanceChange(label.key.id)} + /> + +
    • + ))} +
+ ) : ( There are no labels to inherit yet @@ -114,14 +146,22 @@ const IntegrationLabelsForm = observer((props: IntegrationLabelsFormProps) => { { + setCustomLabelsErrors([]); + setAlertGroupLabels(val); + }} onShowTemplateEditor={setCustomLabelIndexToShowTemplateEditor} + customLabelsErrors={customLabelsErrors} /> - + - Jinja2 template to parse all labels at once + + Allows for the extraction and modification of multiple labels from the alert payload using a single + template. Supports not only dynamic values but also dynamic keys. The Jinja template must result in + valid JSON dictionary. + diff --git a/grafana-plugin/src/containers/Labels/Labels.tsx b/grafana-plugin/src/containers/Labels/Labels.tsx index b11e1d50..ef1aadfb 100644 --- a/grafana-plugin/src/containers/Labels/Labels.tsx +++ b/grafana-plugin/src/containers/Labels/Labels.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react'; import { ServiceLabels, ServiceLabelsProps } from '@grafana/labels'; -import { Field } from '@grafana/ui'; +import { Field, Label } from '@grafana/ui'; import { isEmpty } from 'lodash-es'; import { observer } from 'mobx-react'; @@ -13,11 +13,12 @@ export interface LabelsProps { value: LabelKeyValue[]; errors: any; onDataUpdate?: ServiceLabelsProps['onDataUpdate']; + description?: React.ComponentProps['description']; } const Labels = observer( forwardRef(function Labels2(props: LabelsProps, ref) { - const { value: defaultValue, errors: propsErrors, onDataUpdate } = props; + const { value: defaultValue, errors: propsErrors, onDataUpdate, description } = props; // propsErrors are 'external' caused by attaching/detaching labels to oncall entities, // state errors are errors caused by CRUD operations on labels storage @@ -103,7 +104,7 @@ const Labels = observer( return (
- + {description}
}>Labels}> = observer( - ({ errors, setValue, getValues }) => { - const { hasFeature } = useStore(); - const onDataUpdate: LabelsProps['onDataUpdate'] = (val) => setValue(WebhookFormFieldName.Labels, val); +const CustomFieldSectionRenderer: React.FC = observer(({ setValue, getValues }) => { + const { + hasFeature, + outgoingWebhookStore: { labelsFormErrors }, + } = useStore(); + const onDataUpdate: LabelsProps['onDataUpdate'] = useCallback( + (val) => setValue(WebhookFormFieldName.Labels, val), + [] + ); - return ( - - (WebhookFormFieldName.Labels) || []} - errors={errors?.[WebhookFormFieldName.Labels]} - onDataUpdate={onDataUpdate} - /> - - ); - } -); + return ( + + (WebhookFormFieldName.Labels) || []} + errors={labelsFormErrors} + onDataUpdate={onDataUpdate} + description="Labels applied to the webhook will be included in the webhook payload, along with alert group and integration labels." + /> + + ); +}); const OutgoingWebhookForm = observer((props: OutgoingWebhookFormProps) => { const history = useHistory(); @@ -93,11 +98,21 @@ const OutgoingWebhookForm = observer((props: OutgoingWebhookFormProps) => { const form = createForm(outgoingWebhookStore.outgoingWebhookPresets, hasFeature(AppFeature.Labels)); const handleSubmit = useCallback( - (data: Partial) => { - (isNewOrCopy ? outgoingWebhookStore.create(data) : outgoingWebhookStore.update(id, data)).then(() => { + async (data: Partial) => { + try { + if (isNewOrCopy) { + await outgoingWebhookStore.create(data); + } else { + await outgoingWebhookStore.update(id, data); + } + outgoingWebhookStore.setLabelsFormErrors(undefined); onHide(); onUpdate(); - }); + } catch (err) { + if (err.response?.data?.labels) { + outgoingWebhookStore.setLabelsFormErrors(err.response.data.labels); + } + } }, [id] ); diff --git a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts b/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts index e2792a61..0c08b1d3 100644 --- a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts +++ b/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts @@ -336,7 +336,7 @@ export class AlertReceiveChannelStore extends BaseStore { @action.bound @WithGlobalNotification({ success: 'Integration has been saved', failure: 'Failed to save integration' }) async saveAlertReceiveChannel(id: AlertReceiveChannel['id'], data: Partial) { - const item = await this.update(id, data); + const item = await this.update(id, data, undefined, true); this.items = { ...this.items, diff --git a/grafana-plugin/src/models/base_store.ts b/grafana-plugin/src/models/base_store.ts index 3aa9acc3..50ea6b60 100644 --- a/grafana-plugin/src/models/base_store.ts +++ b/grafana-plugin/src/models/base_store.ts @@ -20,13 +20,23 @@ export default class BaseStore { if (error.response.status >= 400 && error.response.status < 500) { const payload = error.response.data; + const text = typeof payload === 'string' ? payload : Object.keys(payload) - .map((key) => `${sentenceCase(key)}: ${payload[key]}`) + .map((key) => { + const candidate = `${sentenceCase(key)}: ${payload[key]}`; + if (candidate.includes('object Object')) { + return undefined; + } + return candidate; + }) .join('\n'); - openWarningNotification(text); + + if (text?.length) { + openWarningNotification(text); + } } throw error; diff --git a/grafana-plugin/src/models/label/label.types.ts b/grafana-plugin/src/models/label/label.types.ts index 44cbbcd0..e0fed4c3 100644 --- a/grafana-plugin/src/models/label/label.types.ts +++ b/grafana-plugin/src/models/label/label.types.ts @@ -4,3 +4,5 @@ export interface LabelKeyValue { key: ApiSchemas['LabelKey']; value: ApiSchemas['LabelValue']; } + +export type LabelsErrors = Array<{ key?: { id: string[]; name: string[] }; value?: { id: string[]; name: string[] } }>; diff --git a/grafana-plugin/src/models/outgoing_webhook/outgoing_webhook.ts b/grafana-plugin/src/models/outgoing_webhook/outgoing_webhook.ts index 9e869374..770c2d5d 100644 --- a/grafana-plugin/src/models/outgoing_webhook/outgoing_webhook.ts +++ b/grafana-plugin/src/models/outgoing_webhook/outgoing_webhook.ts @@ -1,6 +1,7 @@ import { action, observable } from 'mobx'; import BaseStore from 'models/base_store'; +import { LabelsErrors } from 'models/label/label.types'; import { makeRequest } from 'network'; import { RootStore } from 'state'; @@ -16,6 +17,9 @@ export class OutgoingWebhookStore extends BaseStore { @observable.shallow outgoingWebhookPresets: OutgoingWebhookPreset[] = []; + @observable + labelsFormErrors?: LabelsErrors; + constructor(rootStore: RootStore) { super(rootStore); @@ -106,4 +110,9 @@ export class OutgoingWebhookStore extends BaseStore { const response = await makeRequest(`/webhooks/preset_options/`, {}); this.outgoingWebhookPresets = response; } + + @action.bound + setLabelsFormErrors(errors: LabelsErrors) { + this.labelsFormErrors = errors; + } } diff --git a/grafana-plugin/src/navbar/Header/Header.module.scss b/grafana-plugin/src/navbar/Header/Header.module.scss index 78318cca..bd85bd65 100644 --- a/grafana-plugin/src/navbar/Header/Header.module.scss +++ b/grafana-plugin/src/navbar/Header/Header.module.scss @@ -4,7 +4,7 @@ .header-topnavbar { padding-top: 0; - padding-bottom: 36px; + padding-bottom: 12px; } .navbar-heading { @@ -34,6 +34,7 @@ flex-direction: row; column-gap: 8px; row-gap: 8px; + margin-left: -50px; } .irm-icon { @@ -52,3 +53,12 @@ margin-bottom: 0; } } + +.logo-container, +.page-header__img { + height: 32px; +} + +.page-header__title { + margin-bottom: 8px; +} diff --git a/grafana-plugin/src/navbar/Header/Header.tsx b/grafana-plugin/src/navbar/Header/Header.tsx index 00cae379..c7878ae5 100644 --- a/grafana-plugin/src/navbar/Header/Header.tsx +++ b/grafana-plugin/src/navbar/Header/Header.tsx @@ -23,8 +23,8 @@ const Header = observer(() => {
- - Grafana OnCall + + Grafana OnCall
{renderHeading()}
@@ -41,6 +41,7 @@ const Header = observer(() => {

Grafana OnCall

{APP_SUBTITLE}
+ = ({ onHide={() => setIsIntegrationSettingsOpen(false)} onSubmit={() => alertReceiveChannelStore.updateItem(alertReceiveChannel['id'])} id={alertReceiveChannel['id']} + navigateToAlertGroupLabels={(_id: AlertReceiveChannel['id']) => { + setIsIntegrationSettingsOpen(false); + setLabelsFormOpen(true); + }} /> )} @@ -800,7 +804,7 @@ const IntegrationActions: React.FC = ({ }} onSubmit={() => alertReceiveChannelStore.updateItem(alertReceiveChannel['id'])} id={alertReceiveChannel['id']} - onOpenIntegraionSettings={() => { + onOpenIntegrationSettings={() => { setIsIntegrationSettingsOpen(true); }} /> @@ -846,7 +850,7 @@ const IntegrationActions: React.FC = ({ {store.hasFeature(AppFeature.Labels) && (
openLabelsForm()}> - Alert group labels + Alert group labeling
)} diff --git a/grafana-plugin/src/pages/integrations/Integrations.module.scss b/grafana-plugin/src/pages/integrations/Integrations.module.scss index 69f57cad..716c2997 100644 --- a/grafana-plugin/src/pages/integrations/Integrations.module.scss +++ b/grafana-plugin/src/pages/integrations/Integrations.module.scss @@ -7,6 +7,10 @@ width: 40px; } +.title { + margin-bottom: 16px; +} + .tabsBar { margin-bottom: 24px; } diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx index b4c30e26..95af59cb 100644 --- a/grafana-plugin/src/pages/integrations/Integrations.tsx +++ b/grafana-plugin/src/pages/integrations/Integrations.tsx @@ -294,6 +294,9 @@ class Integrations extends React.Component }} onSubmit={this.update} id={alertReceiveChannelId} + navigateToAlertGroupLabels={(id: AlertReceiveChannel['id']) => { + this.setState({ alertReceiveChannelId: undefined, alertReceiveChannelIdToShowLabels: id }); + }} /> )} @@ -304,7 +307,7 @@ class Integrations extends React.Component }} onSubmit={this.update} id={alertReceiveChannelIdToShowLabels} - onOpenIntegraionSettings={(id: AlertReceiveChannel['id']) => { + onOpenIntegrationSettings={(id: AlertReceiveChannel['id']) => { this.setState({ alertReceiveChannelId: id }); }} /> @@ -495,7 +498,7 @@ class Integrations extends React.Component {store.hasFeature(AppFeature.Labels) && (
this.onLabelsEditClick(item.id)}> - Alert group labels + Alert group labeling
)} diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts index d1139fb4..ddb2de77 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts +++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts @@ -16,10 +16,13 @@ const mondayDayOffset = { }; export const getWeekStartString = () => { - if (!config.bootData.user.weekStart || config.bootData.user.weekStart === 'browser') { + const weekStart = (config.bootData.user.weekStart || '').toLowerCase(); + + if (!weekStart || weekStart === 'browser') { return 'monday'; } - return config.bootData.user.weekStart; + + return weekStart; }; export const getNow = (tz: Timezone) => { diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts index 1857c08a..34c73908 100644 --- a/grafana-plugin/src/utils/consts.ts +++ b/grafana-plugin/src/utils/consts.ts @@ -38,6 +38,7 @@ export const FARO_ENDPOINT_OPS = export const FARO_ENDPOINT_PROD = 'https://faro-collector-prod-us-central-0.grafana.net/collect/03a11ed03c3af04dcfc3be9755f2b053'; +export const DOCS_ROOT = 'https://grafana.com/docs/oncall/latest'; export const DOCS_SLACK_SETUP = 'https://grafana.com/docs/oncall/latest/open-source/#slack-setup'; export const DOCS_TELEGRAM_SETUP = 'https://grafana.com/docs/oncall/latest/notify/telegram/'; diff --git a/grafana-plugin/src/utils/decorators.ts b/grafana-plugin/src/utils/decorators.ts index 21f0c78e..dcedd8ff 100644 --- a/grafana-plugin/src/utils/decorators.ts +++ b/grafana-plugin/src/utils/decorators.ts @@ -52,7 +52,7 @@ export function WithGlobalNotification({ const open = failureType === 'error' ? openErrorNotification : openWarningNotification; const message = composeFailureMessageFn ? composeFailureMessageFn(err) : failure; open(message); - throw new Error(err); + throw err; } }; }; diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index 5fa193e7..0aec70e0 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -2027,10 +2027,10 @@ "@opentelemetry/sdk-trace-web" "^1.8.0" "@opentelemetry/semantic-conventions" "^1.8.0" -"@grafana/labels@~1.4.2": - version "1.4.2" - resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.2.tgz#3ce4fb4e06c86793df85622de9fd47793261a849" - integrity sha512-4d/+SnLxxBGCYGZI/BAtF1s6M/K5cxFmOEDmUORBs5sXTiUXHsvNXbsh1ACfcH/wCUlbypYY6FQULSAWs6pOeQ== +"@grafana/labels@~1.4.3": + version "1.4.3" + resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.3.tgz#1103ef41341c84cac8d7d7e0b36d4671d20311b6" + integrity sha512-ImmkKERHkbDqakjgFN1Tl6FmwQa+7/YTyV+G8vBtX6HlNWIPGso7glNuHOEvMdvhz1fuJgSFEQ9+nggZv1TW4g== dependencies: "@emotion/css" "^11.11.2" "@grafana/ui" "^10.0.0"