"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2341],{58809:(M,P,a)=>{a.r(P),a.d(P,{PlaylistEditPage:()=>C,default:()=>D});var e=a(66111),v=a(59679),T=a(37932),I=a(8412),g=a(34212),y=a(6129);const C=({match:p})=>{const c=(0,v.Z)(()=>(0,y.A5)(p.params.uid),[p.params]),O=async E=>{await(0,y.CE)(p.params.uid,E),T.E1.push("/playlists")},f={text:"Edit playlist",subTitle:"A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors."};return e.createElement(I.T,{navId:"dashboards/playlists",pageNav:f},e.createElement(I.T.Contents,{isLoading:c.loading},c.error&&e.createElement("div",null,"Error loading playlist: ",JSON.stringify(c.error)),c.value&&e.createElement(g.H,{onSubmit:O,playlist:c.value})))},D=C},34212:(M,P,a)=>{a.d(P,{H:()=>H});var e=a(66111),v=a(68183),T=a(35645),I=a(94270),g=a(24799),y=a(46967),C=a(52081),D=a(31403),p=a(99661),c=a(24357),O=a(82e3),f=a(36826),E=a(9892),B=a(64681),N=a.n(B),S=a(72648),F=a(67487),x=a(39904),$=a(8180),L=a(21731);const R=({items:i,onDelete:l})=>{const r=(0,S.wW)(K);if(!i?.length)return e.createElement("div",null,e.createElement("em",null,"Playlist is empty. Add dashboards below."));const m=t=>{let d=t.type==="dashboard_by_tag"?"apps":"tag-alt";const s=[],n=t.dashboards?.[0];return t.dashboards?t.type==="dashboard_by_tag"?(s.push(e.createElement(L.e,{key:t.value,label:t.value,removeIcon:!1,count:0})),n?s.push(e.createElement("span",{key:"info"},"\xA0 ",N()("dashboard",t.dashboards.length,!0))):(d="exclamation-triangle",s.push(e.createElement("span",{key:"info"},"\xA0 No dashboards found")))):n?s.push(t.dashboards.length>1?e.createElement("span",{key:"info"},"Multiple items found: $",t.value):e.createElement("span",{key:"info"},n.name??t.value)):(d="exclamation-triangle",s.push(e.createElement("span",{key:"info"},"\xA0 Not found: ",t.value))):s.push(e.createElement(F.$,{key:"spinner"})),e.createElement(e.Fragment,null,e.createElement(x.J,{name:d,className:r.rightMargin,key:"icon"}),s)};return e.createElement(e.Fragment,null,i.map((t,d)=>e.createElement(f._l,{key:`${d}/${t.value}`,draggableId:`${d}`,index:d},s=>e.createElement("div",{className:r.row,ref:s.innerRef,...s.draggableProps,...s.dragHandleProps,role:"row"},e.createElement("div",{className:r.actions,role:"cell","aria-label":`Playlist item, ${t.type}, ${t.value}`},m(t)),e.createElement("div",{className:r.actions},e.createElement($.h,{name:"times",size:"md",onClick:()=>l(d),"aria-label":v.wl.pages.PlaylistForm.itemDelete,type:"button"}),e.createElement(x.J,{title:"Drag and drop to reorder",name:"draggabledots",size:"md"}))))))};function K(i){return{row:E.css`
      padding: 6px;
      background: ${i.colors.background.secondary};
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;

      border: 1px solid ${i.colors.border.medium};
      &:hover {
        border: 1px solid ${i.colors.border.strong};
      }
    `,rightMargin:E.css`
      margin-right: 5px;
    `,actions:E.css`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:E.css`
      label: settings;
      text-align: right;
    `}}const U=({items:i,deleteItem:l,moveItem:r})=>{const m=t=>{t.destination&&r(t.source.index,t.destination?.index)};return e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},"Dashboards"),e.createElement(f.Z5,{onDragEnd:m},e.createElement(f.bK,{droppableId:"playlist-list",direction:"vertical"},t=>e.createElement("div",{ref:t.innerRef,...t.droppableProps},e.createElement(R,{items:i,onDelete:l}),t.placeholder))))};var W=a(59679),j=a(6129);function z(i){const[l,r]=(0,e.useState)(i??[]);(0,W.Z)(async()=>{for(const n of l)if(!n.dashboards){r(await(0,j.jc)(l));return}},[l]);const m=(0,e.useCallback)(n=>{n&&r([...l,{type:"dashboard_by_uid",value:n.uid}])},[l]),t=(0,e.useCallback)(n=>{const o=n[0];if(!o||l.find(h=>h.value===o))return;const u={type:"dashboard_by_tag",value:o};r([...l,u])},[l]),d=(0,e.useCallback)((n,o)=>{if(n===o||!l[n])return;const u=Array.from(l),[h]=u.splice(n,1);u.splice(o,0,h),r(u)},[l]),s=(0,e.useCallback)(n=>{const o=l.slice();o.splice(n,1),r(o)},[l]);return{items:l,addById:m,addByTag:t,deleteItem:s,moveItem:d}}const H=({onSubmit:i,playlist:l})=>{const[r,m]=(0,e.useState)(!1),{name:t,interval:d,items:s}=l,n=(0,e.useMemo)(()=>()=>(0,O.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:o,addById:u,addByTag:h,deleteItem:J,moveItem:V}=z(s),Z=A=>{m(!0),i({...A,items:o})};return e.createElement("div",null,e.createElement(I.l,{onSubmit:Z,validateOn:"onBlur"},({register:A,errors:b})=>{const G=o.length===0||Object.keys(b).length>0;return e.createElement(e.Fragment,null,e.createElement(g.g,{label:"Name",invalid:!!b.name,error:b?.name?.message},e.createElement(y.I,{type:"text",...A("name",{required:"Name is required"}),placeholder:"Name",defaultValue:t,"aria-label":v.wl.pages.PlaylistForm.name})),e.createElement(g.g,{label:"Interval",invalid:!!b.interval,error:b?.interval?.message},e.createElement(y.I,{type:"text",...A("interval",{required:"Interval is required"}),placeholder:"5m",defaultValue:d??"5m","aria-label":v.wl.pages.PlaylistForm.interval})),e.createElement(U,{items:o,deleteItem:J,moveItem:V}),e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},"Add dashboards"),e.createElement(g.g,{label:"Add by title"},e.createElement(p.o,{id:"dashboard-picker",onChange:u,key:o.length})),e.createElement(g.g,{label:"Add by tag"},e.createElement(c.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:n,onChange:h,placeholder:"Select a tag"}))),e.createElement(C.Lh,null,e.createElement(D.zx,{type:"submit",variant:"primary",disabled:G,icon:r?"fa fa-spinner":void 0},"Save"),e.createElement(D.Qj,{variant:"secondary",href:`${T.v.appSubUrl}/playlists`},"Cancel")))}))}}}]);

//# sourceMappingURL=PlaylistEditPage.f1e65510e3c0814c6402.js.map