@ -212,179 +212,177 @@ const Policy = (props: PolicyComponentProps) => {
const showMore = moreCount > 0 ;
return (
< >
< Stack direction = "column" gap = { 1.5 } >
< div
className = { styles . policyWrapper ( hasFocus ) }
data - testid = { isDefaultPolicy ? 'am-root-route-container' : 'am-route-container' }
>
{ /* continueMatching and showMatchesAllLabelsWarning are mutually exclusive so the icons can't overlap */ }
{ continueMatching && < ContinueMatchingIndicator / > }
{ showMatchesAllLabelsWarning && < AllMatchesIndicator / > }
< div className = { styles . policyItemWrapper } >
< Stack direction = "column" gap = { 1 } >
{ /* Matchers and actions */ }
< div >
< Stack direction = "row" alignItems = "center" gap = { 1 } >
{ hasChildPolicies ? (
< IconButton
name = { showPolicyChildren ? 'angle-down' : 'angle-right' }
onClick = { togglePolicyChildren }
aria - label = { showPolicyChildren ? 'Collapse' : 'Expand' }
/ >
) : null }
{ isImmutablePolicy ? (
isAutogeneratedPolicyRoot ? (
< AutogeneratedRootIndicator / >
) : (
< DefaultPolicyIndicator / >
)
) : hasMatchers ? (
< Matchers matchers = { matchers ? ? [ ] } formatter = { getAmMatcherFormatter ( alertManagerSourceName ) } / >
< Stack direction = "column" gap = { 1.5 } >
< div
className = { styles . policyWrapper ( hasFocus ) }
data - testid = { isDefaultPolicy ? 'am-root-route-container' : 'am-route-container' }
>
{ /* continueMatching and showMatchesAllLabelsWarning are mutually exclusive so the icons can't overlap */ }
{ continueMatching && < ContinueMatchingIndicator / > }
{ showMatchesAllLabelsWarning && < AllMatchesIndicator / > }
< div className = { styles . policyItemWrapper } >
< Stack direction = "column" gap = { 1 } >
{ /* Matchers and actions */ }
< div >
< Stack direction = "row" alignItems = "center" gap = { 1 } >
{ hasChildPolicies ? (
< IconButton
name = { showPolicyChildren ? 'angle-down' : 'angle-right' }
onClick = { togglePolicyChildren }
aria - label = { showPolicyChildren ? 'Collapse' : 'Expand' }
/ >
) : null }
{ isImmutablePolicy ? (
isAutogeneratedPolicyRoot ? (
< AutogeneratedRootIndicator / >
) : (
< span className = { styles . metadata } >
< Trans i18nKey = "alerting.policies.no-matchers" > No matchers < / Trans >
< / span >
) }
< Spacer / >
{ /* TODO maybe we should move errors to the gutter instead? */ }
{ errors . length > 0 && < Errors errors = { errors } / > }
{ provisioned && < ProvisioningBadge / > }
< Stack direction = "row" gap = { 0.5 } >
{ ! isAutoGenerated && ! readOnly && (
< Authorize actions = { [ AlertmanagerAction . CreateNotificationPolicy ] } >
< ConditionalWrap shouldWrap = { provisioned } wrap = { ProvisionedTooltip } >
{ isDefaultPolicy ? (
< DefaultPolicyIndicator / >
)
) : hasMatchers ? (
< Matchers matchers = { matchers ? ? [ ] } formatter = { getAmMatcherFormatter ( alertManagerSourceName ) } / >
) : (
< span className = { styles . metadata } >
< Trans i18nKey = "alerting.policies.no-matchers" > No matchers < / Trans >
< / span >
) }
< Spacer / >
{ /* TODO maybe we should move errors to the gutter instead? */ }
{ errors . length > 0 && < Errors errors = { errors } / > }
{ provisioned && < ProvisioningBadge / > }
< Stack direction = "row" gap = { 0.5 } >
{ ! isAutoGenerated && ! readOnly && (
< Authorize actions = { [ AlertmanagerAction . CreateNotificationPolicy ] } >
< ConditionalWrap shouldWrap = { provisioned } wrap = { ProvisionedTooltip } >
{ isDefaultPolicy ? (
< Button
variant = "secondary"
icon = "plus"
size = "sm"
disabled = { provisioned }
type = "button"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'child' ) }
>
< Trans i18nKey = "alerting.policies.new-child" > New child policy < / Trans >
< / Button >
) : (
< Dropdown
overlay = {
< Menu >
< Menu.Item
label = "New sibling above"
icon = "arrow-up"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'above' ) }
/ >
< Menu.Item
label = "New sibling below"
icon = "arrow-down"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'below' ) }
/ >
< Menu.Divider / >
< Menu.Item
label = "New child policy"
icon = "plus"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'child' ) }
/ >
< / Menu >
}
>
< Button
variant = "secondary"
icon = "plus"
size = "sm"
variant = "secondary"
disabled = { provisioned }
icon = "angle-down"
type = "button"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'child' ) }
>
< Trans i18nKey = "alerting.policies.new-child" > New child policy < / Trans >
< Trans i18nKey = "alerting.policies.new-policy" > Add new policy < / Trans >
< / Button >
) : (
< Dropdown
overlay = {
< Menu >
< Menu.Item
label = "New sibling above"
icon = "arrow-up"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'above' ) }
/ >
< Menu.Item
label = "New sibling below"
icon = "arrow-down"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'below' ) }
/ >
< Menu.Divider / >
< Menu.Item
label = "New child policy"
icon = "plus"
onClick = { ( ) = > onAddPolicy ( currentRoute , 'child' ) }
/ >
< / Menu >
}
>
< Button
size = "sm"
variant = "secondary"
disabled = { provisioned }
icon = "angle-down"
type = "button"
>
< Trans i18nKey = "alerting.policies.new-policy" > Add new policy < / Trans >
< / Button >
< / Dropdown >
) }
< / ConditionalWrap >
< / Authorize >
) }
{ dropdownMenuActions . length > 0 && (
< Dropdown overlay = { < Menu > { dropdownMenuActions } < / Menu > } >
< MoreButton
aria - label = { isDefaultPolicy ? 'more actions for default policy' : 'more actions for policy' }
data - testid = "more-actions"
/ >
< / Dropdown >
) }
< / Stack >
< / Dropdown >
) }
< / ConditionalWrap >
< / Authorize >
) }
{ dropdownMenuActions . length > 0 && (
< Dropdown overlay = { < Menu > { dropdownMenuActions } < / Menu > } >
< MoreButton
aria - label = { isDefaultPolicy ? 'more actions for default policy' : 'more actions for policy' }
data - testid = "more-actions"
/ >
< / Dropdown >
) }
< / Stack >
< / div >
{ /* Metadata row */ }
< MetadataRow
matchingInstancesPreview = { matchingInstancesPreview }
numberOfAlertInstances = { numberOfAlertInstances }
contactPoint = { contactPoint ? ? undefined }
groupBy = { groupBy }
muteTimings = { muteTimings }
activeTimings = { activ eTimings }
timingOption s = { timingOption s }
inheritedProperties = { inheritedPropertie s }
alertManagerSourceName = { alertManagerSourceName }
receivers = { receivers }
matchingAlertGroups = { matchingAlertGroup s }
matchers = { matchers }
isDefaultPolicy = { isDefaultPolicy }
onShowAlertInstances = { onShowAlertInstances }
/ >
< / Stack >
< / div >
< / Stack >
< / div >
{ /* Metadata row */ }
< MetadataRow
matchingInstancesPreview = { matchingInstancesPreview }
numberOfAlertInstances = { numberOfAlertInstances }
contactPoint = { contactPoint ? ? undefined }
groupBy = { groupBy }
muteTimings = { muteTimings }
activeTimings = { activeTimings }
timingOptions = { timingOptions }
inheritedProperties = { inheritedProperties }
alertManagerSourceName = { alertManagerSourceName }
receivers = { receivers }
matchingAlertGroups = { matchingAlertGroups }
matchers = { matchers }
isDefaultPolicy = { isDefaultPolicy }
onShowAlertInstances = { onShowAlertInstances }
/ >
< / Stack >
< / div >
< div className = { styles . childPolicies } >
{ showPolicyChildren && (
< >
{ pageOfChildren . map ( ( child ) = > {
const childInheritedProperties = getInheritedProperties ( currentRoute , child , inheritedProperties ) ;
// This child is autogenerated if it's the autogenerated root or if it's a child of an autogenerated policy.
const isThisChildAutoGenerated = isAutoGeneratedRootAndSimplifiedEnabled ( child ) || isAutoGenerated ;
/ * p a s s t h e " r e a d O n l y " p r o p f r o m t h e p a r e n t , b e c a u s e f o r a n y c h i l d p o l i c y , i f i t s p a r e n t i t ' s n o t e d i t a b l e ,
< / div >
< div className = { styles . childPolicies } >
{ showPolicyChildren && (
< >
{ pageOfChildren . map ( ( child ) = > {
const childInheritedProperties = getInheritedProperties ( currentRoute , child , inheritedProperties ) ;
// This child is autogenerated if it's the autogenerated root or if it's a child of an autogenerated policy.
const isThisChildAutoGenerated = isAutoGeneratedRootAndSimplifiedEnabled ( child ) || isAutoGenerated ;
/ * p a s s t h e " r e a d O n l y " p r o p f r o m t h e p a r e n t , b e c a u s e f o r a n y c h i l d p o l i c y , i f i t s p a r e n t i t ' s n o t e d i t a b l e ,
then the child policy should not be editable either * /
const isThisChildReadOnly = readOnly || provisioned || isAutoGenerated ;
return (
< Policy
key = { child . id }
currentRoute = { child }
receivers = { receivers }
contactPointsState = { contactPointsState }
readOnly = { isThisChildReadOnly }
inheritedProperties = { childInheritedProperties }
onAddPolicy = { onAddPolicy }
onEditPolicy = { onEditPolicy }
onDeletePolicy = { onDeletePolicy }
onShowAlertInstances = { onShowAlertInstances }
alertManagerSourceName = { alertManagerSourceName }
routesMatchingFilters = { routesMatchingFilters }
matchingInstancesPreview = { matchingInstancesPreview }
isAutoGenerated = { isThisChildAutoGenerated }
provisioned = { provisioned }
/ >
) ;
} ) }
{ showMore && (
< Button
size = "sm"
icon = "angle-down"
variant = "secondary"
className = { styles . moreButtons }
onClick = { ( ) = > setVisibleChildPolicies ( visibleChildPolicies + POLICIES_PER_PAGE ) }
>
< Trans i18nKey = "alerting.policies.n-more-policies" count = { moreCount } >
{ { count : moreCount } } additional policies
< / Trans >
< / Button >
) }
< / >
) }
< / div >
{ showExportDrawer && < GrafanaPoliciesExporter onClose = { toggleShowExportDrawer } / > }
< / Stack >
< / >
const isThisChildReadOnly = readOnly || provisioned || isAutoGenerated ;
return (
< Policy
key = { child . id }
currentRoute = { child }
receivers = { receivers }
contactPointsState = { contactPointsState }
readOnly = { isThisChildReadOnly }
inheritedProperties = { childInheritedProperties }
onAddPolicy = { onAddPolicy }
onEditPolicy = { onEditPolicy }
onDeletePolicy = { onDeletePolicy }
onShowAlertInstances = { onShowAlertInstances }
alertManagerSourceName = { alertManagerSourceName }
routesMatchingFilters = { routesMatchingFilters }
matchingInstancesPreview = { matchingInstancesPreview }
isAutoGenerated = { isThisChildAutoGenerated }
provisioned = { provisioned }
/ >
) ;
} ) }
{ showMore && (
< Button
size = "sm"
icon = "angle-down"
variant = "secondary"
className = { styles . moreButtons }
onClick = { ( ) = > setVisibleChildPolicies ( visibleChildPolicies + POLICIES_PER_PAGE ) }
>
< Trans i18nKey = "alerting.policies.n-more-policies" count = { moreCount } >
{ { count : moreCount } } additional policies
< / Trans >
< / Button >
) }
< / >
) }
< / div >
{ showExportDrawer && < GrafanaPoliciesExporter onClose = { toggleShowExportDrawer } / > }
< / Stack >
) ;
} ;
@ -513,14 +511,12 @@ function MetadataRow({
) }
{ timingOptions && < TimingOptionsMeta timingOptions = { timingOptions } / > }
{ hasInheritedProperties && (
< >
< MetaText icon = "corner-down-right-alt" data - testid = "inherited-properties" >
< span >
< Trans i18nKey = "alerting.policies.metadata.inherited" > Inherited < / Trans >
< / span >
< InheritedProperties properties = { inheritedProperties } / >
< / MetaText >
< / >
< MetaText icon = "corner-down-right-alt" data - testid = "inherited-properties" >
< span >
< Trans i18nKey = "alerting.policies.metadata.inherited" > Inherited < / Trans >
< / span >
< InheritedProperties properties = { inheritedProperties } / >
< / MetaText >
) }
< / Stack >
< / div >
Tom Ratcliffe
2 months ago
committed by