Skip to content

G
gitlab-ce
Commit da672b72 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Brandon Labuschagne
Browse files
Options

Increase rule escalation rule arrow for each next rule

parent 5127af3d
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 104 deletions
app/assets/stylesheets/page_bundles/escalation_policies.scss
View file @ da672b72
...@@ -16,9 +16,6 @@ $stroke-size: 1px; ...@@ -16,9 +16,6 @@ $stroke-size: 1px;
.right-arrow { .right-arrow {
@include gl-relative; @include gl-relative;
@include gl-mx-5;
@include gl-display-inline-block;
@include gl-vertical-align-middle;
height: $stroke-size; height: $stroke-size;
background-color: var(--gray-900, $gray-900); background-color: var(--gray-900, $gray-900);
min-width: $gl-spacing-scale-7; min-width: $gl-spacing-scale-7;
...@@ -27,7 +24,6 @@ $stroke-size: 1px; ...@@ -27,7 +24,6 @@ $stroke-size: 1px;
@include gl-absolute; @include gl-absolute;
top: -2*$stroke-size; top: -2*$stroke-size;
left: calc(100% - #{5*$stroke-size}); left: calc(100% - #{5*$stroke-size});
@include gl-display-inline-block;
@include gl-p-1; @include gl-p-1;
@include gl-border-solid; @include gl-border-solid;
border-width: 0 $stroke-size $stroke-size 0; border-width: 0 $stroke-size $stroke-size 0;
...@@ -35,3 +31,24 @@ $stroke-size: 1px; ...@@ -35,3 +31,24 @@ $stroke-size: 1px;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
} }
.escalation-rule-row {
@media (max-width: $breakpoint-lg) {
@include gl-flex-wrap;
}
}
.rule-condition {
@media (min-width: $breakpoint-lg) {
flex-basis: 25%;
flex-shrink: 0;
}
@media (max-width: $breakpoint-lg) {
@include gl-w-full;
}
}
.rule-action {
min-width: 0;
}
ee/app/assets/javascripts/escalation_policies/components/escalation_policy.vue
View file @ da672b72
...@@ -11,7 +11,7 @@ import { ...@@ -11,7 +11,7 @@ import {
GlToken, GlToken,
GlAvatar, GlAvatar,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { s__, __ } from '~/locale'; import { s__, __, sprintf } from '~/locale';
import { import {
ACTIONS, ACTIONS,
ALERT_STATUSES, ALERT_STATUSES,
...@@ -26,8 +26,11 @@ import DeleteEscalationPolicyModal from './delete_escalation_policy_modal.vue'; ...@@ -26,8 +26,11 @@ import DeleteEscalationPolicyModal from './delete_escalation_policy_modal.vue';
export const i18n = { export const i18n = {
editPolicy: s__('EscalationPolicies|Edit escalation policy'), editPolicy: s__('EscalationPolicies|Edit escalation policy'),
deletePolicy: s__('EscalationPolicies|Delete escalation policy'), deletePolicy: s__('EscalationPolicies|Delete escalation policy'),
escalationRule: s__( escalationRuleCondition: s__(
'EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{scheduleOrUser}', 'EscalationPolicies|%{clockIcon} IF alert is not %{alertStatus} in %{minutes}',
),
escalationRuleAction: s__(
'EscalationPolicies|%{notificationIcon} THEN %{doAction} %{forScheduleOrUser}',
), ),
minutes: s__('EscalationPolicies|mins'), minutes: s__('EscalationPolicies|mins'),
noRules: s__('EscalationPolicies|This policy has no escalation rules.'), noRules: s__('EscalationPolicies|This policy has no escalation rules.'),
...@@ -105,6 +108,21 @@ export default { ...@@ -105,6 +108,21 @@ export default {
: ACTIONS[EMAIL_USER] : ACTIONS[EMAIL_USER]
).toLowerCase(); ).toLowerCase();
}, },
getArrowLength(index) {
// each next rule arrow's length will be +4% of the container width
// the first arrow's length is 4% and the 10th is 40%
const length = (index + 1) * 4;
return `${length}%`;
},
getActionTooltip(rule) {
return sprintf(i18n.escalationRuleAction, {
notificationIcon: '',
doAction: this.getActionName(rule),
forScheduleOrUser: this.hasEscalationSchedule(rule)
? rule.oncallSchedule.name
: rule.user.name,
});
},
}, },
}; };
</script> </script>
...@@ -166,38 +184,52 @@ export default { ...@@ -166,38 +184,52 @@ export default {
v-for="(rule, ruleIndex) in policy.rules" v-for="(rule, ruleIndex) in policy.rules"
:key="rule.id" :key="rule.id"
:class="{ 'gl-mb-5': ruleIndex !== policy.rules.length - 1 }" :class="{ 'gl-mb-5': ruleIndex !== policy.rules.length - 1 }"
class="gl-display-flex gl-align-items-center" class="gl-display-flex gl-align-items-center escalation-rule-row"
> >
<gl-icon name="clock" class="gl-mr-3" /> <span class="rule-condition gl-md-w-full">
<gl-sprintf :message="$options.i18n.escalationRule"> <gl-sprintf :message="$options.i18n.escalationRuleCondition">
<template #alertStatus> <template #clockIcon>
{{ $options.ALERT_STATUSES[rule.status].toLowerCase() }} <gl-icon name="clock" class="gl-mr-3" />
</template> </template>
<template #minutes> <template #alertStatus>
<span class="gl-font-weight-bold"> {{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
&nbsp;{{ rule.elapsedTimeMinutes }} {{ $options.i18n.minutes }} </template>
</span> <template #minutes>
</template> <span class="gl-font-weight-bold">
<template #then> {{ rule.elapsedTimeMinutes }}&nbsp;{{ $options.i18n.minutes }}
<span class="right-arrow"> </span>
<i class="right-arrow-head"></i> </template>
</span> </gl-sprintf>
<gl-icon name="notifications" class="gl-mr-3" /> </span>
</template>
<template #doAction> <span
{{ getActionName(rule) }} class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
&nbsp; :style="{ width: getArrowLength(ruleIndex) }"
</template> >
<template #scheduleOrUser> <i class="right-arrow-head"></i>
<span v-if="hasEscalationSchedule(rule)" class="gl-font-weight-bold"> </span>
{{ rule.oncallSchedule.name }}
</span> <span class="gl-display-flex gl-align-items-center rule-action">
<gl-token v-else-if="hasEscalationUser(rule)" view-only> <span v-gl-tooltip class="gl-text-truncate" :title="getActionTooltip(rule)">
<gl-avatar :src="rule.user.avatarUrl" :size="16" /> <gl-sprintf :message="$options.i18n.escalationRuleAction">
{{ rule.user.name }} <template #notificationIcon>
</gl-token> <gl-icon name="notifications" class="gl-mr-3" />
</template> </template>
</gl-sprintf> <template #doAction>
{{ getActionName(rule) }}
</template>
<template #forScheduleOrUser>
<span v-if="hasEscalationSchedule(rule)" class="gl-font-weight-bold">
{{ rule.oncallSchedule.name }}
</span>
<gl-token v-else-if="hasEscalationUser(rule)" view-only>
<gl-avatar :src="rule.user.avatarUrl" :size="16" />
{{ rule.user.name }}
</gl-token>
</template>
</gl-sprintf>
</span>
</span>
</div> </div>
</template> </template>
</div> </div>
......
ee/spec/frontend/escalation_policies/__snapshots__/escalation_policy_spec.js.snap
View file @ da672b72
...@@ -24,101 +24,127 @@ exports[`EscalationPolicy renders a policy with rules 1`] = ` ...@@ -24,101 +24,127 @@ exports[`EscalationPolicy renders a policy with rules 1`] = `
class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5" class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-mb-5" class="gl-display-flex gl-align-items-center escalation-rule-row gl-mb-5"
> >
<gl-icon-stub
class="gl-mr-3"
name="clock"
size="16"
/>
IF alert is not
acknowledged
in
<span <span
class="gl-font-weight-bold" class="rule-condition gl-md-w-full"
> >
<gl-icon-stub
 1 mins class="gl-mr-3"
name="clock"
size="16"
/>
IF alert is not
acknowledged
in
<span
class="gl-font-weight-bold"
>
1 mins
</span>
</span> </span>
<span <span
class="right-arrow" class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
style="width: 4%;"
> >
<i <i
class="right-arrow-head" class="right-arrow-head"
/> />
</span> </span>
<gl-icon-stub
class="gl-mr-3"
name="notifications"
size="16"
/>
THEN
email on-call user in schedule
 
<span <span
class="gl-font-weight-bold" class="gl-display-flex gl-align-items-center rule-action"
> >
<span
Schedule to fill in class="gl-text-truncate"
title=" THEN email on-call user in schedule Schedule to fill in"
>
<gl-icon-stub
class="gl-mr-3"
name="notifications"
size="16"
/>
THEN
email on-call user in schedule
<span
class="gl-font-weight-bold"
>
Schedule to fill in
</span>
</span>
</span> </span>
</div> </div>
<div <div
class="gl-display-flex gl-align-items-center" class="gl-display-flex gl-align-items-center escalation-rule-row"
> >
<gl-icon-stub
class="gl-mr-3"
name="clock"
size="16"
/>
IF alert is not
resolved
in
<span <span
class="gl-font-weight-bold" class="rule-condition gl-md-w-full"
> >
<gl-icon-stub
 2 mins class="gl-mr-3"
name="clock"
size="16"
/>
IF alert is not
resolved
in
<span
class="gl-font-weight-bold"
>
2 mins
</span>
</span> </span>
<span <span
class="right-arrow" class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
style="width: 8%;"
> >
<i <i
class="right-arrow-head" class="right-arrow-head"
/> />
</span> </span>
<gl-icon-stub <span
class="gl-mr-3" class="gl-display-flex gl-align-items-center rule-action"
name="notifications"
size="16"
/>
THEN
email user
 
<gl-token-stub
variant="default"
viewonly="true"
> >
<gl-avatar-stub <span
alt="avatar" class="gl-text-truncate"
entityid="0" title=" THEN email user Lena"
entityname="" >
shape="circle" <gl-icon-stub
size="16" class="gl-mr-3"
src="avatar.com/lena.png" name="notifications"
/> size="16"
/>
Lena THEN
email user
<gl-token-stub
variant="default"
viewonly="true"
>
<gl-avatar-stub
alt="avatar"
entityid="0"
entityname=""
shape="circle"
size="16"
src="avatar.com/lena.png"
/>
</gl-token-stub> Lena
</gl-token-stub>
</span>
</span>
</div> </div>
</div> </div>
</gl-collapse-stub> </gl-collapse-stub>
......
locale/gitlab.pot
View file @ da672b72
...@@ -13438,6 +13438,12 @@ msgstr "" ...@@ -13438,6 +13438,12 @@ msgstr ""
msgid "Escalation policies must have at least one rule" msgid "Escalation policies must have at least one rule"
msgstr "" msgstr ""
msgid "EscalationPolicies|%{clockIcon} IF alert is not %{alertStatus} in %{minutes}"
msgstr ""
msgid "EscalationPolicies|%{notificationIcon} THEN %{doAction} %{forScheduleOrUser}"
msgstr ""
msgid "EscalationPolicies|+ Add an additional rule" msgid "EscalationPolicies|+ Add an additional rule"
msgstr "" msgstr ""
...@@ -13486,9 +13492,6 @@ msgstr "" ...@@ -13486,9 +13492,6 @@ msgstr ""
msgid "EscalationPolicies|Failed to load oncall-schedules" msgid "EscalationPolicies|Failed to load oncall-schedules"
msgstr "" msgstr ""
msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{scheduleOrUser}"
msgstr ""
msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} minutes" msgid "EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} minutes"
msgstr "" msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7