{"version":3,"file":"ApiKeysPage.a269349dc83fd8e96d37.js","mappings":"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","sources":["webpack://grafana/./public/app/features/api-keys/ApiKeysActionBar.tsx","webpack://grafana/./public/app/features/api-keys/ApiKeysAddedModal.tsx","webpack://grafana/./public/app/features/api-keys/ApiKeysController.tsx","webpack://grafana/./public/app/features/api-keys/ApiKeysForm.tsx","webpack://grafana/./public/app/features/api-keys/ApiKeysTable.tsx","webpack://grafana/./public/app/features/api-keys/state/actions.ts","webpack://grafana/./public/app/features/api-keys/state/selectors.ts","webpack://grafana/./public/app/features/api-keys/ApiKeysPage.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Button, FilterInput } from '@grafana/ui';\n\ninterface Props {\n  searchQuery: string;\n  disabled: boolean;\n  onAddClick: () => void;\n  onSearchChange: (value: string) => void;\n}\n\nexport const ApiKeysActionBar: FC<Props> = ({ searchQuery, disabled, onAddClick, onSearchChange }) => {\n  return (\n    <div className=\"page-action-bar\">\n      <div className=\"gf-form gf-form--grow\">\n        <FilterInput placeholder=\"Search keys\" value={searchQuery} onChange={onSearchChange} />\n      </div>\n      <Button className=\"pull-right\" onClick={onAddClick} disabled={disabled}>\n        Add API key\n      </Button>\n    </div>\n  );\n};\n","import { css } from '@emotion/css';\nimport React, { useCallback } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Alert, Field, Modal, useStyles2, Input, Icon, ClipboardButton } from '@grafana/ui';\n\nimport { notifyApp } from '../../core/actions';\nimport { createSuccessNotification } from '../../core/copy/appNotification';\nimport { dispatch } from '../../store/store';\n\nexport interface Props {\n  onDismiss: () => void;\n  apiKey: string;\n  rootPath: string;\n}\n\nexport function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.Element {\n  const styles = useStyles2(getStyles);\n  const getClipboardText = useCallback(() => apiKey, [apiKey]);\n  const onClipboardCopy = () => {\n    dispatch(notifyApp(createSuccessNotification('Content copied to clipboard')));\n  };\n  return (\n    <Modal title=\"API Key Created\" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>\n      <Field label=\"Key\">\n        <Input\n          id=\"Key\"\n          value={apiKey}\n          readOnly\n          addonAfter={\n            <ClipboardButton variant=\"primary\" getText={getClipboardText} onClipboardCopy={onClipboardCopy}>\n              <Icon name=\"copy\" /> Copy\n            </ClipboardButton>\n          }\n        />\n      </Field>\n      <Alert severity=\"info\" title=\"You will only be able to view this key here once!\">\n        It is not stored in this form, so be sure to copy it now.\n      </Alert>\n\n      <p className=\"text-muted\">You can authenticate a request using the Authorization HTTP header, example:</p>\n      <pre className={styles.small}>\n        curl -H &quot;Authorization: Bearer {apiKey}&quot; {rootPath}/api/dashboards/home\n      </pre>\n    </Modal>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    label: css`\n      padding: ${theme.spacing(1)};\n      background-color: ${theme.colors.background.secondary};\n      border-radius: ${theme.shape.borderRadius()};\n    `,\n    small: css`\n      font-size: ${theme.typography.bodySmall.fontSize};\n      font-weight: ${theme.typography.bodySmall.fontWeight};\n    `,\n  };\n}\n","import { FC, useCallback, useState } from 'react';\n\ninterface Api {\n  isAdding: boolean;\n  toggleIsAdding: () => void;\n}\n\ninterface Props {\n  children: (props: Api) => JSX.Element;\n}\n\nexport const ApiKeysController: FC<Props> = ({ children }) => {\n  const [isAdding, setIsAdding] = useState<boolean>(false);\n  const toggleIsAdding = useCallback(() => {\n    setIsAdding(!isAdding);\n  }, [isAdding]);\n\n  return children({ isAdding, toggleIsAdding });\n};\n","import React, { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';\n\nimport { rangeUtil, SelectableValue } from '@grafana/data';\nimport { EventsWithValidation, LegacyForms, ValidationEvents, Button, Select, InlineField } from '@grafana/ui';\nimport { CloseButton } from 'app/core/components/CloseButton/CloseButton';\n\nimport { SlideDown } from '../../core/components/Animations/SlideDown';\nimport { NewApiKey, OrgRole } from '../../types';\n\nconst { Input } = LegacyForms;\nconst ROLE_OPTIONS: Array<SelectableValue<OrgRole>> = Object.keys(OrgRole).map((role) => ({\n  label: role,\n  value: role as OrgRole,\n}));\n\ninterface Props {\n  show: boolean;\n  onClose: () => void;\n  onKeyAdded: (apiKey: NewApiKey) => void;\n  disabled: boolean;\n}\n\nfunction isValidInterval(value: string): boolean {\n  if (!value) {\n    return true;\n  }\n  try {\n    rangeUtil.intervalToSeconds(value);\n    return true;\n  } catch {}\n  return false;\n}\n\nconst timeRangeValidationEvents: ValidationEvents = {\n  [EventsWithValidation.onBlur]: [\n    {\n      rule: isValidInterval,\n      errorMessage: 'Not a valid duration',\n    },\n  ],\n};\n\nconst tooltipText =\n  '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';\n\nexport const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded, disabled }) => {\n  const [name, setName] = useState<string>('');\n  const [role, setRole] = useState<OrgRole>(OrgRole.Viewer);\n  const [secondsToLive, setSecondsToLive] = useState<string>('');\n  useEffect(() => {\n    setName('');\n    setRole(OrgRole.Viewer);\n    setSecondsToLive('');\n  }, [show]);\n\n  const onSubmit = (event: FormEvent) => {\n    event.preventDefault();\n    if (isValidInterval(secondsToLive)) {\n      onKeyAdded({ name, role, secondsToLive });\n      onClose();\n    }\n  };\n  const onNameChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setName(event.currentTarget.value);\n  };\n  const onRoleChange = (role: SelectableValue<OrgRole>) => {\n    setRole(role.value!);\n  };\n  const onSecondsToLiveChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setSecondsToLive(event.currentTarget.value);\n  };\n\n  return (\n    <SlideDown in={show}>\n      <div className=\"gf-form-inline cta-form\">\n        <CloseButton onClick={onClose} />\n        <form className=\"gf-form-group\" onSubmit={onSubmit}>\n          <h5>Add API Key</h5>\n          <div className=\"gf-form-inline\">\n            <div className=\"gf-form max-width-21\">\n              <span className=\"gf-form-label\">Key name</span>\n              <Input type=\"text\" className=\"gf-form-input\" value={name} placeholder=\"Name\" onChange={onNameChange} />\n            </div>\n            <div className=\"gf-form\">\n              <InlineField label=\"Role\">\n                <Select inputId=\"role-select\" value={role} onChange={onRoleChange} options={ROLE_OPTIONS} />\n              </InlineField>\n            </div>\n            <div className=\"gf-form max-width-21\">\n              <InlineField tooltip={tooltipText} label=\"Time to live\">\n                <Input\n                  id=\"time-to-live-input\"\n                  type=\"text\"\n                  placeholder=\"1d\"\n                  validationEvents={timeRangeValidationEvents}\n                  value={secondsToLive}\n                  onChange={onSecondsToLiveChange}\n                />\n              </InlineField>\n            </div>\n            <div className=\"gf-form\">\n              <Button type=\"submit\" disabled={disabled}>\n                Add\n              </Button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </SlideDown>\n  );\n};\n","import { css } from '@emotion/css';\nimport React, { FC } from 'react';\n\nimport { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { DeleteButton, Icon, IconName, Tooltip, useTheme2 } from '@grafana/ui';\nimport { contextSrv } from 'app/core/core';\nimport { AccessControlAction } from 'app/types';\n\nimport { ApiKey } from '../../types';\n\ninterface Props {\n  apiKeys: ApiKey[];\n  timeZone: TimeZone;\n  onDelete: (apiKey: ApiKey) => void;\n}\n\nexport const ApiKeysTable: FC<Props> = ({ apiKeys, timeZone, onDelete }) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n\n  return (\n    <table className=\"filter-table\">\n      <thead>\n        <tr>\n          <th>Name</th>\n          <th>Role</th>\n          <th>Expires</th>\n          <th style={{ width: '34px' }} />\n        </tr>\n      </thead>\n      {apiKeys.length > 0 ? (\n        <tbody>\n          {apiKeys.map((key) => {\n            const isExpired = Boolean(key.expiration && Date.now() > new Date(key.expiration).getTime());\n            return (\n              <tr key={key.id} className={styles.tableRow(isExpired)}>\n                <td>{key.name}</td>\n                <td>{key.role}</td>\n                <td>\n                  {formatDate(key.expiration, timeZone)}\n                  {isExpired && (\n                    <span className={styles.tooltipContainer}>\n                      <Tooltip content=\"This API key has expired.\">\n                        <Icon name={'exclamation-triangle' as IconName} />\n                      </Tooltip>\n                    </span>\n                  )}\n                </td>\n                <td>\n                  <DeleteButton\n                    aria-label=\"Delete API key\"\n                    size=\"sm\"\n                    onConfirm={() => onDelete(key)}\n                    disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.ActionAPIKeysDelete, key)}\n                  />\n                </td>\n              </tr>\n            );\n          })}\n        </tbody>\n      ) : null}\n    </table>\n  );\n};\n\nfunction formatDate(expiration: string | undefined, timeZone: TimeZone): string {\n  if (!expiration) {\n    return 'No expiration date';\n  }\n  return dateTimeFormat(expiration, { timeZone });\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  tableRow: (isExpired: boolean) => css`\n    color: ${isExpired ? theme.colors.text.secondary : theme.colors.text.primary};\n  `,\n  tooltipContainer: css`\n    margin-left: ${theme.spacing(1)};\n  `,\n});\n","import { getBackendSrv } from 'app/core/services/backend_srv';\nimport { ApiKey, ThunkResult } from 'app/types';\n\nimport { apiKeysLoaded, includeExpiredToggled, isFetching, setSearchQuery } from './reducers';\n\nexport function addApiKey(apiKey: ApiKey, openModal: (key: string) => void): ThunkResult<void> {\n  return async (dispatch) => {\n    const result = await getBackendSrv().post('/api/auth/keys', apiKey);\n    dispatch(setSearchQuery(''));\n    dispatch(loadApiKeys());\n    openModal(result.key);\n  };\n}\n\nexport function loadApiKeys(): ThunkResult<void> {\n  return async (dispatch) => {\n    dispatch(isFetching());\n    const [keys, keysIncludingExpired] = await Promise.all([\n      getBackendSrv().get('/api/auth/keys?includeExpired=false&accesscontrol=true'),\n      getBackendSrv().get('/api/auth/keys?includeExpired=true&accesscontrol=true'),\n    ]);\n    dispatch(apiKeysLoaded({ keys, keysIncludingExpired }));\n  };\n}\n\nexport function deleteApiKey(id: number): ThunkResult<void> {\n  return async (dispatch) => {\n    getBackendSrv()\n      .delete(`/api/auth/keys/${id}`)\n      .then(() => dispatch(loadApiKeys()));\n  };\n}\n\nexport function toggleIncludeExpired(): ThunkResult<void> {\n  return (dispatch) => {\n    dispatch(includeExpiredToggled());\n  };\n}\n","import { ApiKeysState } from 'app/types';\n\nexport const getApiKeysCount = (state: ApiKeysState) =>\n  state.includeExpired ? state.keysIncludingExpired.length : state.keys.length;\n\nexport const getApiKeys = (state: ApiKeysState) => {\n  const regex = RegExp(state.searchQuery, 'i');\n  const keysToFilter = state.includeExpired ? state.keysIncludingExpired : state.keys;\n\n  return keysToFilter.filter((key) => {\n    return regex.test(key.name) || regex.test(key.role);\n  });\n};\n\nexport const getIncludeExpired = (state: ApiKeysState) => state.includeExpired;\n\nexport const getIncludeExpiredDisabled = (state: ApiKeysState) =>\n  state.keys.length === 0 && state.keysIncludingExpired.length > 0;\n","import React, { PureComponent } from 'react';\nimport { connect, ConnectedProps } from 'react-redux';\n\n// Utils\nimport { rangeUtil } from '@grafana/data';\nimport { InlineField, InlineSwitch, VerticalGroup } from '@grafana/ui';\nimport appEvents from 'app/core/app_events';\nimport EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';\nimport Page from 'app/core/components/Page/Page';\nimport config from 'app/core/config';\nimport { contextSrv } from 'app/core/core';\nimport { getNavModel } from 'app/core/selectors/navModel';\nimport { getTimeZone } from 'app/features/profile/state/selectors';\nimport { AccessControlAction, ApiKey, NewApiKey, StoreState } from 'app/types';\nimport { ShowModalReactEvent } from 'app/types/events';\n\nimport { ApiKeysActionBar } from './ApiKeysActionBar';\nimport { ApiKeysAddedModal } from './ApiKeysAddedModal';\nimport { ApiKeysController } from './ApiKeysController';\nimport { ApiKeysForm } from './ApiKeysForm';\nimport { ApiKeysTable } from './ApiKeysTable';\nimport { addApiKey, deleteApiKey, loadApiKeys, toggleIncludeExpired } from './state/actions';\nimport { setSearchQuery } from './state/reducers';\nimport { getApiKeys, getApiKeysCount, getIncludeExpired, getIncludeExpiredDisabled } from './state/selectors';\n\nfunction mapStateToProps(state: StoreState) {\n  const canCreate = contextSrv.hasAccess(AccessControlAction.ActionAPIKeysCreate, true);\n\n  return {\n    navModel: getNavModel(state.navIndex, 'apikeys'),\n    apiKeys: getApiKeys(state.apiKeys),\n    searchQuery: state.apiKeys.searchQuery,\n    apiKeysCount: getApiKeysCount(state.apiKeys),\n    hasFetched: state.apiKeys.hasFetched,\n    timeZone: getTimeZone(state.user),\n    includeExpired: getIncludeExpired(state.apiKeys),\n    includeExpiredDisabled: getIncludeExpiredDisabled(state.apiKeys),\n    canCreate: canCreate,\n  };\n}\n\nconst mapDispatchToProps = {\n  loadApiKeys,\n  deleteApiKey,\n  setSearchQuery,\n  toggleIncludeExpired,\n  addApiKey,\n};\n\nconst connector = connect(mapStateToProps, mapDispatchToProps);\n\ninterface OwnProps {}\n\nexport type Props = OwnProps & ConnectedProps<typeof connector>;\n\ninterface State {\n  isAdding: boolean;\n}\n\nexport class ApiKeysPageUnconnected extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    this.fetchApiKeys();\n  }\n\n  async fetchApiKeys() {\n    await this.props.loadApiKeys();\n  }\n\n  onDeleteApiKey = (key: ApiKey) => {\n    this.props.deleteApiKey(key.id!);\n  };\n\n  onSearchQueryChange = (value: string) => {\n    this.props.setSearchQuery(value);\n  };\n\n  onIncludeExpiredChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n    this.props.toggleIncludeExpired();\n  };\n\n  onAddApiKey = (newApiKey: NewApiKey) => {\n    const openModal = (apiKey: string) => {\n      const rootPath = window.location.origin + config.appSubUrl;\n\n      appEvents.publish(\n        new ShowModalReactEvent({\n          props: {\n            apiKey,\n            rootPath,\n          },\n          component: ApiKeysAddedModal,\n        })\n      );\n    };\n\n    const secondsToLive = newApiKey.secondsToLive;\n    try {\n      const secondsToLiveAsNumber = secondsToLive ? rangeUtil.intervalToSeconds(secondsToLive) : null;\n      const apiKey: ApiKey = {\n        ...newApiKey,\n        secondsToLive: secondsToLiveAsNumber,\n      };\n      this.props.addApiKey(apiKey, openModal);\n      this.setState((prevState: State) => {\n        return {\n          ...prevState,\n          isAdding: false,\n        };\n      });\n    } catch (err) {\n      console.error(err);\n    }\n  };\n\n  render() {\n    const {\n      hasFetched,\n      navModel,\n      apiKeysCount,\n      apiKeys,\n      searchQuery,\n      timeZone,\n      includeExpired,\n      includeExpiredDisabled,\n      canCreate,\n    } = this.props;\n\n    if (!hasFetched) {\n      return (\n        <Page navModel={navModel}>\n          <Page.Contents isLoading={true}>{}</Page.Contents>\n        </Page>\n      );\n    }\n\n    return (\n      <Page navModel={navModel}>\n        <Page.Contents isLoading={false}>\n          <ApiKeysController>\n            {({ isAdding, toggleIsAdding }) => {\n              const showCTA = !isAdding && apiKeysCount === 0;\n              const showTable = apiKeysCount > 0;\n              return (\n                <>\n                  {showCTA ? (\n                    <EmptyListCTA\n                      title=\"You haven't added any API keys yet.\"\n                      buttonIcon=\"key-skeleton-alt\"\n                      onClick={toggleIsAdding}\n                      buttonTitle=\"New API key\"\n                      proTip=\"Remember, you can provide view-only API access to other applications.\"\n                      buttonDisabled={!canCreate}\n                    />\n                  ) : null}\n                  {showTable ? (\n                    <ApiKeysActionBar\n                      searchQuery={searchQuery}\n                      disabled={isAdding || !canCreate}\n                      onAddClick={toggleIsAdding}\n                      onSearchChange={this.onSearchQueryChange}\n                    />\n                  ) : null}\n                  <ApiKeysForm\n                    show={isAdding}\n                    onClose={toggleIsAdding}\n                    onKeyAdded={this.onAddApiKey}\n                    disabled={!canCreate}\n                  />\n                  {showTable ? (\n                    <VerticalGroup>\n                      <InlineField disabled={includeExpiredDisabled} label=\"Include expired keys\">\n                        <InlineSwitch id=\"showExpired\" value={includeExpired} onChange={this.onIncludeExpiredChange} />\n                      </InlineField>\n                      <ApiKeysTable apiKeys={apiKeys} timeZone={timeZone} onDelete={this.onDeleteApiKey} />\n                    </VerticalGroup>\n                  ) : null}\n                </>\n              );\n            }}\n          </ApiKeysController>\n        </Page.Contents>\n      </Page>\n    );\n  }\n}\n\nconst ApiKeysPage = connector(ApiKeysPageUnconnected);\nexport default ApiKeysPage;\n"],"names":["ApiKeysActionBar","searchQuery","disabled","onAddClick","onSearchChange","className","FilterInput","placeholder","value","onChange","Button","onClick","ApiKeysAddedModal","onDismiss","apiKey","rootPath","styles","useStyles2","getStyles","getClipboardText","useCallback","Modal","title","onClickBackdrop","isOpen","Field","label","Input","id","readOnly","addonAfter","ClipboardButton","variant","getText","onClipboardCopy","dispatch","notifyApp","createSuccessNotification","Icon","name","Alert","severity","small","theme","css","spacing","colors","background","secondary","shape","borderRadius","typography","bodySmall","fontSize","fontWeight","ApiKeysController","children","isAdding","setIsAdding","useState","toggleIsAdding","LegacyForms","ROLE_OPTIONS","Object","keys","OrgRole","map","role","isValidInterval","rangeUtil","timeRangeValidationEvents","EventsWithValidation","rule","errorMessage","ApiKeysForm","show","onClose","onKeyAdded","setName","setRole","secondsToLive","setSecondsToLive","useEffect","SlideDown","in","CloseButton","onSubmit","event","preventDefault","type","currentTarget","InlineField","Select","inputId","options","tooltip","validationEvents","ApiKeysTable","apiKeys","timeZone","onDelete","useTheme2","style","width","length","key","isExpired","Boolean","expiration","Date","now","getTime","tableRow","formatDate","tooltipContainer","Tooltip","content","DeleteButton","size","onConfirm","contextSrv","AccessControlAction","dateTimeFormat","text","primary","loadApiKeys","async","isFetching","keysIncludingExpired","Promise","all","getBackendSrv","get","apiKeysLoaded","getApiKeysCount","state","includeExpired","getApiKeys","regex","RegExp","filter","test","getIncludeExpired","getIncludeExpiredDisabled","mapDispatchToProps","deleteApiKey","delete","then","setSearchQuery","toggleIncludeExpired","includeExpiredToggled","addApiKey","openModal","result","post","connector","connect","canCreate","navModel","getNavModel","navIndex","apiKeysCount","hasFetched","getTimeZone","user","includeExpiredDisabled","ApiKeysPageUnconnected","PureComponent","constructor","props","super","this","newApiKey","window","location","origin","config","appEvents","ShowModalReactEvent","component","secondsToLiveAsNumber","setState","prevState","err","console","error","componentDidMount","fetchApiKeys","render","Page","isLoading","showCTA","showTable","EmptyListCTA","buttonIcon","buttonTitle","proTip","buttonDisabled","onSearchQueryChange","onAddApiKey","VerticalGroup","InlineSwitch","onIncludeExpiredChange","onDeleteApiKey"],"sourceRoot":""}