One Hat Cyber Team

View File Name : PlaylistNewPage.13696f39b95b8416ede2.js

"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[7616],{23833:(B,E,t)=>{t.d(E,{$:()=>G});var e=t(96540),g=t(13544),h=t(32264),x=t(51253),c=t(88575),p=t(10354),b=t(84167),A=t(66864),P=t(55852),C=t(59429),T=t(99818),s=t(44836),F=t(24439),N=t(75494),I=t(32196),M=t(55127),O=t.n(M),S=t(40845),K=t(62930),$=t(14578),R=t(29158),U=t(46334);const L=({items:d,onDelete:l})=>{const o=(0,S.of)(z);if(!d?.length)return e.createElement("div",null,e.createElement("em",null,e.createElement(s.x6,{i18nKey:"playlist-edit.form.table-empty"},"Playlist is empty. Add dashboards below.")));const y=a=>{let m=a.type==="dashboard_by_tag"?"apps":"tag-alt";const r=[],n=a.dashboards?.[0];return a.dashboards?a.type==="dashboard_by_tag"?(r.push(e.createElement(U.E,{key:a.value,label:a.value,removeIcon:!1,count:0})),n?r.push(e.createElement("span",{key:"info"},"\xA0 ",O()("dashboard",a.dashboards.length,!0))):(m="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 No dashboards found")))):n?r.push(a.dashboards.length>1?e.createElement("span",{key:"info"},"Multiple items found: $",a.value):e.createElement("span",{key:"info"},n.name??a.value)):(m="exclamation-triangle",r.push(e.createElement("span",{key:"info"},"\xA0 Not found: ",a.value))):r.push(e.createElement(K.y,{key:"spinner"})),e.createElement(e.Fragment,null,e.createElement($.I,{name:m,className:o.rightMargin,key:"icon"}),r)};return e.createElement(e.Fragment,null,d.map((a,m)=>e.createElement(N.sx,{key:`${m}/${a.value}`,draggableId:`${m}`,index:m},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}`},y(a)),e.createElement("div",{className:o.actions},e.createElement(R.K,{name:"times",size:"md",onClick:()=>l(m),"data-testid":g.Tp.pages.PlaylistForm.itemDelete,tooltip:(0,s.t)("playlist-edit.form.table-delete","Delete playlist item")}),e.createElement($.I,{title:(0,s.t)("playlist-edit.form.table-drag","Drag and drop to reorder"),name:"draggabledots",size:"md"}))))))};function z(d){return{row:(0,I.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,I.css)`
      margin-right: 5px;
    `,actions:(0,I.css)`
      align-items: center;
      justify-content: center;
      display: flex;
    `,settings:(0,I.css)`
      label: settings;
      text-align: right;
    `}}const W=({items:d,deleteItem:l,moveItem:o})=>{const y=a=>{a.destination&&o(a.source.index,a.destination?.index)};return e.createElement(b.n,{label:(0,s.t)("playlist-edit.form.table-heading","Dashboards")},e.createElement(N.JY,{onDragEnd:y},e.createElement(N.gL,{droppableId:"playlist-list",direction:"vertical"},a=>e.createElement("div",{ref:a.innerRef,...a.droppableProps},e.createElement(L,{items:d,onDelete:l}),a.placeholder))))};var j=t(16817),V=t(86022);function Y(d){const[l,o]=(0,e.useState)(d??[]);(0,j.A)(async()=>{for(const n of l)if(!n.dashboards){o(await(0,V.qY)(l));return}},[l]);const y=(0,e.useCallback)(n=>{n&&o([...l,{type:"dashboard_by_uid",value:n.uid}])},[l]),a=(0,e.useCallback)(n=>{const i=n[0];if(!i||l.find(v=>v.value===i))return;const u={type:"dashboard_by_tag",value:i};o([...l,u])},[l]),m=(0,e.useCallback)((n,i)=>{if(n===i||!l[n])return;const u=Array.from(l),[v]=u.splice(n,1);u.splice(i,0,v),o(u)},[l]),r=(0,e.useCallback)(n=>{const i=l.slice();i.splice(n,1),o(i)},[l]);return{items:l,addByUID:y,addByTag:a,deleteItem:r,moveItem:m}}const G=({onSubmit:d,playlist:l})=>{const[o,y]=(0,e.useState)(!1),{name:a,interval:m,items:r}=l,n=(0,e.useMemo)(()=>()=>(0,F.getGrafanaSearcher)().tags({kind:["dashboard"]}),[]),{items:i,addByUID:u,addByTag:v,deleteItem:H,moveItem:J}=Y(r),X=D=>{y(!0),d({...D,items:i,uid:l.uid})};return e.createElement("div",null,e.createElement(x.l,{onSubmit:X,validateOn:"onBlur"},({register:D,errors:f})=>{const Q=i.length===0||Object.keys(f).length>0;return e.createElement(e.Fragment,null,e.createElement(c.D,{label:(0,s.t)("playlist-edit.form.name-label","Name"),invalid:!!f.name,error:f?.name?.message},e.createElement(p.p,{type:"text",...D("name",{required:(0,s.t)("playlist-edit.form.name-required","Name is required")}),placeholder:(0,s.t)("playlist-edit.form.name-placeholder","Name"),defaultValue:a,"aria-label":g.Tp.pages.PlaylistForm.name})),e.createElement(c.D,{label:(0,s.t)("playlist-edit.form.interval-label","Interval"),invalid:!!f.interval,error:f?.interval?.message},e.createElement(p.p,{type:"text",...D("interval",{required:(0,s.t)("playlist-edit.form.interval-required","Interval is required")}),placeholder:(0,s.t)("playlist-edit.form.interval-placeholder","5m"),defaultValue:m??"5m","aria-label":g.Tp.pages.PlaylistForm.interval})),e.createElement(W,{items:i,deleteItem:H,moveItem:J}),e.createElement(b.n,{label:(0,s.t)("playlist-edit.form.heading","Add dashboards")},e.createElement(c.D,{label:(0,s.t)("playlist-edit.form.add-title-label","Add by title")},e.createElement(C.b,{id:"dashboard-picker",onChange:u,key:i.length})),e.createElement(c.D,{label:(0,s.t)("playlist-edit.form.add-tag-label","Add by tag")},e.createElement(T.$,{isClearable:!0,tags:[],hideValues:!0,tagOptions:n,onChange:v,placeholder:(0,s.t)("playlist-edit.form.add-tag-placeholder","Select a tag")}))),e.createElement(A.Gy,null,e.createElement(P.$n,{type:"submit",variant:"primary",disabled:Q,icon:o?"spinner":void 0},e.createElement(s.x6,{i18nKey:"playlist-edit.form.save"},"Save")),e.createElement(P.z9,{variant:"secondary",href:`${h.$.appSubUrl}/playlists`},e.createElement(s.x6,{i18nKey:"playlist-edit.form.cancel"},"Cancel"))))}))}},62579:(B,E,t)=>{t.r(E),t.d(E,{PlaylistNewPage:()=>p,default:()=>b});var e=t(96540),g=t(12131),h=t(36830),x=t(23833),c=t(86022);const p=()=>{const[A]=(0,e.useState)((0,c.aV)()),P=async T=>{await(0,c.NF)().createPlaylist(T),g.Ny.push("/playlists")},C={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.Y,{navId:"dashboards/playlists",pageNav:C},e.createElement(h.Y.Contents,null,e.createElement(x.$,{onSubmit:P,playlist:A})))},b=p}}]);

//# sourceMappingURL=PlaylistNewPage.13696f39b95b8416ede2.js.map