"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[7616],{23833:(S,h,t)=>{t.d(h,{$:()=>G});var e=t(96540),g=t(13544),b=t(32264),u=t(88575),p=t(10354),v=t(84167),x=t(67061),P=t(55852),A=t(72235),C=t(59429),T=t(99818),s=t(44836),$=t(24439),B=t(55244),I=t(32196),F=t(55127),M=t.n(F),O=t(40845),K=t(62930),N=t(14578),R=t(29158),U=t(46334);const L=({items:d,onDelete:l})=>{const o=(0,O.of)(z);if(!d?.length)return e.createElement("div",null,e.createElement("em",null,e.createElement(s.x6,{i18nKey:"playlist-edit.form.table-empty"},"Playlist is empty. Add dashboards below.")));const c=a=>{let m=a.type==="dashboard_by_tag"?"apps":"tag-alt";const r=[],n=a.dashboards?.[0];return a.dashboards?a.type==="dashboard_by_tag"?(r.push(e.createElement(U.E,{key:a.value,label:a.value,removeIcon:!1,count:0})),n?r.push(e.createElement("span",{key:"info"},"\xA0 ",M()("dashboard",a.dashboards.length,!0))):(m="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 No dashboards found")))):n?r.push(a.dashboards.length>1?e.createElement("span",{key:"info"},"Multiple items found: $",a.value):e.createElement("span",{key:"info"},n.name??a.value)):(m="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 Not found: ",a.value))):r.push(e.createElement(K.y,{key:"spinner"})),e.createElement(e.Fragment,null,e.createElement(N.I,{name:m,className:o.rightMargin,key:"icon"}),r)};return e.createElement(e.Fragment,null,d.map((a,m)=>e.createElement(B.sx,{key:`${m}/${a.value}`,draggableId:`${m}`,index:m},r=>e.createElement("div",{className:o.row,ref:r.innerRef,...r.draggableProps,...r.dragHandleProps,role:"row"},e.createElement("div",{className:o.actions,role:"cell","aria-label":`Playlist item, ${a.type}, ${a.value}`},c(a)),e.createElement("div",{className:o.actions},e.createElement(R.K,{name:"times",size:"md",onClick:()=>l(m),"data-testid":g.Tp.pages.PlaylistForm.itemDelete,tooltip:(0,s.t)("playlist-edit.form.table-delete","Delete playlist item")}),e.createElement(N.I,{title:(0,s.t)("playlist-edit.form.table-drag","Drag and drop to reorder"),name:"draggabledots",size:"md"}))))))};function z(d){return{row:(0,I.css)`
      padding: 6px;
      background: ${d.colors.background.secondary};
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;

      border: 1px solid ${d.colors.border.medium};
      &:hover {
        border: 1px solid ${d.colors.border.strong};
      }
    `,rightMargin:(0,I.css)`
      margin-right: 5px;
    `,actions:(0,I.css)`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:(0,I.css)`
      label: settings;
      text-align: right;
    `}}const W=({items:d,deleteItem:l,moveItem:o})=>{const c=a=>{a.destination&&o(a.source.index,a.destination?.index)};return e.createElement(v.n,{label:(0,s.t)("playlist-edit.form.table-heading","Dashboards")},e.createElement(B.JY,{onDragEnd:c},e.createElement(B.gL,{droppableId:"playlist-list",direction:"vertical"},a=>e.createElement("div",{ref:a.innerRef,...a.droppableProps},e.createElement(L,{items:d,onDelete:l}),a.placeholder))))};var j=t(16817),V=t(12604);function Y(d){const[l,o]=(0,e.useState)(d??[]);(0,j.A)(async()=>{for(const n of l)if(!n.dashboards){o(await(0,V.qY)(l));return}},[l]);const c=(0,e.useCallback)(n=>{n&&o([...l,{type:"dashboard_by_uid",value:n.uid}])},[l]),a=(0,e.useCallback)(n=>{const i=n[0];if(!i||l.find(f=>f.value===i))return;const y={type:"dashboard_by_tag",value:i};o([...l,y])},[l]),m=(0,e.useCallback)((n,i)=>{if(n===i||!l[n])return;const y=Array.from(l),[f]=y.splice(n,1);y.splice(i,0,f),o(y)},[l]),r=(0,e.useCallback)(n=>{const i=l.slice();i.splice(n,1),o(i)},[l]);return{items:l,addByUID:c,addByTag:a,deleteItem:r,moveItem:m}}const G=({onSubmit:d,playlist:l})=>{const[o,c]=(0,e.useState)(!1),{name:a,interval:m,items:r}=l,n=(0,e.useMemo)(()=>()=>(0,$.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:i,addByUID:y,addByTag:f,deleteItem:H,moveItem:J}=Y(r),X=D=>{c(!0),d({...D,items:i,uid:l.uid})};return e.createElement(A.l,{onSubmit:X,validateOn:"onBlur"},({register:D,errors:E})=>{const Q=i.length===0||Object.keys(E).length>0;return e.createElement(e.Fragment,null,e.createElement(u.D,{label:(0,s.t)("playlist-edit.form.name-label","Name"),invalid:!!E.name,error:E?.name?.message},e.createElement(p.p,{type:"text",...D("name",{required:(0,s.t)("playlist-edit.form.name-required","Name is required")}),placeholder:(0,s.t)("playlist-edit.form.name-placeholder","Name"),defaultValue:a,"aria-label":g.Tp.pages.PlaylistForm.name})),e.createElement(u.D,{label:(0,s.t)("playlist-edit.form.interval-label","Interval"),invalid:!!E.interval,error:E?.interval?.message},e.createElement(p.p,{type:"text",...D("interval",{required:(0,s.t)("playlist-edit.form.interval-required","Interval is required")}),placeholder:(0,s.t)("playlist-edit.form.interval-placeholder","5m"),defaultValue:m??"5m","aria-label":g.Tp.pages.PlaylistForm.interval})),e.createElement(W,{items:i,deleteItem:H,moveItem:J}),e.createElement(v.n,{label:(0,s.t)("playlist-edit.form.heading","Add dashboards")},e.createElement(u.D,{label:(0,s.t)("playlist-edit.form.add-title-label","Add by title")},e.createElement(C.b,{id:"dashboard-picker",onChange:y,key:i.length})),e.createElement(u.D,{label:(0,s.t)("playlist-edit.form.add-tag-label","Add by tag")},e.createElement(T.$,{isClearable:!0,tags:[],hideValues:!0,tagOptions:n,onChange:f,placeholder:(0,s.t)("playlist-edit.form.add-tag-placeholder","Select a tag")}))),e.createElement(x.B,null,e.createElement(P.$n,{type:"submit",variant:"primary",disabled:Q,icon:o?"spinner":void 0},e.createElement(s.x6,{i18nKey:"playlist-edit.form.save"},"Save")),e.createElement(P.z9,{variant:"secondary",href:`${b.$.appSubUrl}/playlists`},e.createElement(s.x6,{i18nKey:"playlist-edit.form.cancel"},"Cancel"))))})}},62579:(S,h,t)=>{t.r(h),t.d(h,{PlaylistNewPage:()=>v,default:()=>x});var e=t(96540),g=t(12131),b=t(17205),u=t(23833),p=t(12604);const v=()=>{const[P]=(0,e.useState)((0,p.aV)()),A=async T=>{await(0,p.NF)().createPlaylist(T),g.Ny.push("/playlists")},C={text:"New 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(b.Y,{navId:"dashboards/playlists",pageNav:C},e.createElement(b.Y.Contents,null,e.createElement(u.$,{onSubmit:A,playlist:P})))},x=v}}]);

//# sourceMappingURL=PlaylistNewPage.7df4e124a2bff4dc3117.js.map