"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9975],{48109:(e,a,s)=>{s.d(a,{H:()=>B});var l,r,t,n,i=s(76687),d=s(28441),o=s(67273),c=s(56481),u=s(45550),h=s(9120),g=s(7053),m=s(55312),p=s(55516),b=s(48833),v=s(27556),x=s(56618),j=s(77813),y=s(71757),f=s.n(y),w=s(27668),I=s(55816),N=s(39756),k=s(2338),C=s(63984),$=s(52010);const P=e=>{let{items:a,onDelete:s}=e;const i=(0,w.wW)(O);if(null==a||!a.length)return l||(l=(0,$.jsx)("div",{children:(0,$.jsx)("em",{children:"Playlist is empty. Add dashboards below."})}));const o=e=>{var a;let s="dashboard_by_tag"===e.type?"apps":"tag-alt";const l=[],n=null===(a=e.dashboards)||void 0===a?void 0:a[0];if(e.dashboards)if("dashboard_by_tag"===e.type)l.push((0,$.jsx)(C.e,{label:e.value,removeIcon:!1,count:0},e.value)),n?l.push((0,$.jsxs)("span",{children:["  ",f()("dashboard",e.dashboards.length,!0)]},"info")):(s="exclamation-triangle",l.push(t||(t=(0,$.jsx)("span",{children:"  No dashboards found"},"info"))));else if(n){var d;l.push(e.dashboards.length>1?(0,$.jsxs)("span",{children:["Multiple items found: $",e.value]},"info"):(0,$.jsx)("span",{children:null!==(d=n.name)&&void 0!==d?d:e.value},"info"))}else s="exclamation-triangle",l.push((0,$.jsxs)("span",{children:["  Not found: ",e.value]},"info"));else l.push(r||(r=(0,$.jsx)(I.$,{},"spinner")));return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(N.J,{name:s,className:i.rightMargin},"icon"),l]})};return(0,$.jsx)($.Fragment,{children:a.map(((e,a)=>(0,$.jsx)(x._l,{draggableId:`${a}`,index:a,children:l=>(0,$.jsxs)("div",Object.assign({className:i.row,ref:l.innerRef},l.draggableProps,l.dragHandleProps,{role:"row",children:[(0,$.jsx)("div",{className:i.actions,role:"cell","aria-label":`Playlist item, ${e.type}, ${e.value}`,children:o(e)}),(0,$.jsxs)("div",{className:i.actions,children:[(0,$.jsx)(k.h,{name:"times",size:"md",onClick:()=>s(a),"aria-label":d.wl.pages.PlaylistForm.itemDelete,type:"button"}),n||(n=(0,$.jsx)(N.J,{title:"Drag and drop to reorder",name:"draggabledots",size:"md"}))]})]}))},`${a}/${e.value}`)))})};function O(e){return{row:j.css`
      padding: 6px;
      background: ${e.colors.background.secondary};
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;

      border: 1px solid ${e.colors.border.medium};
      &:hover {
        border: 1px solid ${e.colors.border.strong};
      }
    `,rightMargin:j.css`
      margin-right: 5px;
    `,actions:j.css`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:j.css`
      label: settings;
      text-align: right;
    `}}var _;const S=e=>{var a;let{items:s,deleteItem:l,moveItem:r}=e;return(0,$.jsxs)("div",{className:"gf-form-group",children:[_||(_=(0,$.jsx)("h3",{className:"page-headering",children:"Dashboards"})),(0,$.jsx)(x.Z5,{onDragEnd:e=>{var a;e.destination&&r(e.source.index,null===(a=e.destination)||void 0===a?void 0:a.index)},children:(0,$.jsx)(x.bK,{droppableId:"playlist-list",direction:"vertical",children:e=>(0,$.jsxs)("div",Object.assign({ref:e.innerRef},e.droppableProps,{children:[a||(a=(0,$.jsx)(P,{items:s,onDelete:l})),e.placeholder]}))})})]})};var A,D=s(68021),F=s(59163);const B=e=>{var a;let{onSubmit:s,playlist:l}=e;const{name:r,interval:t,items:n}=l,x=(0,i.useMemo)((()=>()=>(0,v.O)().tags({kind:["dashboard"]})),[]),{items:j,addById:y,addByTag:f,deleteItem:w,moveItem:I}=function(e){const[a,s]=(0,i.useState)(null!=e?e:[]);(0,D.Z)((async()=>{for(const e of a)if(!e.dashboards)return void s(await(0,F.jc)(a))}),[a]);const l=(0,i.useCallback)((e=>{e&&s([...a,{type:"dashboard_by_uid",value:e.uid}])}),[a]),r=(0,i.useCallback)((e=>{const l=e[0];if(!l||a.find((e=>e.value===l)))return;const r={type:"dashboard_by_tag",value:l};s([...a,r])}),[a]),t=(0,i.useCallback)(((e,l)=>{if(e===l||!a[e])return;const r=Array.from(a),[t]=r.splice(e,1);r.splice(l,0,t),s(r)}),[a]),n=(0,i.useCallback)((e=>{const l=a.slice();l.splice(e,1),s(l)}),[a]);return{items:a,addById:l,addByTag:r,deleteItem:n,moveItem:t}}(n);return(0,$.jsx)("div",{children:(0,$.jsx)(c.l,{onSubmit:e=>s(Object.assign({},e,{items:j})),validateOn:"onBlur",children:e=>{var s,l;let{register:n,errors:i}=e;const c=0===j.length||Object.keys(i).length>0;return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(u.g,{label:"Name",invalid:!!i.name,error:null==i||null===(s=i.name)||void 0===s?void 0:s.message,children:(0,$.jsx)(h.I,Object.assign({type:"text"},n("name",{required:"Name is required"}),{placeholder:"Name",defaultValue:r,"aria-label":d.wl.pages.PlaylistForm.name}))}),(0,$.jsx)(u.g,{label:"Interval",invalid:!!i.interval,error:null==i||null===(l=i.interval)||void 0===l?void 0:l.message,children:(0,$.jsx)(h.I,Object.assign({type:"text"},n("interval",{required:"Interval is required"}),{placeholder:"5m",defaultValue:null!=t?t:"5m","aria-label":d.wl.pages.PlaylistForm.interval}))}),a||(a=(0,$.jsx)(S,{items:j,deleteItem:w,moveItem:I})),(0,$.jsxs)("div",{className:"gf-form-group",children:[A||(A=(0,$.jsx)("h3",{className:"page-headering",children:"Add dashboards"})),(0,$.jsx)(u.g,{label:"Add by title",children:(0,$.jsx)(p.o,{id:"dashboard-picker",onChange:y},j.length)}),(0,$.jsx)(u.g,{label:"Add by tag",children:(0,$.jsx)(b.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:x,onChange:f,placeholder:"Select a tag"})})]}),(0,$.jsxs)(g.Lh,{children:[(0,$.jsx)(m.zx,{type:"submit",variant:"primary",disabled:c,children:"Save"}),(0,$.jsx)(m.Qj,{variant:"secondary",href:`${o.v.appSubUrl}/playlists`,children:"Cancel"})]})]})}})})}},22997:(e,a,s)=>{s.r(a),s.d(a,{PlaylistNewPage:()=>o,default:()=>c});var l=s(76687),r=s(49622),t=s(28781),n=s(48109),i=s(59163),d=s(52010);const o=()=>{const[e]=(0,l.useState)((0,i.d5)());return(0,d.jsx)(t.T,{navId:"dashboards/playlists",pageNav:{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."},children:(0,d.jsx)(t.T.Contents,{children:(0,d.jsx)(n.H,{onSubmit:async e=>{await(0,i.cg)(e),r.E1.push("/playlists")},playlist:e})})})},c=o}}]);
//# sourceMappingURL=PlaylistNewPage.34b54addba7b8f901fb8.js.map