1#@!#!123s

: / usr / share / grafana / public / build /
Filename : 5179.2d9c860d1d5da4c3c514.js
back
"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[5179],{75179:(V,L,r)=>{r.r(L),r.d(L,{default:()=>He,getStyles:()=>le});var g=r(42844),p=r(89949),e=r(27702),C=r(46089),R=r(99633),x=r(23852),b=r(66310),T=r(63439),K=r(80011),I=r(73453),Q=r(86004),G=r(66670),ce=r(22209),me=r(79978),ue=r(1128),de=r(16881);const ge=de.C.injectEndpoints({endpoints:t=>({getRuleHistory:t.query({query:({ruleUid:n,from:s,to:a,limit:i=100})=>({url:"/api/v1/rules/history",params:{ruleUID:n,from:s,to:a,limit:i}})})})});var F=r(76658),fe=r(51453),pe=r(35097),Y=r(19040),ve=r(27008),$=r(2629),he=r(51379),ye=r(63797),Ee=r(56702),X=r(55434),k=1e3*60,z=60*24,q=z*30,_=z*365;function Se(t,n,s){var a,i,m;(0,X.Z)(2,arguments);var o=(0,pe.j)(),c=(a=(i=s?.locale)!==null&&i!==void 0?i:o.locale)!==null&&a!==void 0?a:Ee.Z;if(!c.formatDistance)throw new RangeError("locale must contain localize.formatDistance property");var h=(0,ve.Z)(t,n);if(isNaN(h))throw new RangeError("Invalid time value");var l=(0,ye.Z)((0,he.Z)(s),{addSuffix:!!s?.addSuffix,comparison:h}),u,S;h>0?(u=(0,$.Z)(n),S=(0,$.Z)(t)):(u=(0,$.Z)(t),S=(0,$.Z)(n));var O=String((m=s?.roundingMethod)!==null&&m!==void 0?m:"round"),y;if(O==="floor")y=Math.floor;else if(O==="ceil")y=Math.ceil;else if(O==="round")y=Math.round;else throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");var d=S.getTime()-u.getTime(),v=d/k,D=(0,Y.Z)(S)-(0,Y.Z)(u),E=(d-D)/k,M=s?.unit,f;if(M?f=String(M):v<1?f="second":v<60?f="minute":v<z?f="hour":E<q?f="day":E<_?f="month":f="year",f==="second"){var j=y(d/1e3);return c.formatDistance("xSeconds",j,l)}else if(f==="minute"){var P=y(v);return c.formatDistance("xMinutes",P,l)}else if(f==="hour"){var W=y(v/60);return c.formatDistance("xHours",W,l)}else if(f==="day"){var Z=y(E/z);return c.formatDistance("xDays",Z,l)}else if(f==="month"){var A=y(E/q);return A===12&&M!=="month"?c.formatDistance("xYears",1,l):c.formatDistance("xMonths",A,l)}else if(f==="year"){var U=y(E/_);return c.formatDistance("xYears",U,l)}throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'")}function xe(t,n){return(0,X.Z)(1,arguments),Se(t,Date.now(),n)}var Re=r(60956),Te=r(79374),ee=r(68614),B=r(57117);function Le(t){const n=t.reduce((s,a)=>{const i=s.get(a.timestamp);return i?i.push(a):s.set(a.timestamp,[a]),s},new Map);return new Map([...n].sort((s,a)=>a[0]-s[0]))}const te=e.memo(({records:t,commonLabels:n,onLabelClick:s,onRecordsRendered:a})=>{const i=(0,b.wW)(J),m=Le(t),o=new Map;return(0,e.useEffect)(()=>{a&&a(o)}),e.createElement("ul",{className:i.logsScrollable,"aria-label":"State history by timestamp"},Array.from(m.entries()).map(([c,h])=>e.createElement("li",{id:c.toString(10),key:c,"data-testid":c,ref:l=>l&&o.set(c,l),className:i.listItemWrapper},e.createElement(be,{time:c}),e.createElement("div",{className:i.logsContainer},h.map(({line:l})=>e.createElement(e.Fragment,{key:(0,p.uniqueId)()},e.createElement(ee.l,{state:l.previous,size:"sm",muted:!0}),e.createElement(I.J,{name:"arrow-right",size:"sm"}),e.createElement(ee.l,{state:l.current}),e.createElement(x.K,{direction:"row"},l.values&&e.createElement(H,{record:l.values})),e.createElement("div",null,l.labels&&e.createElement(Q.P,{tags:(0,B.r)(Object.entries(l.labels),n).map(([u,S])=>`${u}=${S}`),onClick:s}))))))))});te.displayName="LogRecordViewerByTimestamp";function Ue({records:t,commonLabels:n}){const s=useStyles2(J),a=groupBy(t,i=>JSON.stringify(i.line.labels));return React.createElement(React.Fragment,null,Object.entries(a).map(([i,m])=>React.createElement(Stack,{direction:"column",key:i},React.createElement("h4",null,React.createElement(TagList,{tags:omitLabels(Object.entries(m[0].line.labels??{}),n).map(([o,c])=>`${o}=${c}`)})),React.createElement("div",{className:s.logsContainer},m.map(({line:o,timestamp:c})=>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,{direction:"row"},o.values&&React.createElement(H,{record:o.values})),React.createElement("div",null,dateTimeFormat(c))))))))}const be=({time:t})=>{const n=new Date(t),s=(0,b.wW)(J);return e.createElement("div",{className:s.timestampWrapper},e.createElement(x.K,{direction:"row",alignItems:"center",gap:1},e.createElement(I.J,{name:"clock-nine",size:"sm"}),e.createElement("span",{className:s.timestampText},(0,Re.dq)(n)),e.createElement("small",null,"(",xe(n)," ago)")))},H=e.memo(({record:t})=>{const n=Object.entries(t);return e.createElement(e.Fragment,null,n.map(([s,a])=>e.createElement(Te._,{key:s,label:s,value:a})))});H.displayName="AlertInstanceValues";const J=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 Ie=r(55925),Ne=r(88646),ne=r(64167),Ce=r(43801),Me=r(55879);const ae=e.memo(({frames:t,timeRange:n,onPointerMove:s=p.noop})=>{const a=(0,b.l4)(),{setupCursorTracking:i}=Oe(s);return e.createElement(Ie.Z,{disableHeight:!0},({width:m})=>e.createElement(Ce.K,{frames:t,timeRange:n,timeZone:"browser",mode:Me.KN.Changes,height:18*t.length+50,width:m,showValue:ne.Jp.Never,theme:a,rowHeight:.8,legend:{calcs:[],displayMode:ne.jK.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}]},o=>(i(o),null)))});function Oe(t){const n=(0,e.useRef)(new Ne.X({seriesIdx:0,pointIdx:0}));return(0,e.useEffect)(()=>{const a=n.current.subscribe(({seriesIdx:i,pointIdx:m})=>{t&&t(i,m)});return()=>{a.unsubscribe()}},[t]),{setupCursorTracking:a=>{a.setSync();const i=a.getTooltipInterpolator();i&&a.addHook("setCursor",m=>{i(o=>{if(o){const c=n.current.getValue();n.current.next({...c,seriesIdx:o})}},o=>{if(o){const c=n.current.getValue();n.current.next({...c,pointIdx:o})}},()=>{},m)})}}}ae.displayName="LogTimelineViewer";var re=r(29241),De=r(61965),Ae=r(72927),se=r(66805);function Fe(t,n){const s=(0,b.l4)();return(0,e.useMemo)(()=>{const a=t?.data?.values[0]??[],i=$e(a)?a:[],m=t?.data?.values[1]??[],o=i.reduce((d,v,D)=>{const E=m[D];return ze(E)&&d.push({timestamp:v,line:E}),d},[]),c=(0,p.groupBy)(o,d=>JSON.stringify(d.line.labels)),l=Object.keys(c).map(d=>Object.entries(JSON.parse(d))),u=(0,B.z)(l),S=n?(0,F.Zh)(n):[],y=Object.entries(c).filter(([d])=>{const v=JSON.parse(d);return(0,F.eD)(v,S)}).map(([d,v])=>je(d,v,u,s));return{historyRecords:o.filter(({line:d})=>d.labels&&(0,F.eD)(d.labels,S)),dataFrames:y,commonLabels:u,totalRecordsCount:o.length}},[t,n,s])}function $e(t){return t.every(n=>typeof n=="number")}function ze(t){return typeof t=="object"&&t!==null&&"current"in t&&"previous"in t}function je(t,n,s,a){const i=Object.entries(JSON.parse(t)),m={name:"time",type:re.fS.time,values:[...n.map(l=>l.timestamp),Date.now()],config:{displayName:"Time",custom:{fillOpacity:100}}},o=m.values.map((l,u)=>u);o.sort((0,Ae.Mo)(m));const c=[...n.map(l=>l.line.current),n.at(-1)?.line.current],h={fields:[{...m,values:m.values.map((l,u)=>m.values[o[u]])},{name:"state",type:re.fS.string,values:c.map((l,u)=>c[o[u]]),config:{displayName:(0,B.r)(i,s).map(([l,u])=>`${l}=${u}`).join(", "),color:{mode:"thresholds"},custom:{fillOpacity:100},mappings:[{type:se.Hi.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:se.H3.Absolute,steps:[]}}}],length:m.values.length,name:t};return h.fields.forEach(l=>{l.display=(0,De.U)({field:l,theme:a})}),h}const Ze=12,we=({ruleUID:t})=>{const n=(0,b.wW)(le),[s,a]=(0,e.useState)(""),i=(0,e.useRef)(new Map),{getValues:m,setValue:o,register:c,handleSubmit:h}=(0,C.cI)({defaultValues:{query:""}}),{useGetRuleHistoryQuery:l}=ge,u=(0,e.useMemo)(()=>Be(),[]),{currentData:S,isLoading:O,isError:y,error:d}=l({ruleUid:t,from:u.from.unix(),to:u.to.unix(),limit:250}),{dataFrames:v,historyRecords:D,commonLabels:E,totalRecordsCount:M}=Fe(S,s),{frameSubset:f,frameSubsetTimestamps:j,frameTimeRange:P}=Ve(v),W=(0,e.useCallback)(N=>{const w=(0,F.vB)(m("query"),N);a(w),o("query",w)},[a,o,m]),Z=(0,e.useCallback)(()=>{a(""),o("query","")},[a,o]),A=(0,e.useRef)(void 0),U=(0,e.useCallback)((N,w)=>{A.current?.classList.remove(n.highlightedLogRecord);const We=j[w],ie=i.current.get(We);ie?.classList.add(n.highlightedLogRecord),A.current=ie},[j,n.highlightedLogRecord]);if(O)return e.createElement("div",null,"Loading...");if(y)return e.createElement(T.b,{title:"Error fetching the state history",severity:"error"},d instanceof Error?d.message:"Unable to fetch alert state history");const Je=f.length<v.length,Pe=M>0?`No matches were found for the given filters among the ${M} instances`:"No state transitions have occurred in the last 30 days";return e.createElement("div",{className:n.fullSize},e.createElement("form",{onSubmit:h(N=>a(N.query))},e.createElement(oe,{...c("query"),showClearFilterSuffix:!!s,onClearFilterClick:Z}),e.createElement("input",{type:"submit",hidden:!0})),!(0,p.isEmpty)(E)&&e.createElement("div",{className:n.commonLabels},e.createElement(x.K,{gap:1,alignItems:"center"},e.createElement("strong",null,"Common labels"),e.createElement(K.u,{content:"Common labels are the ones attached to all of the alert instances"},e.createElement(I.J,{name:"info-circle"}))),e.createElement(Q.P,{tags:E.map(N=>N.join("="))})),(0,p.isEmpty)(f)?e.createElement(e.Fragment,null,e.createElement("div",{className:n.emptyState},Pe,M>0&&e.createElement(G.zx,{variant:"secondary",type:"button",onClick:Z},"Clear filters"))):e.createElement(e.Fragment,null,e.createElement("div",{className:n.graphWrapper},e.createElement(ae,{frames:f,timeRange:P,onPointerMove:U})),Je&&e.createElement("div",{className:n.moreInstancesWarning},e.createElement(x.K,{direction:"row",alignItems:"center",gap:1},e.createElement(I.J,{name:"exclamation-triangle",size:"sm"}),e.createElement("small",null,`Only showing ${f.length} out of ${v.length} instances. Click on the labels to narrow down the results`))),e.createElement(te,{records:D,commonLabels:E,onRecordsRendered:N=>i.current=N,onLabelClick:W})))};function Ve(t){return(0,e.useMemo)(()=>{const n=(0,p.take)(t,Ze),s=(0,p.sortBy)((0,p.uniq)(n.flatMap(h=>h.fields[0].values))),a=Math.min(...s),i=Math.max(...s),m=(0,R.CQ)(a),o=(0,R.CQ)(i);return{frameSubset:n,frameSubsetTimestamps:s,frameTimeRange:{from:m,to:o,raw:{from:m,to:o}}}},[t])}const oe=e.forwardRef(({showClearFilterSuffix:t,onClearFilterClick:n,...s},a)=>e.createElement(ce.g,{label:e.createElement(me._,{htmlFor:"instancesSearchInput"},e.createElement(x.K,{gap:.5},e.createElement("span",null,"Filter instances"),e.createElement(fe.z,{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(I.J,{name:"info-circle",size:"sm"}))))},e.createElement(ue.I,{id:"instancesSearchInput",prefix:e.createElement(I.J,{name:"search"}),suffix:t&&e.createElement(G.zx,{fill:"text",icon:"times",size:"sm",onClick:n},"Clear"),placeholder:"Filter instances",ref:a,...s})));oe.displayName="SearchFieldInput";function Be(){const t=(0,R.CQ)().subtract(30,"days"),n=(0,R.CQ)();return{from:t,to:n,raw:{from:t,to:n}}}const le=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;
  `}),He=we},57117:(V,L,r)=>{r.d(L,{r:()=>e,z:()=>C});var g=r(89949),p=r.n(g);function e(R,x){return R.filter(b=>!x.find(T=>JSON.stringify(T)===JSON.stringify(b)))}function C(R){const x=R.flatMap(T=>T);return(0,g.uniqBy)(x.filter(T=>x.filter(I=>(0,g.isEqual)(T,I)).length===Object.keys(R).length),T=>JSON.stringify(T))}},63797:(V,L,r)=>{r.d(L,{Z:()=>g});function g(p,e){if(p==null)throw new TypeError("assign requires that input parameter not be null or undefined");for(var C in e)Object.prototype.hasOwnProperty.call(e,C)&&(p[C]=e[C]);return p}},51379:(V,L,r)=>{r.d(L,{Z:()=>p});var g=r(63797);function p(e){return(0,g.Z)({},e)}}}]);

//# sourceMappingURL=5179.2d9c860d1d5da4c3c514.js.map