"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2341],{15171:(K,P,t)=>{t.r(P),t.d(P,{PlaylistEditPage:()=>f,default:()=>M});var e=t(39953),E=t(20653),O=t(13601),I=t(13253),m=t(62679),C=t(38495),T=t(89633);const f=({match:D})=>{const n=(0,T.K9)(),y=(0,E.Z)(()=>n.getPlaylist(D.params.uid),[D.params]),v=async x=>{await n.updatePlaylist(x),O.E1.push("/playlists")},p={text:(0,m.t)("playlist-edit.title","Edit playlist"),subTitle:(0,m.t)("playlist-edit.sub-title","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:p},e.createElement(I.T.Contents,{isLoading:y.loading},y.error&&e.createElement("div",null,e.createElement(m.cC,{i18nKey:"playlist-edit.error-prefix"},"Error loading playlist:"),JSON.stringify(y.error)),y.value&&e.createElement(C.H,{onSubmit:v,playlist:y.value})))},M=f},38495:(K,P,t)=>{t.d(P,{H:()=>J});var e=t(39953),E=t(28888),O=t(32688),I=t(85830),m=t(96227),C=t(38637),T=t(12223),f=t(4919),M=t(56516),D=t(40835),n=t(62679),y=t(17231),v=t(24058),p=t(41407),x=t(71757),N=t.n(x),S=t(82803),F=t(28409),B=t(12190),L=t(68497),R=t(90139);const U=({items:d,onDelete:l})=>{const i=(0,S.wW)($);if(!d?.length)return e.createElement("div",null,e.createElement("em",null,e.createElement(n.cC,{i18nKey:"playlist-edit.form.table-empty"},"Playlist is empty. Add dashboards below.")));const g=a=>{let c=a.type==="dashboard_by_tag"?"apps":"tag-alt";const r=[],s=a.dashboards?.[0];return a.dashboards?a.type==="dashboard_by_tag"?(r.push(e.createElement(R.e,{key:a.value,label:a.value,removeIcon:!1,count:0})),s?r.push(e.createElement("span",{key:"info"},"\xA0 ",N()("dashboard",a.dashboards.length,!0))):(c="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 No dashboards found")))):s?r.push(a.dashboards.length>1?e.createElement("span",{key:"info"},"Multiple items found: $",a.value):e.createElement("span",{key:"info"},s.name??a.value)):(c="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 Not found: ",a.value))):r.push(e.createElement(F.$,{key:"spinner"})),e.createElement(e.Fragment,null,e.createElement(B.J,{name:c,className:i.rightMargin,key:"icon"}),r)};return e.createElement(e.Fragment,null,d.map((a,c)=>e.createElement(v._l,{key:`${c}/${a.value}`,draggableId:`${c}`,index:c},r=>e.createElement("div",{className:i.row,ref:r.innerRef,...r.draggableProps,...r.dragHandleProps,role:"row"},e.createElement("div",{className:i.actions,role:"cell","aria-label":`Playlist item, ${a.type}, ${a.value}`},g(a)),e.createElement("div",{className:i.actions},e.createElement(L.h,{name:"times",size:"md",onClick:()=>l(c),"data-testid":E.wl.pages.PlaylistForm.itemDelete,tooltip:(0,n.t)("playlist-edit.form.table-delete","Delete playlist item")}),e.createElement(B.J,{title:(0,n.t)("playlist-edit.form.table-drag","Drag and drop to reorder"),name:"draggabledots",size:"md"}))))))};function $(d){return{row:(0,p.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,p.css)`
      margin-right: 5px;
    `,actions:(0,p.css)`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:(0,p.css)`
      label: settings;
      text-align: right;
    `}}const W=({items:d,deleteItem:l,moveItem:i})=>{const g=a=>{a.destination&&i(a.source.index,a.destination?.index)};return e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},e.createElement(n.cC,{i18nKey:"playlist-edit.form.table-heading"},"Dashboards")),e.createElement(v.Z5,{onDragEnd:g},e.createElement(v.bK,{droppableId:"playlist-list",direction:"vertical"},a=>e.createElement("div",{ref:a.innerRef,...a.droppableProps},e.createElement(U,{items:d,onDelete:l}),a.placeholder))))};var z=t(20653),j=t(89633);function H(d){const[l,i]=(0,e.useState)(d??[]);(0,z.Z)(async()=>{for(const s of l)if(!s.dashboards){i(await(0,j.jc)(l));return}},[l]);const g=(0,e.useCallback)(s=>{s&&i([...l,{type:"dashboard_by_uid",value:s.uid}])},[l]),a=(0,e.useCallback)(s=>{const o=s[0];if(!o||l.find(h=>h.value===o))return;const u={type:"dashboard_by_tag",value:o};i([...l,u])},[l]),c=(0,e.useCallback)((s,o)=>{if(s===o||!l[s])return;const u=Array.from(l),[h]=u.splice(s,1);u.splice(o,0,h),i(u)},[l]),r=(0,e.useCallback)(s=>{const o=l.slice();o.splice(s,1),i(o)},[l]);return{items:l,addByUID:g,addByTag:a,deleteItem:r,moveItem:c}}const J=({onSubmit:d,playlist:l})=>{const[i,g]=(0,e.useState)(!1),{name:a,interval:c,items:r}=l,s=(0,e.useMemo)(()=>()=>(0,y.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:o,addByUID:u,addByTag:h,deleteItem:V,moveItem:Z}=H(r),G=A=>{g(!0),d({...A,items:o,uid:l.uid})};return e.createElement("div",null,e.createElement(I.l,{onSubmit:G,validateOn:"onBlur"},({register:A,errors:b})=>{const Q=o.length===0||Object.keys(b).length>0;return e.createElement(e.Fragment,null,e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.name-label","Name"),invalid:!!b.name,error:b?.name?.message},e.createElement(C.I,{type:"text",...A("name",{required:(0,n.t)("playlist-edit.form.name-required","Name is required")}),placeholder:(0,n.t)("playlist-edit.form.name-placeholder","Name"),defaultValue:a,"aria-label":E.wl.pages.PlaylistForm.name})),e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.interval-label","Interval"),invalid:!!b.interval,error:b?.interval?.message},e.createElement(C.I,{type:"text",...A("interval",{required:(0,n.t)("playlist-edit.form.interval-required","Interval is required")}),placeholder:(0,n.t)("playlist-edit.form.interval-placeholder","5m"),defaultValue:c??"5m","aria-label":E.wl.pages.PlaylistForm.interval})),e.createElement(W,{items:o,deleteItem:V,moveItem:Z}),e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},e.createElement(n.cC,{i18nKey:"playlist-edit.form.heading"},"Add dashboards")),e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.add-title-label","Add by title")},e.createElement(M.o,{id:"dashboard-picker",onChange:u,key:o.length})),e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.add-tag-label","Add by tag")},e.createElement(D.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:s,onChange:h,placeholder:(0,n.t)("playlist-edit.form.add-tag-placeholder","Select a tag")}))),e.createElement(T.Lh,null,e.createElement(f.zx,{type:"submit",variant:"primary",disabled:Q,icon:i?"fa fa-spinner":void 0},e.createElement(n.cC,{i18nKey:"playlist-edit.form.save"},"Save")),e.createElement(f.Qj,{variant:"secondary",href:`${O.config.appSubUrl}/playlists`},e.createElement(n.cC,{i18nKey:"playlist-edit.form.cancel"},"Cancel"))))}))}}}]);

//# sourceMappingURL=PlaylistEditPage.507cd93e2ef29d08b8cc.js.map