86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
|
|
import { Icon, Stack, Tag, Tooltip } from '@grafana/ui/src';
|
|
import { Page } from 'app/core/components/Page/Page';
|
|
import { Trans, t } from 'app/core/internationalization';
|
|
|
|
import { useGetActiveUsersQuery } from '../../dashboard/api/publicDashboardApi';
|
|
|
|
import { DashboardsListModalButton } from './DashboardsListModalButton';
|
|
import { DeleteUserModalButton } from './DeleteUserModalButton';
|
|
|
|
const selectors = e2eSelectors.pages.UserListPage.publicDashboards;
|
|
|
|
export const UserListPublicDashboardPage = () => {
|
|
const { data: users, isLoading } = useGetActiveUsersQuery();
|
|
|
|
return (
|
|
<Page.Contents isLoading={isLoading}>
|
|
<table className="filter-table form-inline" data-testid={selectors.container}>
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<Trans i18nKey="public-dashboard-users-access-list.table-header.email-label">Email</Trans>
|
|
</th>
|
|
<th>
|
|
<span>
|
|
<Trans i18nKey="public-dashboard-users-access-list.table-header.activated-label">Activated</Trans>
|
|
</span>
|
|
<Tooltip
|
|
placement="top"
|
|
content={t(
|
|
'public-dashboard-users-access-list.table-header.activated-tooltip',
|
|
'Earliest time user has been an active user to a dashboard'
|
|
)}
|
|
>
|
|
<Icon name="info-circle" />
|
|
</Tooltip>
|
|
</th>
|
|
<th>
|
|
<Trans i18nKey="public-dashboard-users-access-list.table-header.last-active-label">Last active</Trans>
|
|
</th>
|
|
<th>
|
|
<Trans i18nKey="public-dashboard-users-access-list.table-header.origin-label">Origin</Trans>
|
|
</th>
|
|
<th>
|
|
<Trans i18nKey="public-dashboard-users-access-list.table-header.role-label">Role</Trans>
|
|
</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users?.map((user) => (
|
|
<tr key={user.email}>
|
|
<td className="max-width-10">
|
|
<span className="ellipsis" title={user.email}>
|
|
{user.email}
|
|
</span>
|
|
</td>
|
|
<td className="max-width-10">{user.firstSeenAtAge}</td>
|
|
<td className="max-width-10">{user.lastSeenAtAge}</td>
|
|
<td className="max-width-10">
|
|
<Stack gap={2}>
|
|
<span>
|
|
<Trans
|
|
i18nKey="public-dashboard-users-access-list.table-body.dashboard-count"
|
|
count={user.totalDashboards}
|
|
>
|
|
{{ count: user.totalDashboards }} dashboards
|
|
</Trans>
|
|
</span>
|
|
<DashboardsListModalButton email={user.email} />
|
|
</Stack>
|
|
</td>
|
|
<td className="max-width-10">
|
|
<Tag name="Viewer" colorIndex={19} />
|
|
</td>
|
|
<td className="text-right">
|
|
<DeleteUserModalButton user={user} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Page.Contents>
|
|
);
|
|
};
|