ck-ops/code/grafana/public/build/PlaylistNewPage.647f02e6de724871b34a.js

"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9975],{3485:(e,a,t)=>{t.d(a,{H:()=>f});var l=t(68404),s=t(16695),n=t(90923),i=t(69783),r=t(52310),o=t(67907),d=t(18293),c=t(36636),u=t(87261),p=t(45916);const m=e=>{let{item:a,onDelete:t,onMoveDown:l,onMoveUp:n,first:r,last:o}=e;const d=(0,i.useStyles)(g);return(0,p.jsxs)("tr",{"aria-label":s.wl.pages.PlaylistForm.itemRow,children:["dashboard_by_id"===a.type?(0,p.jsxs)("td",{className:(0,c.cx)(d.td,d.item),children:[(0,p.jsx)(i.Icon,{name:"apps","aria-label":s.wl.pages.PlaylistForm.itemIdType}),(0,p.jsx)("span",{children:a.title})]}):null,"dashboard_by_tag"===a.type?(0,p.jsxs)("td",{className:(0,c.cx)(d.td,d.item),children:[(0,p.jsx)(i.Icon,{name:"tag-alt","aria-label":s.wl.pages.PlaylistForm.itemTagType}),(0,p.jsx)(u.e,{label:a.title,removeIcon:!1,count:0},a.id)]}):null,(0,p.jsxs)("td",{className:(0,c.cx)(d.td,d.settings),children:[r?null:(0,p.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,p.jsx)(i.IconButton,{name:"arrow-down",size:"md",onClick:e=>{e.preventDefault(),l(a)},"aria-label":s.wl.pages.PlaylistForm.itemMoveDown,type:"button"}),(0,p.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 g(e){return{td:c.css`
      label: td;
      line-height: 28px;
      max-width: 335px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    `,item:c.css`
      label: item;
      span {
        margin-left: ${e.spacing.xs};
      }
    `,settings:c.css`
      label: settings;
      text-align: right;
    `}}var h;const v=e=>{let{items:a,onMoveUp:t,onMoveDown:l,onDelete:s}=e;return 0===a.length?h||(h=(0,p.jsx)("tr",{children:(0,p.jsx)("td",{children:(0,p.jsx)("em",{children:"Playlist is empty. Add dashboards below."})})})):(0,p.jsx)(p.Fragment,{children:a.map(((e,n)=>{const i=0===n,r=n===a.length-1;return(0,p.jsx)(m,{first:i,last:r,item:e,onDelete:s,onMoveDown:l,onMoveUp:t},e.title)}))})};var b;const y=e=>{let{items:a,onMoveUp:t,onMoveDown:l,onDelete:s}=e;return(0,p.jsxs)("div",{className:"gf-form-group",children:[b||(b=(0,p.jsx)("h3",{className:"page-headering",children:"Dashboards"})),(0,p.jsx)("table",{className:"filter-table",children:(0,p.jsx)("tbody",{children:(0,p.jsx)(v,{items:a,onMoveUp:t,onMoveDown:l,onDelete:s})})})]})};var x;const j=new d.i,f=e=>{var a,t;let{onSubmit:d,playlist:c}=e;const{name:u,interval:m,items:g}=c,{items:h,addById:v,addByTag:b,deleteItem:f,moveDown:w,moveUp:D}=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}}(g);return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(i.Form,{onSubmit:e=>d(Object.assign({},e,{items:h})),validateOn:"onBlur",children:e=>{var l,d;let{register:c,errors:g}=e;const k=0===h.length||Object.keys(g).length>0;return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(i.Field,{label:"Name",invalid:!!g.name,error:null==g||null===(l=g.name)||void 0===l?void 0:l.message,children:(0,p.jsx)(i.Input,Object.assign({type:"text"},c("name",{required:"Name is required"}),{placeholder:"Name",defaultValue:u,"aria-label":s.wl.pages.PlaylistForm.name}))}),(0,p.jsx)(i.Field,{label:"Interval",invalid:!!g.interval,error:null==g||null===(d=g.interval)||void 0===d?void 0:d.message,children:(0,p.jsx)(i.Input,Object.assign({type:"text"},c("interval",{required:"Interval is required"}),{placeholder:"5m",defaultValue:null!=m?m:"5m","aria-label":s.wl.pages.PlaylistForm.interval}))}),a||(a=(0,p.jsx)(y,{items:h,onMoveUp:D,onMoveDown:w,onDelete:f})),(0,p.jsxs)("div",{className:"gf-form-group",children:[x||(x=(0,p.jsx)("h3",{className:"page-headering",children:"Add dashboards"})),t||(t=(0,p.jsx)(i.Field,{label:"Add by title",children:(0,p.jsx)(r.F,{onChange:v,id:"dashboard-picker",isClearable:!0})})),(0,p.jsx)(i.Field,{label:"Add by tag",children:(0,p.jsx)(o.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:j.getDashboardTags,onChange:b,placeholder:""})})]}),(0,p.jsxs)(i.HorizontalGroup,{children:[(0,p.jsx)(i.Button,{type:"submit",variant:"primary",disabled:k,children:"Save"}),(0,p.jsx)(i.LinkButton,{variant:"secondary",href:`${n.config.appSubUrl}/playlists`,children:"Cancel"})]})]})}})})}},39493:(e,a,t)=>{t.r(a),t.d(a,{PlaylistNewPage:()=>m,default:()=>g});t(68404);var l=t(18745),s=t(90923),n=t(69783),i=t(33801),r=t(8674),o=t(3485),d=t(20607),c=t(85895),u=t(41473),p=t(45916);const m=e=>{let{navModel:a}=e;const t=(0,n.useStyles2)(c.e),{playlist:l,loading:r}=(0,u.Z)();return(0,p.jsx)(i.Z,{navModel:a,children:(0,p.jsxs)(i.Z.Contents,{isLoading:r,children:[(0,p.jsx)("h3",{className:t.subHeading,children:"New Playlist"}),(0,p.jsx)("p",{className:t.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.cg)(e),s.locationService.push("/playlists")},playlist:l})]})})},g=(0,l.connect)((e=>({navModel:(0,r.h)(e.navIndex,"playlists")})))(m)},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=PlaylistNewPage.647f02e6de724871b34a.js.map