"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[2341],{68196:(e,a,t)=>{t.r(a),t.d(a,{PlaylistEditPage:()=>m,default:()=>h});t(68404);var l=t(18745),s=t(90923),n=t(69783),i=t(33801),r=t(8674),o=t(14411),d=t(20607),c=t(85895),u=t(41473),p=t(45916);const m=e=>{let{navModel:a,match:t}=e;const l=(0,n.useStyles2)(c.e),{playlist:r,loading:m}=(0,u.Z)(t.params.uid);return(0,p.jsx)(i.Z,{navModel:a,children:(0,p.jsxs)(i.Z.Contents,{isLoading:m,children:[(0,p.jsx)("h3",{className:l.subHeading,children:"Edit playlist"}),(0,p.jsx)("p",{className:l.description,children:"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."}),(0,p.jsx)(o.H,{onSubmit:async e=>{await(0,d.CE)(t.params.uid,e),s.locationService.push("/playlists")},playlist:r})]})})},h=(0,l.connect)((e=>({navModel:(0,r.h)(e.navIndex,"playlists")})))(m)},14411:(e,a,t)=>{t.d(a,{H:()=>C});var l=t(68404),s=t(16695),n=t(90923),i=t(69783),r=t(99151),o=t.n(r),d=t(28659),c=t(45916);const u=e=>{let{onChange:a,value:t,width:l,isClearable:s=!1,invalid:n,disabled:r,id:u,optionLabel:p="label",excludedDashboards:m}=e;const h=o()((e=>async function(e,a,t){const l=(await d.ae.search({type:"dash-db",query:e,limit:100})).map((e=>{let{id:t,uid:l="",title:s,folderTitle:n}=e;const i={id:t,uid:l,[a]:`${null!=n?n:"General"}/${s}`};return{value:i,[a]:i[a]}}));if(t)return l.filter((e=>{let{value:a}=e;return!t.includes(a.uid)}));return l}(e||"",p,m)),300),v=t?{value:t,[p]:t[p]}:void 0;return(0,c.jsx)(i.AsyncSelect,{inputId:u,width:l,isClearable:s,defaultOptions:!0,loadOptions:h,onChange:e=>{a(null==e?void 0:e.value)},placeholder:"Select dashboard",noOptionsMessage:"No dashboards found",value:v,invalid:n,disabled:r,getOptionLabel:e=>e[p]})};var p=t(67907),m=t(18293),h=t(36636),v=t(87261);const g=e=>{let{item:a,onDelete:t,onMoveDown:l,onMoveUp:n,first:r,last:o}=e;const d=(0,i.useStyles)(b);return(0,c.jsxs)("tr",{"aria-label":s.wl.pages.PlaylistForm.itemRow,children:["dashboard_by_id"===a.type?(0,c.jsxs)("td",{className:(0,h.cx)(d.td,d.item),children:[(0,c.jsx)(i.Icon,{name:"apps","aria-label":s.wl.pages.PlaylistForm.itemIdType}),(0,c.jsx)("span",{children:a.title})]}):null,"dashboard_by_tag"===a.type?(0,c.jsxs)("td",{className:(0,h.cx)(d.td,d.item),children:[(0,c.jsx)(i.Icon,{name:"tag-alt","aria-label":s.wl.pages.PlaylistForm.itemTagType}),(0,c.jsx)(v.e,{label:a.title,removeIcon:!1,count:0},a.id)]}):null,(0,c.jsxs)("td",{className:(0,h.cx)(d.td,d.settings),children:[r?null:(0,c.jsx)(i.IconButton,{name:"arrow-up",size:"md",onClick:e=>{e.preventDefault(),n(a)},"aria-label":s.wl.pages.PlaylistForm.itemMoveUp,type:"button"}),o?null:(0,c.jsx)(i.IconButton,{name:"arrow-down",size:"md",onClick:e=>{e.preventDefault(),l(a)},"aria-label":s.wl.pages.PlaylistForm.itemMoveDown,type:"button"}),(0,c.jsx)(i.IconButton,{name:"times",size:"md",onClick:e=>{e.preventDefault(),t(a)},"aria-label":s.wl.pages.PlaylistForm.itemDelete,type:"button"})]})]},a.title)};function b(e){return{td:h.css`
      label: td;
      line-height: 28px;
      max-width: 335px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    `,item:h.css`
      label: item;
      span {
        margin-left: ${e.spacing.xs};
      }
    `,settings:h.css`
      label: settings;
      text-align: right;
    `}}var y;const x=e=>{let{items:a,onMoveUp:t,onMoveDown:l,onDelete:s}=e;return 0===a.length?y||(y=(0,c.jsx)("tr",{children:(0,c.jsx)("td",{children:(0,c.jsx)("em",{children:"Playlist is empty. Add dashboards below."})})})):(0,c.jsx)(c.Fragment,{children:a.map(((e,n)=>{const i=0===n,r=n===a.length-1;return(0,c.jsx)(g,{first:i,last:r,item:e,onDelete:s,onMoveDown:l,onMoveUp:t},e.title)}))})};var f;const j=e=>{let{items:a,onMoveUp:t,onMoveDown:l,onDelete:s}=e;return(0,c.jsxs)("div",{className:"gf-form-group",children:[f||(f=(0,c.jsx)("h3",{className:"page-headering",children:"Dashboards"})),(0,c.jsx)("table",{className:"filter-table",children:(0,c.jsx)("tbody",{children:(0,c.jsx)(x,{items:a,onMoveUp:t,onMoveDown:l,onDelete:s})})})]})};var w;const D=new m.i,C=e=>{var a,t;let{onSubmit:r,playlist:o}=e;const{name:d,interval:m,items:h}=o,{items:v,addById:g,addByTag:b,deleteItem:y,moveDown:x,moveUp:f}=function(e){const[a,t]=(0,l.useState)(null!=e?e:[]),s=(0,l.useCallback)((e=>{if(!e||a.find((a=>a.id===e.id)))return;const l={id:e.id,title:e.label,type:"dashboard_by_id",value:e.id.toString(10),order:a.length+1};t([...a,l])}),[a]),n=(0,l.useCallback)((e=>{const l=e[0];if(!l||a.find((e=>e.value===l)))return;const s={title:l,type:"dashboard_by_tag",value:l,order:a.length+1};t([...a,s])}),[a]),i=(0,l.useCallback)(((e,l)=>{const s=[...a],n=s.indexOf(e),i=n+l;i>=0&&i<s.length&&(s.splice(n,1),s.splice(i,0,e)),t(s)}),[a]),r=(0,l.useCallback)((e=>{i(e,-1)}),[i]),o=(0,l.useCallback)((e=>{i(e,1)}),[i]),d=(0,l.useCallback)((e=>{t(a.filter((a=>a!==e)))}),[a]);return{items:a,addById:s,addByTag:n,deleteItem:d,moveDown:o,moveUp:r}}(h);return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(i.Form,{onSubmit:e=>r(Object.assign({},e,{items:v})),validateOn:"onBlur",children:e=>{var l,r;let{register:o,errors:h}=e;const C=0===v.length||Object.keys(h).length>0;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.Field,{label:"Name",invalid:!!h.name,error:null==h||null===(l=h.name)||void 0===l?void 0:l.message,children:(0,c.jsx)(i.Input,Object.assign({type:"text"},o("name",{required:"Name is required"}),{placeholder:"Name",defaultValue:d,"aria-label":s.wl.pages.PlaylistForm.name}))}),(0,c.jsx)(i.Field,{label:"Interval",invalid:!!h.interval,error:null==h||null===(r=h.interval)||void 0===r?void 0:r.message,children:(0,c.jsx)(i.Input,Object.assign({type:"text"},o("interval",{required:"Interval is required"}),{placeholder:"5m",defaultValue:null!=m?m:"5m","aria-label":s.wl.pages.PlaylistForm.interval}))}),a||(a=(0,c.jsx)(j,{items:v,onMoveUp:f,onMoveDown:x,onDelete:y})),(0,c.jsxs)("div",{className:"gf-form-group",children:[w||(w=(0,c.jsx)("h3",{className:"page-headering",children:"Add dashboards"})),t||(t=(0,c.jsx)(i.Field,{label:"Add by title",children:(0,c.jsx)(u,{onChange:g,id:"dashboard-picker",isClearable:!0})})),(0,c.jsx)(i.Field,{label:"Add by tag",children:(0,c.jsx)(p.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:D.getDashboardTags,onChange:b,placeholder:""})})]}),(0,c.jsxs)(i.HorizontalGroup,{children:[(0,c.jsx)(i.Button,{type:"submit",variant:"primary",disabled:C,children:"Save"}),(0,c.jsx)(i.LinkButton,{variant:"secondary",href:`${n.config.appSubUrl}/playlists`,children:"Cancel"})]})]})}})})}},20607:(e,a,t)=>{t.d(a,{A5:()=>c,CE:()=>o,Dv:()=>u,cg:()=>r,l8:()=>d});var l=t(90923),s=t(36537),n=t(58257),i=t(56340);async function r(e){await p((()=>(0,l.getBackendSrv)().post("/api/playlists",e)))}async function o(e,a){await p((()=>(0,l.getBackendSrv)().put(`/api/playlists/${e}`,a)))}async function d(e){await p((()=>(0,l.getBackendSrv)().delete(`/api/playlists/${e}`)),"Playlist deleted")}async function c(e){return await(0,l.getBackendSrv)().get(`/api/playlists/${e}`)}async function u(e){return await(0,l.getBackendSrv)().get("/api/playlists/",{query:e})}async function p(e){let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"Playlist saved";try{await e(),(0,i.WI)((0,s.$l)((0,n.AT)(a)))}catch(e){(0,i.WI)((0,s.$l)((0,n.t_)("Unable to save playlist",e)))}}},85895:(e,a,t)=>{t.d(a,{e:()=>s});var l=t(36636);function s(e){return{description:l.css`
      label: description;
      width: 555px;
      margin-bottom: 20px;
    `,subHeading:l.css`
      label: sub-heading;
      margin-bottom: ${e.spacing(2)};
    `}}},41473:(e,a,t)=>{t.d(a,{Z:()=>n});var l=t(68404),s=t(20607);function n(e){const[a,t]=(0,l.useState)({items:[],interval:"5m",name:"",uid:""}),[n,i]=(0,l.useState)(!0);return(0,l.useEffect)((()=>{(async()=>{if(!e)return void i(!1);const a=await(0,s.A5)(e);t(a),i(!1)})()}),[e]),{playlist:a,loading:n}}}}]);
//# sourceMappingURL=PlaylistEditPage.ff5ae39b3eb7402e331f.js.map