1#@!#!123s

: / usr / share / grafana / public / build /
Filename : PlaylistNewPage.78a236164901ea5a42f7.js
back
"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9975],{69e3:(B,f,a)=>{a.d(f,{H:()=>H});var e=a(27702),u=a(74639),p=a(34667),I=a(23839),c=a(22209),y=a(1128),C=a(64022),h=a(66670),D=a(81290),A=a(1041),N=a(63064),T=a(85532),b=a(42844),M=a(6772),O=a.n(M),S=a(66310),F=a(62108),x=a(73453),$=a(67437),R=a(8311);const L=({items:d,onDelete:l})=>{const r=(0,S.wW)(K);if(!d?.length)return e.createElement("div",null,e.createElement("em",null,"Playlist is empty. Add dashboards below."));const m=t=>{let i=t.type==="dashboard_by_tag"?"apps":"tag-alt";const s=[],n=t.dashboards?.[0];return t.dashboards?t.type==="dashboard_by_tag"?(s.push(e.createElement(R.e,{key:t.value,label:t.value,removeIcon:!1,count:0})),n?s.push(e.createElement("span",{key:"info"},"\xA0 ",O()("dashboard",t.dashboards.length,!0))):(i="exclamation-triangle",s.push(e.createElement("span",{key:"info"},"\xA0 No dashboards found")))):n?s.push(t.dashboards.length>1?e.createElement("span",{key:"info"},"Multiple items found: $",t.value):e.createElement("span",{key:"info"},n.name??t.value)):(i="exclamation-triangle",s.push(e.createElement("span",{key:"info"},"\xA0 Not found: ",t.value))):s.push(e.createElement(F.$,{key:"spinner"})),e.createElement(e.Fragment,null,e.createElement(x.J,{name:i,className:r.rightMargin,key:"icon"}),s)};return e.createElement(e.Fragment,null,d.map((t,i)=>e.createElement(T._l,{key:`${i}/${t.value}`,draggableId:`${i}`,index:i},s=>e.createElement("div",{className:r.row,ref:s.innerRef,...s.draggableProps,...s.dragHandleProps,role:"row"},e.createElement("div",{className:r.actions,role:"cell","aria-label":`Playlist item, ${t.type}, ${t.value}`},m(t)),e.createElement("div",{className:r.actions},e.createElement($.h,{name:"times",size:"md",onClick:()=>l(i),tooltip:u.wl.pages.PlaylistForm.itemDelete}),e.createElement(x.J,{title:"Drag and drop to reorder",name:"draggabledots",size:"md"}))))))};function K(d){return{row:(0,b.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,b.css)`
      margin-right: 5px;
    `,actions:(0,b.css)`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:(0,b.css)`
      label: settings;
      text-align: right;
    `}}const U=({items:d,deleteItem:l,moveItem:r})=>{const m=t=>{t.destination&&r(t.source.index,t.destination?.index)};return e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},"Dashboards"),e.createElement(T.Z5,{onDragEnd:m},e.createElement(T.bK,{droppableId:"playlist-list",direction:"vertical"},t=>e.createElement("div",{ref:t.innerRef,...t.droppableProps},e.createElement(L,{items:d,onDelete:l}),t.placeholder))))};var W=a(25111),j=a(60086);function z(d){const[l,r]=(0,e.useState)(d??[]);(0,W.Z)(async()=>{for(const n of l)if(!n.dashboards){r(await(0,j.jc)(l));return}},[l]);const m=(0,e.useCallback)(n=>{n&&r([...l,{type:"dashboard_by_uid",value:n.uid}])},[l]),t=(0,e.useCallback)(n=>{const o=n[0];if(!o||l.find(v=>v.value===o))return;const g={type:"dashboard_by_tag",value:o};r([...l,g])},[l]),i=(0,e.useCallback)((n,o)=>{if(n===o||!l[n])return;const g=Array.from(l),[v]=g.splice(n,1);g.splice(o,0,v),r(g)},[l]),s=(0,e.useCallback)(n=>{const o=l.slice();o.splice(n,1),r(o)},[l]);return{items:l,addById:m,addByTag:t,deleteItem:s,moveItem:i}}const H=({onSubmit:d,playlist:l})=>{const[r,m]=(0,e.useState)(!1),{name:t,interval:i,items:s}=l,n=(0,e.useMemo)(()=>()=>(0,N.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:o,addById:g,addByTag:v,deleteItem:V,moveItem:J}=z(s),Z=P=>{m(!0),d({...P,items:o})};return e.createElement("div",null,e.createElement(I.l,{onSubmit:Z,validateOn:"onBlur"},({register:P,errors:E})=>{const G=o.length===0||Object.keys(E).length>0;return e.createElement(e.Fragment,null,e.createElement(c.g,{label:"Name",invalid:!!E.name,error:E?.name?.message},e.createElement(y.I,{type:"text",...P("name",{required:"Name is required"}),placeholder:"Name",defaultValue:t,"aria-label":u.wl.pages.PlaylistForm.name})),e.createElement(c.g,{label:"Interval",invalid:!!E.interval,error:E?.interval?.message},e.createElement(y.I,{type:"text",...P("interval",{required:"Interval is required"}),placeholder:"5m",defaultValue:i??"5m","aria-label":u.wl.pages.PlaylistForm.interval})),e.createElement(U,{items:o,deleteItem:V,moveItem:J}),e.createElement("div",{className:"gf-form-group"},e.createElement("h3",{className:"page-headering"},"Add dashboards"),e.createElement(c.g,{label:"Add by title"},e.createElement(D.o,{id:"dashboard-picker",onChange:g,key:o.length})),e.createElement(c.g,{label:"Add by tag"},e.createElement(A.D,{isClearable:!0,tags:[],hideValues:!0,tagOptions:n,onChange:v,placeholder:"Select a tag"}))),e.createElement(C.Lh,null,e.createElement(h.zx,{type:"submit",variant:"primary",disabled:G,icon:r?"fa fa-spinner":void 0},"Save"),e.createElement(h.Qj,{variant:"secondary",href:`${p.config.appSubUrl}/playlists`},"Cancel")))}))}},23126:(B,f,a)=>{a.r(f),a.d(f,{PlaylistNewPage:()=>y,default:()=>C});var e=a(27702),u=a(26129),p=a(44644),I=a(69e3),c=a(60086);const y=()=>{const[h]=(0,e.useState)((0,c.d5)()),D=async N=>{await(0,c.cg)(N),u.E1.push("/playlists")},A={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(p.T,{navId:"dashboards/playlists",pageNav:A},e.createElement(p.T.Contents,null,e.createElement(I.H,{onSubmit:D,playlist:h})))},C=y}}]);

//# sourceMappingURL=PlaylistNewPage.78a236164901ea5a42f7.js.map