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;
.right-arrow {
@include gl-relative;
@include gl-mx-5;
@include gl-display-inline-block;
@include gl-vertical-align-middle;
height: $stroke-size;
background-color: var(--gray-900, $gray-900);
min-width: $gl-spacing-scale-7;
......@@ -27,7 +24,6 @@ $stroke-size: 1px;
@include gl-absolute;
top: -2*$stroke-size;
left: calc(100% - #{5*$stroke-size});
@include gl-display-inline-block;
@include gl-p-1;
@include gl-border-solid;
border-width: 0 $stroke-size $stroke-size 0;
......@@ -35,3 +31,24 @@ $stroke-size: 1px;
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 {
GlToken,
GlAvatar,
} from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { s__, __, sprintf } from '~/locale';
import {
ACTIONS,
ALERT_STATUSES,
......@@ -26,8 +26,11 @@ import DeleteEscalationPolicyModal from './delete_escalation_policy_modal.vue';
export const i18n = {
editPolicy: s__('EscalationPolicies|Edit escalation policy'),
deletePolicy: s__('EscalationPolicies|Delete escalation policy'),
escalationRule: s__(
'EscalationPolicies|IF alert is not %{alertStatus} in %{minutes} %{then} THEN %{doAction} %{scheduleOrUser}',
escalationRuleCondition: s__(
'EscalationPolicies|%{clockIcon} IF alert is not %{alertStatus} in %{minutes}',
),
escalationRuleAction: s__(
'EscalationPolicies|%{notificationIcon} THEN %{doAction} %{forScheduleOrUser}',
),
minutes: s__('EscalationPolicies|mins'),
noRules: s__('EscalationPolicies|This policy has no escalation rules.'),
......@@ -105,6 +108,21 @@ export default {
: ACTIONS[EMAIL_USER]
).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>
......@@ -166,38 +184,52 @@ export default {
v-for="(rule, ruleIndex) in policy.rules"
:key="rule.id"
: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" />
<gl-sprintf :message="$options.i18n.escalationRule">
<template #alertStatus>
{{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
</template>
<template #minutes>
<span class="gl-font-weight-bold">
&nbsp;{{ rule.elapsedTimeMinutes }} {{ $options.i18n.minutes }}
</span>
</template>
<template #then>
<span class="right-arrow">
<i class="right-arrow-head"></i>
</span>
<gl-icon name="notifications" class="gl-mr-3" />
</template>
<template #doAction>
{{ getActionName(rule) }}
&nbsp;
</template>
<template #scheduleOrUser>
<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 class="rule-condition gl-md-w-full">
<gl-sprintf :message="$options.i18n.escalationRuleCondition">
<template #clockIcon>
<gl-icon name="clock" class="gl-mr-3" />
</template>
<template #alertStatus>
{{ $options.ALERT_STATUSES[rule.status].toLowerCase() }}
</template>
<template #minutes>
<span class="gl-font-weight-bold">
{{ rule.elapsedTimeMinutes }}&nbsp;{{ $options.i18n.minutes }}
</span>
</template>
</gl-sprintf>
</span>
<span
class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
:style="{ width: getArrowLength(ruleIndex) }"
>
<i class="right-arrow-head"></i>
</span>
<span class="gl-display-flex gl-align-items-center rule-action">
<span v-gl-tooltip class="gl-text-truncate" :title="getActionTooltip(rule)">
<gl-sprintf :message="$options.i18n.escalationRuleAction">
<template #notificationIcon>
<gl-icon name="notifications" class="gl-mr-3" />
</template>
<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>
</template>
</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`] = `
class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5"
>
<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
class="gl-font-weight-bold"
class="rule-condition gl-md-w-full"
>
 1 mins
<gl-icon-stub
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
class="right-arrow"
class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
style="width: 4%;"
>
<i
class="right-arrow-head"
/>
</span>
<gl-icon-stub
class="gl-mr-3"
name="notifications"
size="16"
/>
THEN
email on-call user in schedule
 
<span
class="gl-font-weight-bold"
class="gl-display-flex gl-align-items-center rule-action"
>
Schedule to fill in
<span
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>
</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
class="gl-font-weight-bold"
class="rule-condition gl-md-w-full"
>
 2 mins
<gl-icon-stub
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
class="right-arrow"
class="right-arrow gl-display-none gl-lg-display-block gl-flex-shrink-0 gl-mx-5"
style="width: 8%;"
>
<i
class="right-arrow-head"
/>
</span>
<gl-icon-stub
class="gl-mr-3"
name="notifications"
size="16"
/>
THEN
email user
 
<gl-token-stub
variant="default"
viewonly="true"
<span
class="gl-display-flex gl-align-items-center rule-action"
>
<gl-avatar-stub
alt="avatar"
entityid="0"
entityname=""
shape="circle"
size="16"
src="avatar.com/lena.png"
/>
Lena
<span
class="gl-text-truncate"
title=" THEN email user Lena"
>
<gl-icon-stub
class="gl-mr-3"
name="notifications"
size="16"
/>
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>
</gl-collapse-stub>
......
locale/gitlab.pot
View file @ da672b72
......@@ -13438,6 +13438,12 @@ msgstr ""
msgid "Escalation policies must have at least one rule"
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"
msgstr ""
......@@ -13486,9 +13492,6 @@ msgstr ""
msgid "EscalationPolicies|Failed to load oncall-schedules"
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"
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