"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[1121],{31121:(k,T,s)=>{s.r(T),s.d(T,{default:()=>Ce,getStyles:()=>K});var g=s(32196),f=s(2543),e=s(96540),$=s(49785),E=s(47232),y=s(40845),x=s(42418),p=s(67061),V=s(56034),S=s(14578),D=s(55852),q=s(88575),_=s(60029),ee=s(10354),te=s(49962);const ne=te.H.injectEndpoints({endpoints:t=>({getRuleHistory:t.query({query:({ruleUid:n,from:r,to:a,limit:l=100})=>({url:"/api/v1/rules/history",params:{ruleUID:n,from:r,to:a,limit:l}})})})});var I=s(98164),ae=s(69087),se=s(35108),re=s(72095),oe=s(72724),le=s(64149),ce=s(8406),z=s(30423),A=s(70026);function ie(t){const n=t.reduce((r,a)=>{const l=r.get(a.timestamp);return l?l.push(a):r.set(a.timestamp,[a]),r},new Map);return new Map([...n].sort((r,a)=>a[0]-r[0]))}const P=e.memo(({records:t,commonLabels:n,onLabelClick:r,onRecordsRendered:a})=>{const l=(0,y.of)(O),c=ie(t),o=new Map;return(0,e.useEffect)(()=>{a&&a(o)}),e.createElement("ul",{className:l.logsScrollable,"aria-label":"State history by timestamp"},Array.from(c.entries()).map(([m,h])=>e.createElement("li",{id:m.toString(10),key:m,"data-testid":m,ref:i=>i&&o.set(m,i),className:l.listItemWrapper},e.createElement(me,{time:m}),e.createElement("div",{className:l.logsContainer},h.map(({line:i})=>e.createElement(e.Fragment,{key:(0,f.uniqueId)()},e.createElement(z.C,{state:i.previous,size:"sm",muted:!0}),e.createElement(S.I,{name:"arrow-right",size:"sm"}),e.createElement(z.C,{state:i.current}),e.createElement(p.B,null,i.values&&e.createElement(F,{record:i.values})),e.createElement("div",null,i.labels&&e.createElement(le.L,{tags:(0,A.$)(Object.entries(i.labels),n).map(([d,b])=>`${d}=${b}`),onClick:r}))))))))});P.displayName="LogRecordViewerByTimestamp";function Be({records:t,commonLabels:n}){const r=useStyles2(O),a=groupBy(t,l=>JSON.stringify(l.line.labels));return React.createElement(React.Fragment,null,Object.entries(a).map(([l,c])=>React.createElement(Stack,{direction:"column",key:l},React.createElement("h4",null,React.createElement(TagList,{tags:omitLabels(Object.entries(c[0].line.labels??{}),n).map(([o,m])=>`${o}=${m}`)})),React.createElement("div",{className:r.logsContainer},c.map(({line:o,timestamp:m})=>React.createElement("div",{key:uniqueId()},React.createElement(AlertStateTag,{state:o.previous,size:"sm",muted:!0}),React.createElement(Icon,{name:"arrow-right",size:"sm"}),React.createElement(AlertStateTag,{state:o.current}),React.createElement(Stack,null,o.values&&React.createElement(F,{record:o.values})),React.createElement("div",null,dateTimeFormat(m))))))))}const me=({time:t})=>{const n=new Date(t),r=(0,y.of)(O);return e.createElement("div",{className:r.timestampWrapper},e.createElement(p.B,{alignItems:"center",gap:1},e.createElement(S.I,{name:"clock-nine",size:"sm"}),e.createElement("span",{className:r.timestampText},(0,oe.LE)(n)),e.createElement("small",null,"(",(0,re.B)(n)," ago)")))},F=e.memo(({record:t})=>{const n=Object.entries(t);return e.createElement(e.Fragment,null,n.map(([r,a])=>e.createElement(ce.J,{key:r,label:r,value:a})))});F.displayName="AlertInstanceValues";const O=t=>({logsContainer:(0,g.css)`
    display: grid;
    grid-template-columns: max-content max-content max-content auto max-content;
    gap: ${t.spacing(2,1)};
    align-items: center;
  `,logsScrollable:(0,g.css)`
    height: 500px;
    overflow: scroll;

    flex: 1;
  `,timestampWrapper:(0,g.css)`
    color: ${t.colors.text.secondary};
  `,timestampText:(0,g.css)`
    color: ${t.colors.text.primary};
    font-size: ${t.typography.bodySmall.fontSize};
    font-weight: ${t.typography.fontWeightBold};
  `,listItemWrapper:(0,g.css)`
    background: transparent;
    outline: 1px solid transparent;

    transition:
      background 150ms,
      outline 150ms;
    padding: ${t.spacing(1)} ${t.spacing(1.5)};
  `});var ue=s(70713),ge=s(49426),H=s(52622),de=s(82389),pe=s(28895);const fe=t=>t,J=e.memo(({frames:t,timeRange:n,onPointerMove:r=f.noop})=>{const a=(0,y.$j)(),{setupCursorTracking:l}=ye(r);return e.createElement(ue.Ay,{disableHeight:!0},({width:c})=>e.createElement(de.I,{frames:t,timeRange:n,timeZone:"browser",mode:pe.pm.Changes,height:18*t.length+50,width:c,showValue:H.yL.Never,theme:a,rowHeight:.8,legend:{calcs:[],displayMode:H.lm.List,placement:"bottom",showLegend:!0},legendItems:[{label:"Normal",color:a.colors.success.main,yAxis:1},{label:"Pending",color:a.colors.warning.main,yAxis:1},{label:"Alerting",color:a.colors.error.main,yAxis:1},{label:"NoData",color:a.colors.info.main,yAxis:1},{label:"Mixed",color:a.colors.text.secondary,yAxis:1}],replaceVariables:fe},o=>(l(o),null)))});function ye(t){const n=(0,e.useRef)(new ge.t({seriesIdx:0,pointIdx:0}));return(0,e.useEffect)(()=>{const a=n.current.subscribe(({seriesIdx:l,pointIdx:c})=>{t&&t(l,c)});return()=>{a.unsubscribe()}},[t]),{setupCursorTracking:a=>{a.setSync();const l=a.getTooltipInterpolator();l&&a.addHook("setCursor",c=>{l(o=>{if(o){const m=n.current.getValue();n.current.next({...m,seriesIdx:o})}},o=>{if(o){const m=n.current.getValue();n.current.next({...m,pointIdx:o})}},()=>{},c)})}}}J.displayName="LogTimelineViewer";var W=s(11261),Ee=s(57875),he=s(48241),U=s(73134);function ve(t,n){const r=(0,y.$j)();return(0,e.useMemo)(()=>{const a=t?.data?.values[0]??[],l=Se(a)?a:[],c=t?.data?.values[1]??[],o=l.reduce((u,v,B)=>{const L=c[B];return be(L)&&u.push({timestamp:v,line:L}),u},[]),m=(0,f.groupBy)(o,u=>JSON.stringify(u.line.labels)),i=Object.keys(m).map(u=>Object.entries(JSON.parse(u))),d=(0,A.Q)(i),b=n?(0,I.J$)(n):[],M=Object.entries(m).filter(([u])=>{const v=JSON.parse(u);return(0,I.Av)(v,b)}).map(([u,v])=>Le(u,v,d,r));return{historyRecords:o.filter(({line:u})=>u.labels&&(0,I.Av)(u.labels,b)),dataFrames:M,commonLabels:d,totalRecordsCount:o.length}},[t,n,r])}function Se(t){return t.every(n=>typeof n=="number")}function be(t){return typeof t=="object"&&t!==null&&"current"in t&&"previous"in t}function Le(t,n,r,a){const l=Object.entries(JSON.parse(t)),c={name:"time",type:W.PU.time,values:[...n.map(i=>i.timestamp),Date.now()],config:{displayName:"Time",custom:{fillOpacity:100}}},o=c.values.map((i,d)=>d);o.sort((0,he.i)(c));const m=[...n.map(i=>i.line.current),n.at(-1)?.line.current],h={fields:[{...c,values:c.values.map((i,d)=>c.values[o[d]])},{name:"state",type:W.PU.string,values:m.map((i,d)=>m[o[d]]),config:{displayName:(0,A.$)(l,r).map(([i,d])=>`${i}=${d}`).join(", "),color:{mode:"thresholds"},custom:{fillOpacity:100},mappings:[{type:U.dM.ValueToText,options:{Alerting:{color:a.colors.error.main},Pending:{color:a.colors.warning.main},Normal:{color:a.colors.success.main},NoData:{color:a.colors.info.main}}}],thresholds:{mode:U.Ol.Absolute,steps:[]}}}],length:c.values.length,name:t};return h.fields.forEach(i=>{i.display=(0,Ee.J)({field:i,theme:a})}),h}const Re=12,Te=({ruleUID:t})=>{const n=(0,y.of)(K),[r,a]=(0,e.useState)(""),l=(0,e.useRef)(new Map),{getValues:c,setValue:o,register:m,handleSubmit:h}=(0,$.mN)({defaultValues:{query:""}}),{useGetRuleHistoryQuery:i}=ne,d=(0,e.useMemo)(()=>Ie(),[]),{currentData:b,isLoading:G,isError:M,error:u}=i({ruleUid:t,from:d.from.unix(),to:d.to.unix(),limit:250}),{dataFrames:v,historyRecords:B,commonLabels:L,totalRecordsCount:j}=ve(b,r),{frameSubset:C,frameSubsetTimestamps:w,frameTimeRange:Ne}=xe(v),$e=(0,e.useCallback)(R=>{const N=(0,I.EU)(c("query"),R);a(N),o("query",N)},[a,o,c]),X=(0,e.useCallback)(()=>{a(""),o("query","")},[a,o]),Z=(0,e.useRef)(void 0),Ae=(0,e.useCallback)((R,N)=>{Z.current?.classList.remove(n.highlightedLogRecord);const Me=w[N],Y=l.current.get(Me);Y?.classList.add(n.highlightedLogRecord),Z.current=Y},[w,n.highlightedLogRecord]);if(G)return e.createElement("div",null,"Loading...");if(M)return e.createElement(x.F,{title:"Error fetching the state history",severity:"error"},u instanceof Error?u.message:"Unable to fetch alert state history");const Fe=C.length<v.length,Oe=j>0?`No matches were found for the given filters among the ${j} instances`:"No state transitions have occurred in the last 30 days";return e.createElement("div",{className:n.fullSize},e.createElement("form",{onSubmit:h(R=>a(R.query))},e.createElement(Q,{...m("query"),showClearFilterSuffix:!!r,onClearFilterClick:X}),e.createElement("input",{type:"submit",hidden:!0})),!(0,f.isEmpty)(L)&&e.createElement("div",{className:n.commonLabels},e.createElement(p.B,{gap:1,alignItems:"center"},e.createElement("strong",null,"Common labels"),e.createElement(V.m,{content:"Common labels are the ones attached to all of the alert instances"},e.createElement(S.I,{name:"info-circle"})),e.createElement(ae.m,{labels:(0,f.fromPairs)(L),size:"sm"}))),(0,f.isEmpty)(C)?e.createElement(e.Fragment,null,e.createElement("div",{className:n.emptyState},Oe,j>0&&e.createElement(D.$n,{variant:"secondary",type:"button",onClick:X},"Clear filters"))):e.createElement(e.Fragment,null,e.createElement("div",{className:n.graphWrapper},e.createElement(J,{frames:C,timeRange:Ne,onPointerMove:Ae})),Fe&&e.createElement("div",{className:n.moreInstancesWarning},e.createElement(p.B,{direction:"row",alignItems:"center",gap:1},e.createElement(S.I,{name:"exclamation-triangle",size:"sm"}),e.createElement("small",null,`Only showing ${C.length} out of ${v.length} instances. Click on the labels to narrow down the results`))),e.createElement(P,{records:B,commonLabels:L,onRecordsRendered:R=>l.current=R,onLabelClick:$e})))};function xe(t){return(0,e.useMemo)(()=>{const n=(0,f.take)(t,Re),r=(0,f.sortBy)((0,f.uniq)(n.flatMap(h=>h.fields[0].values))),a=Math.min(...r),l=Math.max(...r),c=(0,E.KQ)(a),o=(0,E.KQ)(l);return{frameSubset:n,frameSubsetTimestamps:r,frameTimeRange:{from:c,to:o,raw:{from:c,to:o}}}},[t])}const Q=e.forwardRef(({showClearFilterSuffix:t,onClearFilterClick:n,...r},a)=>e.createElement(q.D,{label:e.createElement(_.J,{htmlFor:"instancesSearchInput"},e.createElement(p.B,{gap:.5},e.createElement("span",null,"Filter instances"),e.createElement(se.j,{content:e.createElement(e.Fragment,null,"Use label matcher expression (like ",e.createElement("code",null,"{foo=bar}"),") or click on an instance label to filter instances")},e.createElement(S.I,{name:"info-circle",size:"sm"}))))},e.createElement(ee.p,{id:"instancesSearchInput",prefix:e.createElement(S.I,{name:"search"}),suffix:t&&e.createElement(D.$n,{fill:"text",icon:"times",size:"sm",onClick:n},"Clear"),placeholder:"Filter instances",ref:a,...r})));Q.displayName="SearchFieldInput";function Ie(){const t=(0,E.KQ)().subtract(30,"days"),n=(0,E.KQ)();return{from:t,to:n,raw:{from:t,to:n}}}const K=t=>({fullSize:(0,g.css)`
    min-width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
  `,graphWrapper:(0,g.css)`
    padding: ${t.spacing()} 0;
  `,emptyState:(0,g.css)`
    color: ${t.colors.text.secondary};

    display: flex;
    flex-direction: column;
    gap: ${t.spacing(2)};
    align-items: center;
    margin: auto auto;
  `,moreInstancesWarning:(0,g.css)`
    color: ${t.colors.warning.text};
    padding: ${t.spacing()};
  `,commonLabels:(0,g.css)`
    display: grid;
    grid-template-columns: max-content auto;
  `,highlightedLogRecord:(0,g.css)`
    background: ${t.colors.primary.transparent} !important;
    outline: 1px solid ${t.colors.primary.shade} !important;
  `}),Ce=Te},70026:(k,T,s)=>{s.d(T,{$:()=>e,Q:()=>$});var g=s(2543),f=s.n(g);function e(E,y){return E.filter(x=>!y.find(p=>JSON.stringify(p)===JSON.stringify(x)))}function $(E){const y=E.flatMap(p=>p);return(0,g.uniqBy)(y.filter(p=>y.filter(S=>(0,g.isEqual)(p,S)).length===Object.keys(E).length),p=>JSON.stringify(p))}}}]);

//# sourceMappingURL=1121.b57702d5751a9d38a15d.js.map