AlertGroups.98ab02c233dab193b78e.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. "use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2415],{2842:(e,s,t)=>{t.r(s),t.d(s,{default:()=>Y});var r=t(36636),a=t(68404),n=t(18745),l=t(69783),i=t(26011),o=t(40256),c=t(71308),d=t(10331),u=t(94322),p=t(91045),g=t(43215),m=t(29e3),h=t(82344),b=t(61959),x=t(58170),j=t(82969),f=t(19462),v=t(39357),y=t(212),S=t(53262),N=t(45916);const k=e=>{let{alert:s,alertManagerSourceName:t}=e;const r=(0,l.useStyles2)(C),a=(0,j.QX)(t),n=!(0,f.HY)(t)||b.Vt.hasPermission(x.bW.AlertingRuleRead);return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsxs)("div",{className:r.actionsRow,children:[(0,N.jsxs)(S.q,{actions:[a.update,a.create],fallback:b.Vt.isEditor,children:[s.status.state===d.Z9.Suppressed&&(0,N.jsx)(l.LinkButton,{href:`${(0,v.eQ)("/alerting/silences",t)}&silenceIds=${s.status.silencedBy.join(",")}`,className:r.button,icon:"bell",size:"sm",children:"Manage silences"}),s.status.state===d.Z9.Active&&(0,N.jsx)(l.LinkButton,{href:(0,v.VN)(t,s.labels),className:r.button,icon:"bell-slash",size:"sm",children:"Silence"})]}),n&&s.generatorURL&&(0,N.jsx)(l.LinkButton,{className:r.button,href:s.generatorURL,icon:"chart-line",size:"sm",children:"See source"})]}),Object.entries(s.annotations).map((e=>{let[s,t]=e;return(0,N.jsx)(y.a,{annotationKey:s,value:t},s)})),(0,N.jsxs)("div",{className:r.receivers,children:["Receivers:"," ",s.receivers.map((e=>{let{name:s}=e;return s})).filter((e=>!!e)).join(", ")]})]})},C=e=>({button:r.css`
  2. & + & {
  3. margin-left: ${e.spacing(1)};
  4. }
  5. `,actionsRow:r.css`
  6. padding: ${e.spacing(2,0)} !important;
  7. border-bottom: 1px solid ${e.colors.border.medium};
  8. `,receivers:r.css`
  9. padding: ${e.spacing(1,0)};
  10. `}),$=e=>{let{alerts:s,alertManagerSourceName:t}=e;const r=(0,l.useStyles2)(w),n=(0,a.useMemo)((()=>[{id:"state",label:"State",renderCell:e=>{let{data:s}=e;return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(h.G,{state:s.status.state}),(0,N.jsxs)("span",{className:r.duration,children:["for"," ",(0,g.intervalToAbbreviatedDurationString)({start:new Date(s.startsAt),end:new Date(s.endsAt)})]})]})},size:"220px"},{id:"labels",label:"Labels",renderCell:e=>{let{data:{labels:s}}=e;return(0,N.jsx)(u.s,{className:r.labels,labels:s})},size:1}]),[r]),i=(0,a.useMemo)((()=>s.map((e=>({id:e.fingerprint,data:e})))),[s]);return(0,N.jsx)("div",{className:r.tableWrapper,"data-testid":"alert-group-table",children:(0,N.jsx)(m.F,{cols:n,items:i,isExpandable:!0,renderExpandedContent:e=>{let{data:s}=e;return(0,N.jsx)(k,{alert:s,alertManagerSourceName:t})}})})},w=e=>({tableWrapper:r.css`
  11. margin-top: ${e.spacing(3)};
  12. ${e.breakpoints.up("md")} {
  13. margin-left: ${e.spacing(4.5)};
  14. }
  15. `,duration:r.css`
  16. margin-left: ${e.spacing(1)};
  17. font-size: ${e.typography.bodySmall.fontSize};
  18. `,labels:r.css`
  19. padding-bottom: 0;
  20. `});var O,M=t(8861);const A=e=>{let{alertManagerSourceName:s,group:t}=e;const[r,n]=(0,a.useState)(!0),i=(0,l.useStyles2)(G);return(0,N.jsxs)("div",{className:i.wrapper,children:[(0,N.jsxs)("div",{className:i.header,children:[(0,N.jsxs)("div",{className:i.group,"data-testid":"alert-group",children:[(0,N.jsx)(p.U,{isCollapsed:r,onToggle:()=>n(!r),"data-testid":"alert-group-collapse-toggle"}),Object.keys(t.labels).length?(0,N.jsx)(u.s,{className:i.headerLabels,labels:t.labels}):O||(O=(0,N.jsx)("span",{children:"No grouping"}))]}),(0,N.jsx)(M.Z,{group:t})]}),!r&&(0,N.jsx)($,{alertManagerSourceName:s,alerts:t.alerts})]})},G=e=>({wrapper:r.css`
  21. & + & {
  22. margin-top: ${e.spacing(2)};
  23. }
  24. `,headerLabels:r.css`
  25. padding-bottom: 0 !important;
  26. margin-bottom: -${e.spacing(.5)};
  27. `,header:r.css`
  28. display: flex;
  29. flex-direction: row;
  30. flex-wrap: wrap;
  31. align-items: center;
  32. justify-content: space-between;
  33. padding: ${e.spacing(1,1,1,0)};
  34. background-color: ${e.colors.background.secondary};
  35. width: 100%;
  36. `,group:r.css`
  37. display: flex;
  38. flex-direction: row;
  39. align-items: center;
  40. `,summary:r.css``,spanElement:r.css`
  41. margin-left: ${e.spacing(.5)};
  42. `,[d.Z9.Active]:r.css`
  43. color: ${e.colors.error.main};
  44. `,[d.Z9.Suppressed]:r.css`
  45. color: ${e.colors.primary.main};
  46. `,[d.Z9.Unprocessed]:r.css`
  47. color: ${e.colors.secondary.main};
  48. `});var F,B=t(82498),I=t(1698),L=t(50489);const Z=e=>{let{onStateFilterChange:s,stateFilter:t}=e;const r=(0,l.useStyles2)(E),a=Object.entries(d.Z9).sort(((e,s)=>{let[t]=e,[r]=s;return t<r?-1:1})).map((e=>{let[s,t]=e;return{label:s,value:t}}));return(0,N.jsxs)("div",{className:r.wrapper,children:[F||(F=(0,N.jsx)(l.Label,{children:"State"})),(0,N.jsx)(l.RadioButtonGroup,{options:a,value:t,onChange:s})]})},E=e=>({wrapper:r.css`
  49. margin-left: ${e.spacing(1)};
  50. `});var q,z,R=t(82897);const W=e=>{let{className:s,groups:t,groupBy:r,onGroupingChange:a}=e;const n=(0,R.uniq)(t.flatMap((e=>e.alerts)).flatMap((e=>{let{labels:s}=e;return Object.keys(s)}))).filter((e=>!(e.startsWith("__")&&e.endsWith("__")))).map((e=>({label:e,value:e})));return(0,N.jsxs)("div",{"data-testid":"group-by-container",className:s,children:[q||(q=(0,N.jsx)(l.Label,{children:"Custom group by"})),(0,N.jsx)(l.MultiSelect,{"aria-label":"group by label keys",value:r,placeholder:"Group by",prefix:z||(z=(0,N.jsx)(l.Icon,{name:"tag-alt"})),onChange:e=>{a(e.map((e=>{let{value:s}=e;return s})))},options:n})]})};var P=t(16905);const U=e=>{let{groups:s}=e;const[t,r]=(0,a.useState)(Math.floor(100*Math.random())),[n,o]=(0,i.K)(),{groupBy:c=[],queryString:d,alertState:u}=(0,v.lC)(n),p=`matcher-${t}`,g=(0,I.k)("instance"),[m,h]=(0,B.k)(g),b=(0,l.useStyles2)(D),x=!!(c.length>0||d||u);return(0,N.jsxs)("div",{className:b.wrapper,children:[(0,N.jsx)(L.P,{current:m,onChange:h,dataSources:g}),(0,N.jsxs)("div",{className:b.filterSection,children:[(0,N.jsx)(P.F,{className:b.filterInput,defaultQueryString:d,onFilterChange:e=>o({queryString:e||null})},p),(0,N.jsx)(W,{className:b.filterInput,groups:s,groupBy:c,onGroupingChange:e=>o({groupBy:e.length?e.join(","):null})}),(0,N.jsx)(Z,{stateFilter:u,onStateFilterChange:e=>o({alertState:e||null})}),x&&(0,N.jsx)(l.Button,{className:b.clearButton,variant:"secondary",icon:"times",onClick:()=>{o({groupBy:null,queryString:null,alertState:null}),setTimeout((()=>r(t+1)),100)},children:"Clear filters"})]})]})},D=e=>({wrapper:r.css`
  51. border-bottom: 1px solid ${e.colors.border.medium};
  52. margin-bottom: ${e.spacing(3)};
  53. `,filterSection:r.css`
  54. display: flex;
  55. flex-direction: row;
  56. margin-bottom: ${e.spacing(3)};
  57. `,filterInput:r.css`
  58. width: 340px;
  59. & + & {
  60. margin-left: ${e.spacing(1)};
  61. }
  62. `,clearButton:r.css`
  63. margin-left: ${e.spacing(1)};
  64. margin-top: 19px;
  65. `});var K=t(82139);var V,_,J=t(33899),Q=t(83809),T=t(85464),H=t(8455);const X=e=>({groupingBanner:r.css`
  66. margin: ${e.spacing(2,0)};
  67. `}),Y=()=>{var e;const s=(0,I.k)("instance"),[t]=(0,B.k)(s),r=(0,n.useDispatch)(),[d]=(0,i.K)(),{groupBy:u=[]}=(0,v.lC)(d),p=(0,l.useStyles2)(X),g=(0,J._)((e=>e.amAlertGroups)),{loading:m,error:h,result:b=[]}=null!==(e=g[t||""])&&void 0!==e?e:H.oq,x=((e,s)=>(0,a.useMemo)((()=>0===s.length?e.filter((e=>0===Object.keys(e.labels).length)).length>1?e.reduce(((e,s)=>{if(0===Object.keys(s.labels).length){const t=e.find((e=>{let{labels:s}=e;return Object.keys(s)}));t?t.alerts=(0,R.uniqBy)([...t.alerts,...s.alerts],"labels"):e.push({alerts:s.alerts,labels:{},receiver:{name:"NONE"}})}else e.push(s);return e}),[]):e:e.flatMap((e=>{let{alerts:s}=e;return s})).reduce(((e,t)=>{if(s.every((e=>Object.keys(t.labels).includes(e)))){const r=e.find((e=>s.every((s=>e.labels[s]===t.labels[s]))));if(r)r.alerts.push(t);else{const r=s.reduce(((e,s)=>Object.assign({},e,{[s]:t.labels[s]})),{});e.push({alerts:[t],labels:r,receiver:{name:"NONE"}})}}else{const s=e.find((e=>0===Object.keys(e.labels).length));s?s.alerts.push(t):e.push({alerts:[t],labels:{},receiver:{name:"NONE"}})}return e}),[])),[e,s]))(b,u),j=(e=>{const[s]=(0,i.K)(),t=(0,v.lC)(s),r=(0,K.Zh)(t.queryString||"");return(0,a.useMemo)((()=>e.reduce(((e,s)=>{const a=s.alerts.filter((e=>{let{labels:s,status:a}=e;const n=(0,K.eD)(s,r),l=!t.alertState||a.state===t.alertState;return n&&l}));return a.length>0&&(0===Object.keys(s.labels).length?e.unshift(Object.assign({},s,{alerts:a})):e.push(Object.assign({},s,{alerts:a}))),e}),[])),[e,t,r])})(x);return(0,a.useEffect)((()=>{function e(){t&&r((0,Q.mS)(t))}e();const s=setInterval(e,T.iF);return()=>{clearInterval(s)}}),[r,t]),t?(0,N.jsxs)(o.J,{pageId:"groups",children:[(0,N.jsx)(U,{groups:b}),m&&(V||(V=(0,N.jsx)(l.LoadingPlaceholder,{text:"Loading notifications"}))),h&&!m&&(0,N.jsx)(l.Alert,{title:"Error loading notifications",severity:"error",children:h.message||"Unknown error"}),b&&j.map(((e,s)=>(0,N.jsxs)(a.Fragment,{children:[(1===s&&0===Object.keys(j[0].labels).length||0===s&&Object.keys(e.labels).length>0)&&(0,N.jsxs)("p",{className:p.groupingBanner,children:["Grouped by: ",Object.keys(e.labels).join(", ")]}),(0,N.jsx)(A,{alertManagerSourceName:t||"",group:e})]},`${JSON.stringify(e.labels)}-group-${s}`))),b&&!j.length&&(_||(_=(0,N.jsx)("p",{children:"No results."})))]}):(0,N.jsx)(o.J,{pageId:"groups",children:(0,N.jsx)(c.I,{availableAlertManagers:s})})}},40256:(e,s,t)=>{t.d(s,{J:()=>i});t(68404);var r=t(18745),a=t(33801),n=t(8674),l=t(45916);const i=e=>{let{children:s,pageId:t,isLoading:i}=e;const o=(0,n.h)((0,r.useSelector)((e=>e.navIndex)),t);return(0,l.jsx)(a.Z,{navModel:o,children:(0,l.jsx)(a.Z.Contents,{isLoading:i,children:s})})}},53262:(e,s,t)=>{t.d(s,{q:()=>n});t(68404);var r=t(61959),a=t(45916);const n=e=>{let{actions:s,children:t,fallback:n=!0}=e;return s.some((e=>r.Vt.hasAccess(e,n)))?(0,a.jsx)(a.Fragment,{children:t}):null}},29e3:(e,s,t)=>{t.d(s,{F:()=>o});var r=t(36636),a=(t(68404),t(69783)),n=t(9019),l=t(45916);const i=["renderExpandedContent"];const o=e=>{let{renderExpandedContent:s}=e,t=function(e,s){if(null==e)return{};var t,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)t=n[r],s.indexOf(t)>=0||(a[t]=e[t]);return a}(e,i);const o=(0,a.useStyles2)(c);return(0,l.jsx)(n.t,Object.assign({renderExpandedContent:s?(e,t,a)=>(0,l.jsxs)(l.Fragment,{children:[!(t===a.length-1)&&(0,l.jsx)("div",{className:(0,r.cx)(o.contentGuideline,o.guideline)}),s(e,t,a)]}):void 0,renderPrefixHeader:()=>(0,l.jsx)("div",{className:o.relative,children:(0,l.jsx)("div",{className:(0,r.cx)(o.headerGuideline,o.guideline)})}),renderPrefixCell:(e,s,t)=>(0,l.jsxs)("div",{className:o.relative,children:[(0,l.jsx)("div",{className:(0,r.cx)(o.topGuideline,o.guideline)}),!(s===t.length-1)&&(0,l.jsx)("div",{className:(0,r.cx)(o.bottomGuideline,o.guideline)})]})},t))},c=e=>({relative:r.css`
  68. position: relative;
  69. height: 100%;
  70. `,guideline:r.css`
  71. left: -19px;
  72. border-left: 1px solid ${e.colors.border.medium};
  73. position: absolute;
  74. ${e.breakpoints.down("md")} {
  75. display: none;
  76. }
  77. `,topGuideline:r.css`
  78. width: 18px;
  79. border-bottom: 1px solid ${e.colors.border.medium};
  80. top: 0;
  81. bottom: 50%;
  82. `,bottomGuideline:r.css`
  83. top: 50%;
  84. bottom: 0;
  85. `,contentGuideline:r.css`
  86. top: 0;
  87. bottom: 0;
  88. left: -49px !important;
  89. `,headerGuideline:r.css`
  90. top: -25px;
  91. bottom: 0;
  92. `})},71308:(e,s,t)=>{t.d(s,{I:()=>g});t(68404);var r,a,n,l,i=t(69783),o=t(82498),c=t(50489),d=t(45916);const u=()=>r||(r=(0,d.jsx)(i.Alert,{title:"No Alertmanager found",severity:"warning",children:"We could not find any external Alertmanagers and you may not have access to the built-in Grafana Alertmanager."})),p=()=>a||(a=(0,d.jsx)(i.Alert,{title:"Selected Alertmanager not found. Select a different Alertmanager.",severity:"warning",children:"Selected Alertmanager no longer exists or you may not have permission to access it."})),g=e=>{let{availableAlertManagers:s}=e;const[t,r]=(0,o.k)(s),a=s.length>0;return(0,d.jsx)("div",{children:a?(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(c.P,{onChange:r,dataSources:s}),n||(n=(0,d.jsx)(p,{}))]}):l||(l=(0,d.jsx)(u,{}))})}},16905:(e,s,t)=>{t.d(s,{F:()=>d});var r,a,n,l=t(36636),i=(t(68404),t(90747)),o=t(69783),c=t(45916);const d=e=>{let{className:s,onFilterChange:t,defaultQueryString:l,queryString:d}=e;const p=(0,o.useStyles2)(u),g=r||(r=(0,c.jsx)(o.Icon,{name:"search"}));return(0,c.jsxs)("div",{className:s,children:[(0,c.jsx)(o.Label,{children:(0,c.jsxs)(i.Stack,{gap:.5,children:[a||(a=(0,c.jsx)("span",{children:"Search by label"})),(0,c.jsx)(o.Tooltip,{content:n||(n=(0,c.jsxs)("div",{children:["Filter alerts using label querying, ex:",(0,c.jsx)("pre",{children:'{severity="critical", instance=~"cluster-us-.+"}'})]})),children:(0,c.jsx)(o.Icon,{className:p.icon,name:"info-circle",size:"sm"})})]})}),(0,c.jsx)(o.Input,{placeholder:"Search",defaultValue:l,value:d,onChange:e=>{const s=e.target;t(s.value)},"data-testid":"search-query-input",prefix:g,className:p.inputWidth})]})},u=e=>({icon:l.css`
  93. margin-right: ${e.spacing(.5)};
  94. `,inputWidth:l.css`
  95. width: 340px;
  96. flex-grow: 0;
  97. `})},82344:(e,s,t)=>{t.d(s,{G:()=>i});t(68404);var r=t(10331),a=t(49179),n=t(45916);const l={[r.Z9.Active]:"bad",[r.Z9.Unprocessed]:"neutral",[r.Z9.Suppressed]:"info"},i=e=>{let{state:s}=e;return(0,n.jsx)(a.i,{state:l[s],children:s})}},82498:(e,s,t)=>{t.d(s,{k:()=>o});var r=t(68404),a=t(26011),n=t(17421),l=t(85464),i=t(19462);function o(e){const[s,t]=(0,a.K)(),o=function(e){return(0,r.useCallback)((s=>e.map((e=>e.name)).includes(s)),[e])}(e),c=(0,r.useCallback)((e=>{o(e)&&(e===i.GC?(n.Z.delete(l.de),t({[l.c4]:null})):(n.Z.set(l.de,e),t({[l.c4]:e})))}),[t,o]),d=s[l.c4];if(d&&"string"==typeof d)return o(d)?[d,c]:[void 0,c];const u=n.Z.get(l.de);return u&&"string"==typeof u&&o(u)?(c(u),[u,c]):o(i.GC)?[i.GC,c]:[void 0,c]}},1698:(e,s,t)=>{t.d(s,{k:()=>n});var r=t(68404),a=t(19462);function n(e){return(0,r.useMemo)((()=>(0,a.LE)(e)),[e])}}}]);
  98. //# sourceMappingURL=AlertGroups.98ab02c233dab193b78e.js.map