diff --git a/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx b/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx index 0a9f20b1e0..5d012bf650 100644 --- a/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx +++ b/plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx @@ -133,7 +133,7 @@ export const SplunkOnCallCard = ({ entity }: Props) => { )} {users && ( }, formControl: { margin: theme.spacing(1), - minWidth: '100%', + minWidth: `calc(100% - ${theme.spacing(2)}px)`, + }, + targets: { + display: 'flex', + flexDirection: 'column', + width: '100%', }, }), ); @@ -91,7 +96,7 @@ export const TriggerDialog = ({ const [policyTargets, setPolicyTargets] = useState([]); const [details, setDetails] = useState(''); const [summary, setSummary] = useState(''); - const [isMultiResponder, setIsMultiResponder] = useState(''); + const [isMultiResponder, setIsMultiResponder] = useState('1'); const [ { value, loading: triggerLoading, error: triggerError }, @@ -113,7 +118,11 @@ export const TriggerDialog = ({ }), ); - const { value: policies, loading, error } = useAsync(async () => { + const { + value: policies, + loading: policiesLoaading, + error: policiesError, + } = useAsync(async () => { const policies = await api.getEscalationPolicies(); return policies; }); @@ -191,13 +200,13 @@ export const TriggerDialog = ({ automatically be amended to the alarm so that the receiver can reach out to you if necessary. - - - - Select the targets - +
+ + Select the targets + +
- Select users + Select Users - {!error && - !loading && + {!policiesError && + !policiesLoaading && policies && policies.map(policy => ( - - +
+
+ + Acknowledge Behavior + - Acknowledge Behavior