ApiKeysPage.a269349dc83fd8e96d37.js 8.3 KB

12345678910111213
  1. "use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[3082],{21313:(e,n,t)=>{t.r(n),t.d(n,{ApiKeysPageUnconnected:()=>_,default:()=>ee});var s=t(68404),i=t(18745),a=t(43215),r=t(69783),o=t(5831),l=t(28436),d=t(33801),c=t(78837),h=t(98163),u=t(8674),p=t(78647),y=t(58170),x=t(21169),g=t(45916);const m=e=>{let{searchQuery:n,disabled:t,onAddClick:s,onSearchChange:i}=e;return(0,g.jsxs)("div",{className:"page-action-bar",children:[(0,g.jsx)("div",{className:"gf-form gf-form--grow",children:(0,g.jsx)(r.FilterInput,{placeholder:"Search keys",value:n,onChange:i})}),(0,g.jsx)(r.Button,{className:"pull-right",onClick:s,disabled:t,children:"Add API key"})]})};var j,f,b,v=t(36636),A=t(36537),k=t(58257),C=t(56340);function I(e){let{onDismiss:n,apiKey:t,rootPath:i}=e;const a=(0,r.useStyles2)(K),o=(0,s.useCallback)((()=>t),[t]);return(0,g.jsxs)(r.Modal,{title:"API Key Created",onDismiss:n,onClickBackdrop:n,isOpen:!0,children:[(0,g.jsx)(r.Field,{label:"Key",children:(0,g.jsx)(r.Input,{id:"Key",value:t,readOnly:!0,addonAfter:(0,g.jsxs)(r.ClipboardButton,{variant:"primary",getText:o,onClipboardCopy:()=>{(0,C.WI)((0,A.$l)((0,k.AT)("Content copied to clipboard")))},children:[j||(j=(0,g.jsx)(r.Icon,{name:"copy"}))," Copy"]})})}),f||(f=(0,g.jsx)(r.Alert,{severity:"info",title:"You will only be able to view this key here once!",children:"It is not stored in this form, so be sure to copy it now."})),b||(b=(0,g.jsx)("p",{className:"text-muted",children:"You can authenticate a request using the Authorization HTTP header, example:"})),(0,g.jsxs)("pre",{className:a.small,children:['curl -H "Authorization: Bearer ',t,'" ',i,"/api/dashboards/home"]})]})}function K(e){return{label:v.css`
  2. padding: ${e.spacing(1)};
  3. background-color: ${e.colors.background.secondary};
  4. border-radius: ${e.shape.borderRadius()};
  5. `,small:v.css`
  6. font-size: ${e.typography.bodySmall.fontSize};
  7. font-weight: ${e.typography.bodySmall.fontWeight};
  8. `}}const w=e=>{let{children:n}=e;const[t,i]=(0,s.useState)(!1),a=(0,s.useCallback)((()=>{i(!t)}),[t]);return n({isAdding:t,toggleIsAdding:a})};var E,S,N=t(6347),P=t(72779);const{Input:T}=r.LegacyForms,D=Object.keys(y.B5).map((e=>({label:e,value:e})));function F(e){if(!e)return!0;try{return a.rangeUtil.intervalToSeconds(e),!0}catch{}return!1}const Z={[r.EventsWithValidation.onBlur]:[{rule:F,errorMessage:"Not a valid duration"}]},B=e=>{let{show:n,onClose:t,onKeyAdded:i,disabled:a}=e;const[o,l]=(0,s.useState)(""),[d,c]=(0,s.useState)(y.B5.Viewer),[h,u]=(0,s.useState)("");(0,s.useEffect)((()=>{l(""),c(y.B5.Viewer),u("")}),[n]);return(0,g.jsx)(P.s,{in:n,children:(0,g.jsxs)("div",{className:"gf-form-inline cta-form",children:[(0,g.jsx)(N.P,{onClick:t}),(0,g.jsxs)("form",{className:"gf-form-group",onSubmit:e=>{e.preventDefault(),F(h)&&(i({name:o,role:d,secondsToLive:h}),t())},children:[E||(E=(0,g.jsx)("h5",{children:"Add API Key"})),(0,g.jsxs)("div",{className:"gf-form-inline",children:[(0,g.jsxs)("div",{className:"gf-form max-width-21",children:[S||(S=(0,g.jsx)("span",{className:"gf-form-label",children:"Key name"})),(0,g.jsx)(T,{type:"text",className:"gf-form-input",value:o,placeholder:"Name",onChange:e=>{l(e.currentTarget.value)}})]}),(0,g.jsx)("div",{className:"gf-form",children:(0,g.jsx)(r.InlineField,{label:"Role",children:(0,g.jsx)(r.Select,{inputId:"role-select",value:d,onChange:e=>{c(e.value)},options:D})})}),(0,g.jsx)("div",{className:"gf-form max-width-21",children:(0,g.jsx)(r.InlineField,{tooltip:"The API key life duration. For example, 1d if your key is going to last for one day. Supported units are: s,m,h,d,w,M,y",label:"Time to live",children:(0,g.jsx)(T,{id:"time-to-live-input",type:"text",placeholder:"1d",validationEvents:Z,value:h,onChange:e=>{u(e.currentTarget.value)}})})}),(0,g.jsx)("div",{className:"gf-form",children:(0,g.jsx)(r.Button,{type:"submit",disabled:a,children:"Add"})})]})]})]})})};var Q,M,$;const R=e=>{let{apiKeys:n,timeZone:t,onDelete:s}=e;const i=(0,r.useTheme2)(),a=O(i);return(0,g.jsxs)("table",{className:"filter-table",children:[(0,g.jsx)("thead",{children:(0,g.jsxs)("tr",{children:[Q||(Q=(0,g.jsx)("th",{children:"Name"})),M||(M=(0,g.jsx)("th",{children:"Role"})),$||($=(0,g.jsx)("th",{children:"Expires"})),(0,g.jsx)("th",{style:{width:"34px"}})]})}),n.length>0?(0,g.jsx)("tbody",{children:n.map((e=>{const n=Boolean(e.expiration&&Date.now()>new Date(e.expiration).getTime());return(0,g.jsxs)("tr",{className:a.tableRow(n),children:[(0,g.jsx)("td",{children:e.name}),(0,g.jsx)("td",{children:e.role}),(0,g.jsxs)("td",{children:[L(e.expiration,t),n&&(0,g.jsx)("span",{className:a.tooltipContainer,children:(0,g.jsx)(r.Tooltip,{content:"This API key has expired.",children:(0,g.jsx)(r.Icon,{name:"exclamation-triangle"})})})]}),(0,g.jsx)("td",{children:(0,g.jsx)(r.DeleteButton,{"aria-label":"Delete API key",size:"sm",onConfirm:()=>s(e),disabled:!h.Vt.hasPermissionInMetadata(y.bW.ActionAPIKeysDelete,e)})})]},e.id)}))}):null]})};function L(e,n){return e?(0,a.dateTimeFormat)(e,{timeZone:n}):"No expiration date"}const O=e=>({tableRow:n=>v.css`
  9. color: ${n?e.colors.text.secondary:e.colors.text.primary};
  10. `,tooltipContainer:v.css`
  11. margin-left: ${e.spacing(1)};
  12. `});var V=t(28659),z=t(88467);function W(){return async e=>{e((0,z.dF)());const[n,t]=await Promise.all([(0,V.i)().get("/api/auth/keys?includeExpired=false&accesscontrol=true"),(0,V.i)().get("/api/auth/keys?includeExpired=true&accesscontrol=true")]);e((0,z.iK)({keys:n,keysIncludingExpired:t}))}}const U=e=>e.includeExpired?e.keysIncludingExpired.length:e.keys.length,q=e=>{const n=RegExp(e.searchQuery,"i");return(e.includeExpired?e.keysIncludingExpired:e.keys).filter((e=>n.test(e.name)||n.test(e.role)))},Y=e=>e.includeExpired,H=e=>0===e.keys.length&&e.keysIncludingExpired.length>0;function G(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}const J={loadApiKeys:W,deleteApiKey:function(e){return async n=>{(0,V.i)().delete(`/api/auth/keys/${e}`).then((()=>n(W())))}},setSearchQuery:z.ql,toggleIncludeExpired:function(){return e=>{e((0,z.j4)())}},addApiKey:function(e,n){return async t=>{const s=await(0,V.i)().post("/api/auth/keys",e);t((0,z.ql)("")),t(W()),n(s.key)}}},X=(0,i.connect)((function(e){const n=h.Vt.hasAccess(y.bW.ActionAPIKeysCreate,!0);return{navModel:(0,u.h)(e.navIndex,"apikeys"),apiKeys:q(e.apiKeys),searchQuery:e.apiKeys.searchQuery,apiKeysCount:U(e.apiKeys),hasFetched:e.apiKeys.hasFetched,timeZone:(0,p.Z)(e.user),includeExpired:Y(e.apiKeys),includeExpiredDisabled:H(e.apiKeys),canCreate:n}}),J);class _ extends s.PureComponent{constructor(e){super(e),G(this,"onDeleteApiKey",(e=>{this.props.deleteApiKey(e.id)})),G(this,"onSearchQueryChange",(e=>{this.props.setSearchQuery(e)})),G(this,"onIncludeExpiredChange",(e=>{this.props.toggleIncludeExpired()})),G(this,"onAddApiKey",(e=>{const n=e=>{const n=window.location.origin+c.ZP.appSubUrl;o.Z.publish(new x.Dn({props:{apiKey:e,rootPath:n},component:I}))},t=e.secondsToLive;try{const s=t?a.rangeUtil.intervalToSeconds(t):null,i=Object.assign({},e,{secondsToLive:s});this.props.addApiKey(i,n),this.setState((e=>Object.assign({},e,{isAdding:!1})))}catch(e){console.error(e)}}))}componentDidMount(){this.fetchApiKeys()}async fetchApiKeys(){await this.props.loadApiKeys()}render(){const{hasFetched:e,navModel:n,apiKeysCount:t,apiKeys:s,searchQuery:i,timeZone:a,includeExpired:o,includeExpiredDisabled:c,canCreate:h}=this.props;return e?(0,g.jsx)(d.Z,{navModel:n,children:(0,g.jsx)(d.Z.Contents,{isLoading:!1,children:(0,g.jsx)(w,{children:e=>{let{isAdding:n,toggleIsAdding:d}=e;const u=!n&&0===t,p=t>0;return(0,g.jsxs)(g.Fragment,{children:[u?(0,g.jsx)(l.Z,{title:"You haven't added any API keys yet.",buttonIcon:"key-skeleton-alt",onClick:d,buttonTitle:"New API key",proTip:"Remember, you can provide view-only API access to other applications.",buttonDisabled:!h}):null,p?(0,g.jsx)(m,{searchQuery:i,disabled:n||!h,onAddClick:d,onSearchChange:this.onSearchQueryChange}):null,(0,g.jsx)(B,{show:n,onClose:d,onKeyAdded:this.onAddApiKey,disabled:!h}),p?(0,g.jsxs)(r.VerticalGroup,{children:[(0,g.jsx)(r.InlineField,{disabled:c,label:"Include expired keys",children:(0,g.jsx)(r.InlineSwitch,{id:"showExpired",value:o,onChange:this.onIncludeExpiredChange})}),(0,g.jsx)(R,{apiKeys:s,timeZone:a,onDelete:this.onDeleteApiKey})]}):null]})}})})}):(0,g.jsx)(d.Z,{navModel:n,children:(0,g.jsx)(d.Z.Contents,{isLoading:!0})})}}const ee=X(_)}}]);
  13. //# sourceMappingURL=ApiKeysPage.a269349dc83fd8e96d37.js.map