d604f9920b
* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
384 lines
18 KiB
JavaScript
384 lines
18 KiB
JavaScript
import React, {useEffect} from 'react';
|
|
import {Form, Input, SegmentSelection, Checkbox, Icon} from 'UI';
|
|
import {alertConditions as conditions} from 'App/constants';
|
|
import stl from './alertForm.module.css';
|
|
import DropdownChips from './DropdownChips';
|
|
import {validateEmail} from 'App/validate';
|
|
import cn from 'classnames';
|
|
import {useStore} from 'App/mstore'
|
|
import {observer} from 'mobx-react-lite'
|
|
import Select from 'Shared/Select';
|
|
import {Button} from "antd";
|
|
|
|
const thresholdOptions = [
|
|
{label: '15 minutes', value: 15},
|
|
{label: '30 minutes', value: 30},
|
|
{label: '1 hour', value: 60},
|
|
{label: '2 hours', value: 120},
|
|
{label: '4 hours', value: 240},
|
|
{label: '1 day', value: 1440},
|
|
];
|
|
|
|
const changeOptions = [
|
|
{label: 'change', value: 'change'},
|
|
{label: '% change', value: 'percent'},
|
|
];
|
|
|
|
const Circle = ({text}) => (
|
|
<div className="circle mr-4 w-6 h-6 rounded-full bg-gray-light flex items-center justify-center">
|
|
{text}
|
|
</div>
|
|
);
|
|
|
|
const Section = ({index, title, description, content}) => (
|
|
<div className="w-full">
|
|
<div className="flex items-start">
|
|
<Circle text={index}/>
|
|
<div>
|
|
<span className="font-medium">{title}</span>
|
|
{description && <div className="text-sm color-gray-medium">{description}</div>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ml-10">{content}</div>
|
|
</div>
|
|
);
|
|
|
|
function AlertForm(props) {
|
|
const {
|
|
slackChannels,
|
|
msTeamsChannels,
|
|
webhooks,
|
|
onDelete,
|
|
style = {height: "calc('100vh - 40px')"},
|
|
} = props;
|
|
const {alertsStore} = useStore()
|
|
const {
|
|
triggerOptions,
|
|
loading,
|
|
} = alertsStore
|
|
const instance = alertsStore.instance
|
|
const deleting = loading
|
|
|
|
const write = ({target: {value, name}}) => alertsStore.edit({[name]: value});
|
|
const writeOption = (e, {name, value}) => alertsStore.edit({[name]: value.value});
|
|
const onChangeCheck = ({target: {checked, name}}) => alertsStore.edit({[name]: checked});
|
|
|
|
useEffect(() => {
|
|
void alertsStore.fetchTriggerOptions();
|
|
}, []);
|
|
|
|
const writeQueryOption = (e, {name, value}) => {
|
|
const {query} = instance;
|
|
alertsStore.edit({query: {...query, [name]: value}});
|
|
};
|
|
|
|
const writeQuery = ({target: {value, name}}) => {
|
|
const {query} = instance;
|
|
alertsStore.edit({query: {...query, [name]: value}});
|
|
};
|
|
|
|
const metric =
|
|
instance && instance.query.left
|
|
? triggerOptions.find((i) => i.value === instance.query.left)
|
|
: null;
|
|
const unit = metric ? metric.unit : '';
|
|
const isThreshold = instance.detectionMethod === 'threshold';
|
|
|
|
return (
|
|
<Form
|
|
className={cn('pb-10', stl.wrapper)}
|
|
style={style}
|
|
onSubmit={() => props.onSubmit(instance)}
|
|
id="alert-form"
|
|
>
|
|
<div className={cn('-mx-6 px-6 pb-12')}>
|
|
<input
|
|
autoFocus={true}
|
|
className="text-lg border border-gray-light rounded w-full"
|
|
name="name"
|
|
style={{fontSize: '18px', padding: '10px', fontWeight: '600'}}
|
|
value={instance && instance.name}
|
|
onChange={write}
|
|
placeholder="Untiltled Alert"
|
|
id="name-field"
|
|
/>
|
|
<div className="mb-8"/>
|
|
<Section
|
|
index="1"
|
|
title={'What kind of alert do you want to set?'}
|
|
content={
|
|
<div>
|
|
<SegmentSelection
|
|
primary
|
|
name="detectionMethod"
|
|
className="my-3"
|
|
onSelect={(e, {name, value}) => alertsStore.edit({[name]: value})}
|
|
value={{value: instance.detectionMethod}}
|
|
list={[
|
|
{name: 'Threshold', value: 'threshold'},
|
|
{name: 'Change', value: 'change'},
|
|
]}
|
|
/>
|
|
<div className="text-sm color-gray-medium">
|
|
{isThreshold &&
|
|
'Eg. Alert me if memory.avg is greater than 500mb over the past 4 hours.'}
|
|
{!isThreshold &&
|
|
'Eg. Alert me if % change of memory.avg is greater than 10% over the past 4 hours compared to the previous 4 hours.'}
|
|
</div>
|
|
<div className="my-4"/>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<hr className="my-8"/>
|
|
|
|
<Section
|
|
index="2"
|
|
title="Condition"
|
|
content={
|
|
<div>
|
|
{!isThreshold && (
|
|
<div className="flex items-center my-3">
|
|
<label className="w-2/6 flex-shrink-0 font-normal">{'Trigger when'}</label>
|
|
<Select
|
|
className="w-4/6"
|
|
placeholder="change"
|
|
options={changeOptions}
|
|
name="change"
|
|
defaultValue={instance.change}
|
|
onChange={({value}) => writeOption(null, {name: 'change', value})}
|
|
id="change-dropdown"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center my-3">
|
|
<label className="w-2/6 flex-shrink-0 font-normal">
|
|
{isThreshold ? 'Trigger when' : 'of'}
|
|
</label>
|
|
<Select
|
|
className="w-4/6"
|
|
placeholder="Select Metric"
|
|
isSearchable={true}
|
|
options={triggerOptions}
|
|
name="left"
|
|
value={triggerOptions.find((i) => i.value === instance.query.left)}
|
|
// onChange={ writeQueryOption }
|
|
onChange={({value}) =>
|
|
writeQueryOption(null, {name: 'left', value: value.value})
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center my-3">
|
|
<label className="w-2/6 flex-shrink-0 font-normal">{'is'}</label>
|
|
<div className="w-4/6 flex items-center">
|
|
<Select
|
|
placeholder="Select Condition"
|
|
options={conditions}
|
|
name="operator"
|
|
defaultValue={instance.query.operator}
|
|
// onChange={ writeQueryOption }
|
|
onChange={({value}) =>
|
|
writeQueryOption(null, {name: 'operator', value: value.value})
|
|
}
|
|
/>
|
|
{unit && (
|
|
<>
|
|
<Input
|
|
className="px-4"
|
|
style={{marginRight: '31px'}}
|
|
// label={{ basic: true, content: unit }}
|
|
// labelPosition='right'
|
|
name="right"
|
|
value={instance.query.right}
|
|
onChange={writeQuery}
|
|
placeholder="E.g. 3"
|
|
/>
|
|
<span className="ml-2">{'test'}</span>
|
|
</>
|
|
)}
|
|
{!unit && (
|
|
<Input
|
|
wrapperClassName="ml-2"
|
|
// className="pl-4"
|
|
name="right"
|
|
value={instance.query.right}
|
|
onChange={writeQuery}
|
|
placeholder="Specify value"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center my-3">
|
|
<label className="w-2/6 flex-shrink-0 font-normal">{'over the past'}</label>
|
|
<Select
|
|
className="w-2/6"
|
|
placeholder="Select timeframe"
|
|
options={thresholdOptions}
|
|
name="currentPeriod"
|
|
defaultValue={instance.currentPeriod}
|
|
// onChange={ writeOption }
|
|
onChange={({value}) => writeOption(null, {name: 'currentPeriod', value})}
|
|
/>
|
|
</div>
|
|
{!isThreshold && (
|
|
<div className="flex items-center my-3">
|
|
<label className="w-2/6 flex-shrink-0 font-normal">
|
|
{'compared to previous'}
|
|
</label>
|
|
<Select
|
|
className="w-2/6"
|
|
placeholder="Select timeframe"
|
|
options={thresholdOptions}
|
|
name="previousPeriod"
|
|
defaultValue={instance.previousPeriod}
|
|
// onChange={ writeOption }
|
|
onChange={({value}) => writeOption(null, {name: 'previousPeriod', value})}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<hr className="my-8"/>
|
|
|
|
<Section
|
|
index="3"
|
|
title="Notify Through"
|
|
description="You'll be noticed in app notifications. Additionally opt in to receive alerts on:"
|
|
content={
|
|
<div className="flex flex-col">
|
|
<div className="flex items-center my-4">
|
|
<Checkbox
|
|
name="slack"
|
|
className="mr-8"
|
|
type="checkbox"
|
|
checked={instance.slack}
|
|
onClick={onChangeCheck}
|
|
label="Slack"
|
|
/>
|
|
<Checkbox
|
|
name="msteams"
|
|
className="mr-8"
|
|
type="checkbox"
|
|
checked={instance.msteams}
|
|
onClick={onChangeCheck}
|
|
label="MS Teams"
|
|
/>
|
|
<Checkbox
|
|
name="email"
|
|
type="checkbox"
|
|
checked={instance.email}
|
|
onClick={onChangeCheck}
|
|
className="mr-8"
|
|
label="Email"
|
|
/>
|
|
<Checkbox
|
|
name="webhook"
|
|
type="checkbox"
|
|
checked={instance.webhook}
|
|
onClick={onChangeCheck}
|
|
label="Webhook"
|
|
/>
|
|
</div>
|
|
|
|
{instance.slack && (
|
|
<div className="flex items-start my-4">
|
|
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Slack'}</label>
|
|
<div className="w-4/6">
|
|
<DropdownChips
|
|
fluid
|
|
selected={instance.slackInput}
|
|
options={slackChannels}
|
|
placeholder="Select Channel"
|
|
onChange={(selected) => alertsStore.edit({slackInput: selected})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{instance.msteams && (
|
|
<div className="flex items-start my-4">
|
|
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'MS Teams'}</label>
|
|
<div className="w-4/6">
|
|
<DropdownChips
|
|
fluid
|
|
selected={instance.msteamsInput}
|
|
options={msTeamsChannels}
|
|
placeholder="Select Channel"
|
|
onChange={(selected) => alertsStore.edit({msteamsInput: selected})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{instance.email && (
|
|
<div className="flex items-start my-4">
|
|
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
|
|
<div className="w-4/6">
|
|
<DropdownChips
|
|
textFiled
|
|
validate={validateEmail}
|
|
selected={instance.emailInput}
|
|
placeholder="Type and press Enter key"
|
|
onChange={(selected) => alertsStore.edit({emailInput: selected})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{instance.webhook && (
|
|
<div className="flex items-start my-4">
|
|
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
|
|
<DropdownChips
|
|
fluid
|
|
selected={instance.webhookInput}
|
|
options={webhooks}
|
|
placeholder="Select Webhook"
|
|
onChange={(selected) => alertsStore.edit({webhookInput: selected})}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center justify-between absolute bottom-0 left-0 right-0 p-6 border-t z-10 bg-white">
|
|
<div className="flex items-center">
|
|
<Button
|
|
loading={loading}
|
|
type="primary"
|
|
htmlType="submit"
|
|
disabled={loading || !instance.validate()}
|
|
id="submit-button"
|
|
>
|
|
{instance.exists() ? 'Update' : 'Create'}
|
|
</Button>
|
|
<div className="mx-1"/>
|
|
<Button onClick={props.onClose}>Cancel</Button>
|
|
</div>
|
|
<div>
|
|
{instance.exists() && (
|
|
<Button
|
|
hover
|
|
primary="text"
|
|
loading={deleting}
|
|
type="button"
|
|
onClick={() => onDelete(instance)}
|
|
id="trash-button"
|
|
>
|
|
<Icon name="trash" color="gray-medium" size="18"/>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default observer(AlertForm);
|