import React, { memo, useEffect } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { Button, ConfirmModal, FilterInput, Icon, LinkButton, RadioButtonGroup, useStyles2 } from '@grafana/ui'; import { css, cx } from '@emotion/css'; import Page from 'app/core/components/Page/Page'; import { StoreState, ServiceAccountDTO, AccessControlAction, Role } from 'app/types'; import { changeFilter, changeQuery, fetchACOptions, fetchServiceAccounts, removeServiceAccount, updateServiceAccount, setServiceAccountToRemove, } from './state/actions'; import { getNavModel } from 'app/core/selectors/navModel'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; import { GrafanaTheme2, OrgRole } from '@grafana/data'; import { contextSrv } from 'app/core/core'; import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker'; import { OrgRolePicker } from '../admin/OrgRolePicker'; import pluralize from 'pluralize'; interface OwnProps {} type Props = OwnProps & ConnectedProps; function mapStateToProps(state: StoreState) { return { navModel: getNavModel(state.navIndex, 'serviceaccounts'), ...state.serviceAccounts, }; } const mapDispatchToProps = { fetchServiceAccounts, fetchACOptions, updateServiceAccount, removeServiceAccount, setServiceAccountToRemove, changeFilter, changeQuery, }; const connector = connect(mapStateToProps, mapDispatchToProps); const ServiceAccountsListPage = ({ fetchServiceAccounts, removeServiceAccount, fetchACOptions, updateServiceAccount, setServiceAccountToRemove, navModel, serviceAccounts, isLoading, roleOptions, builtInRoles, changeFilter, changeQuery, query, filters, serviceAccountToRemove, }: Props) => { const styles = useStyles2(getStyles); useEffect(() => { fetchServiceAccounts(); if (contextSrv.accessControlEnabled()) { fetchACOptions(); } }, [fetchServiceAccounts, fetchACOptions]); const onRoleChange = (role: OrgRole, serviceAccount: ServiceAccountDTO) => { const updatedServiceAccount = { ...serviceAccount, role: role }; updateServiceAccount(updatedServiceAccount); }; return (

Service accounts

changeFilter({ name: 'Expired', value })} value={filters.find((f) => f.name === 'Expired')?.value} className={styles.filter} />
{contextSrv.hasPermission(AccessControlAction.ServiceAccountsCreate) && ( New service account )} {isLoading ? ( ) : ( <>
{serviceAccounts.map((serviceAccount: ServiceAccountDTO) => ( ))}
Display name ID Roles Status Tokens
)} {serviceAccountToRemove && ( Are you sure you want to delete '{serviceAccountToRemove.name}' {Boolean(serviceAccountToRemove.tokens) && ` and ${serviceAccountToRemove.tokens} accompanying ${pluralize( 'token', serviceAccountToRemove.tokens )}`} ? } confirmText="Delete" title="Delete service account" onDismiss={() => { setServiceAccountToRemove(null); }} isOpen={true} onConfirm={() => { removeServiceAccount(serviceAccountToRemove.id); setServiceAccountToRemove(null); }} /> )}
); }; type ServiceAccountListItemProps = { serviceAccount: ServiceAccountDTO; onRoleChange: (role: OrgRole, serviceAccount: ServiceAccountDTO) => void; roleOptions: Role[]; builtInRoles: Record; onSetToRemove: (serviceAccount: ServiceAccountDTO) => void; }; const getServiceAccountsAriaLabel = (name: string) => { return `Edit service account's ${name} details`; }; const getServiceAccountsEnabledStatus = (disabled: boolean) => { return disabled ? 'Disabled' : 'Enabled'; }; const ServiceAccountListItem = memo( ({ serviceAccount, onRoleChange, roleOptions, builtInRoles, onSetToRemove }: ServiceAccountListItemProps) => { const editUrl = `org/serviceaccounts/${serviceAccount.id}`; const styles = useStyles2(getStyles); const canUpdateRole = contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsWrite, serviceAccount); const rolePickerDisabled = !canUpdateRole; return ( {`Avatar {serviceAccount.name} {serviceAccount.login} {contextSrv.licensedAccessControlEnabled() ? ( onRoleChange(newRole, serviceAccount)} roleOptions={roleOptions} builtInRoles={builtInRoles} disabled={rolePickerDisabled} /> ) : ( onRoleChange(newRole, serviceAccount)} /> )} {getServiceAccountsEnabledStatus(serviceAccount.isDisabled)} {serviceAccount.tokens} {contextSrv.hasPermissionInMetadata(AccessControlAction.ServiceAccountsDelete, serviceAccount) && (