"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9975],{38495:(B,E,t)=>{t.d(E,{H:()=>V});var e=t(39953),u=t(28888),h=t(32688),C=t(85830),m=t(96227),p=t(38637),D=t(12223),b=t(4919),A=t(56516),N=t(40835),n=t(62679),M=t(17231),T=t(24058),P=t(41407),O=t(71757),K=t.n(O),S=t(82803),F=t(28409),x=t(12190),$=t(68497),R=t(90139);const U=({items:d,onDelete:l})=>{const o=(0,S.wW)(L);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 ",K()("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(x.J,{name:c,className:o.rightMargin,key:"icon"}),r)};return e.createElement(e.Fragment,null,d.map((a,c)=>e.createElement(T._l,{key:`${c}/${a.value}`,draggableId:`${c}`,index:c},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}`},g(a)),e.createElement("div",{className:o.actions},e.createElement($.h,{name:"times",size:"md",onClick:()=>l(c),"data-testid":u.wl.pages.PlaylistForm.itemDelete,tooltip:(0,n.t)("playlist-edit.form.table-delete","Delete playlist item")}),e.createElement(x.J,{title:(0,n.t)("playlist-edit.form.table-drag","Drag and drop to reorder"),name:"draggabledots",size:"md"}))))))};function L(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:o})=>{const g=a=>{a.destination&&o(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(T.Z5,{onDragEnd:g},e.createElement(T.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 j=t(20653),z=t(89633);function H(d){const[l,o]=(0,e.useState)(d??[]);(0,j.Z)(async()=>{for(const s of l)if(!s.dashboards){o(await(0,z.jc)(l));return}},[l]);const g=(0,e.useCallback)(s=>{s&&o([...l,{type:"dashboard_by_uid",value:s.uid}])},[l]),a=(0,e.useCallback)(s=>{const i=s[0];if(!i||l.find(f=>f.value===i))return;const y={type:"dashboard_by_tag",value:i};o([...l,y])},[l]),c=(0,e.useCallback)((s,i)=>{if(s===i||!l[s])return;const y=Array.from(l),[f]=y.splice(s,1);y.splice(i,0,f),o(y)},[l]),r=(0,e.useCallback)(s=>{const i=l.slice();i.splice(s,1),o(i)},[l]);return{items:l,addByUID:g,addByTag:a,deleteItem:r,moveItem:c}}const V=({onSubmit:d,playlist:l})=>{const[o,g]=(0,e.useState)(!1),{name:a,interval:c,items:r}=l,s=(0,e.useMemo)(()=>()=>(0,M.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:i,addByUID:y,addByTag:f,deleteItem:J,moveItem:Z}=H(r),G=I=>{g(!0),d({...I,items:i,uid:l.uid})};return e.createElement("div",null,e.createElement(C.l,{onSubmit:G,validateOn:"onBlur"},({register:I,errors:v})=>{const Q=i.length===0||Object.keys(v).length>0;return e.createElement(e.Fragment,null,e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.name-label","Name"),invalid:!!v.name,error:v?.name?.message},e.createElement(p.I,{type:"text",...I("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":u.wl.pages.PlaylistForm.name})),e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.interval-label","Interval"),invalid:!!v.interval,error:v?.interval?.message},e.createElement(p.I,{type:"text",...I("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":u.wl.pages.PlaylistForm.interval})),e.createElement(W,{items:i,deleteItem:J,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(A.o,{id:"dashboard-picker",onChange:y,key:i.length})),e.createElement(m.g,{label:(0,n.t)("playlist-edit.form.add-tag-label","Add by tag")},e.createElement(N.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:s,onChange:f,placeholder:(0,n.t)("playlist-edit.form.add-tag-placeholder","Select a tag")}))),e.createElement(D.Lh,null,e.createElement(b.zx,{type:"submit",variant:"primary",disabled:Q,icon:o?"fa fa-spinner":void 0},e.createElement(n.cC,{i18nKey:"playlist-edit.form.save"},"Save")),e.createElement(b.Qj,{variant:"secondary",href:`${h.config.appSubUrl}/playlists`},e.createElement(n.cC,{i18nKey:"playlist-edit.form.cancel"},"Cancel"))))}))}},96455:(B,E,t)=>{t.r(E),t.d(E,{PlaylistNewPage:()=>p,default:()=>D});var e=t(39953),u=t(13601),h=t(13253),C=t(38495),m=t(89633);const p=()=>{const[b]=(0,e.useState)((0,m.d5)()),A=async n=>{await(0,m.K9)().createPlaylist(n),u.E1.push("/playlists")},N={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(h.T,{navId:"dashboards/playlists",pageNav:N},e.createElement(h.T.Contents,null,e.createElement(C.H,{onSubmit:A,playlist:b})))},D=p}}]);

//# sourceMappingURL=PlaylistNewPage.04a4a772468f58ba886f.js.map