From ad5846a25c216b5af30e8b1e5ffeb352dee2f2a0 Mon Sep 17 00:00:00 2001 From: Michael Myers Date: Fri, 29 Mar 2024 12:45:17 -0500 Subject: [PATCH] update table styles --- .../design/src/DataTable/DataTable.story.tsx | 307 +- .../src/DataTable/InputSearch/InputSearch.tsx | 61 +- .../Pager/ClientSidePager/ClientSidePager.tsx | 35 +- .../src/DataTable/Pager/PageIndicatorText.tsx | 50 + .../src/DataTable/Pager/StyledPager.tsx | 4 +- .../design/src/DataTable/StyledTable.tsx | 99 +- web/packages/design/src/DataTable/Table.tsx | 83 +- web/packages/design/src/DataTable/index.ts | 12 +- .../design/src/ThemeProvider/globals.js | 4 + web/packages/design/src/theme/typography.js | 6 + .../shared/components/Search/SearchPanel.tsx | 28 +- .../AuthDeviceList/AuthDeviceList.tsx | 30 +- .../__snapshots__/Audit.story.test.tsx.snap | 24683 ++++++++-------- .../Clusters.story.test.tsx.snap | 2868 +- .../DocumentNodes.story.test.tsx.snap | 1140 +- .../ServerSideSupportedList.tsx | 1 - .../__snapshots__/Nodes.story.test.tsx.snap | 2554 +- .../Recordings.story.test.tsx.snap | 1148 +- .../Sessions.story.test.tsx.snap | 3564 ++- .../__snapshots__/Users.story.test.tsx.snap | 1004 +- .../ServersideSearchPanel.tsx | 49 +- 21 files changed, 18433 insertions(+), 19297 deletions(-) create mode 100644 web/packages/design/src/DataTable/Pager/PageIndicatorText.tsx diff --git a/web/packages/design/src/DataTable/DataTable.story.tsx b/web/packages/design/src/DataTable/DataTable.story.tsx index 9e097c04ea44f..12d126a241c9f 100644 --- a/web/packages/design/src/DataTable/DataTable.story.tsx +++ b/web/packages/design/src/DataTable/DataTable.story.tsx @@ -18,127 +18,164 @@ import React, { useState } from 'react'; +import ServersideSearchPanel from 'teleport/components/ServersideSearchPanel'; + +import { SortType, TableProps } from 'design/DataTable/types'; + import Table from './Table'; -import { LabelCell, DateCell, ClickableLabelCell } from './Cells'; +import { ClickableLabelCell, DateCell, LabelCell } from './Cells'; export default { title: 'Design/DataTable', }; -export const VariousColumns = () => { - return ( - - columns={[ - { key: 'name', headerText: 'Name', isSortable: true }, - { key: 'desc', headerText: 'Description' }, - { key: 'amount', headerText: 'Amount', isSortable: true }, - { - key: 'createdDate', - headerText: 'Created Date', - isSortable: true, - render: row => , - }, - { - key: 'removedDate', - headerText: 'Removed Date', - isSortable: true, - render: row => , - }, - { - key: 'tags', - headerText: 'Labels', - render: row => , - isSortable: true, - onSort: sortTagsByLength, - }, - { key: 'bool', headerText: 'Boolean', isSortable: true }, - ]} - data={data} - emptyText={'No Dummy Data Found'} - isSearchable - /> - ); +// `if (serversideProps)` is the first view conditionally rendered by Table +// it returns a ServersideTable wrapped in StyledTableWrapper +export const WithServersideProps = () => { + const [sort, setSort] = useState({ fieldName: 'name', dir: 'ASC' }); + const [allData, setAllData] = useState(data); + + const props = getDefaultProps(); + props.data = allData; + props.fetching = { + onFetchMore: () => setAllData([...allData, ...extraData]), + fetchStatus: '', + }; + props.serversideProps = { + serversideSearchPanel: ( + null} + pathname="" + replaceHistory={() => null} + /> + ), + sort: sort, + setSort: setSort, + }; + return {...props} />; +}; + +export const WithServersidePropsEmpty = () => { + const [sort, setSort] = useState({ fieldName: 'name', dir: 'ASC' }); + + const props = getDefaultProps(); + props.data = []; + props.fetching = { + onFetchMore: () => {}, + fetchStatus: '', + }; + props.serversideProps = { + serversideSearchPanel: ( + null} + pathname="" + replaceHistory={() => null} + /> + ), + sort: sort, + setSort: setSort, + }; + return {...props} />; +}; + +// `if (state.pagination)` is the second view conditionally rendered by Table +// it returns a PagedTable wrapped in StyledTableWrapper +export const WithPagination = () => { + const props = getDefaultProps(); + props.pagination = { + pageSize: 7, + pagerPosition: 'top', + }; + return {...props} />; +}; + +export const WithPaginationEmpty = () => { + const props = getDefaultProps(); + props.data = []; + props.pagination = { + pageSize: 7, + pagerPosition: 'top', + }; + return {...props} />; +}; + +// `if (isSearchable)` is the third view conditionally rendered by Table +// it returns a SearchableBasicTable wrapped in StyledTableWrapper +export const IsSearchable = () => { + const props = getDefaultProps(); + props.isSearchable = true; + return {...props} />; +}; + +export const IsSearchableEmpty = () => { + const props = getDefaultProps(); + props.isSearchable = true; + props.data = []; + return {...props} />; +}; + +// the default view rendered by Table +// it returns a BasicTable +export const DefaultBasic = () => { + const props = getDefaultProps(); + return {...props} />; +}; + +export const DefaultBasicEmpty = () => { + const props = getDefaultProps(); + props.data = []; + return {...props} />; }; +// state.pagination table view with fetching props export const ClientSidePagination = () => { const [allData, setAllData] = useState(data); - return ( - - columns={[ - { key: 'name', headerText: 'Name', isSortable: true }, - { key: 'desc', headerText: 'Description' }, - { key: 'amount', headerText: 'Amount', isSortable: true }, - { - key: 'createdDate', - headerText: 'Created Date', - isSortable: true, - render: row => , - }, - { - key: 'removedDate', - headerText: 'Removed Date', - isSortable: true, - render: row => , - }, - { - key: 'tags', - headerText: 'Labels', - render: row => , - isSortable: true, - onSort: sortTagsByLength, - }, - { key: 'bool', headerText: 'Boolean', isSortable: true }, - ]} - pagination={{ - pageSize: 7, - pagerPosition: 'top', - }} - fetching={{ - onFetchMore: () => setAllData([...allData, ...extraData]), - fetchStatus: '', - }} - data={allData} - emptyText={'No Dummy Data Found'} - isSearchable - /> - ); + const props = getDefaultProps(); + props.isSearchable = true; + props.pagination = { + pageSize: 7, + pagerPosition: 'top', + }; + props.fetching = { + onFetchMore: () => setAllData([...allData, ...extraData]), + fetchStatus: '', + }; + props.data = allData; + + return {...props} />; }; +// `if (issearchable)` view with ISO date strings export function ISODateStrings() { - return ( - - columns={[ - { key: 'name', headerText: 'Name', isSortable: true }, - { key: 'desc', headerText: 'Description' }, - { key: 'amount', headerText: 'Amount', isSortable: true }, - { - key: 'createdDate', - headerText: 'Created Date', - isSortable: true, - }, - { - key: 'removedDate', - headerText: 'Removed Date', - isSortable: true, - }, - { - key: 'tags', - headerText: 'Labels', - render: row => , - isSortable: true, - onSort: sortTagsByLength, - }, - { key: 'bool', headerText: 'Boolean', isSortable: true }, - ]} - initialSort={{ key: 'createdDate', dir: 'DESC' }} - data={isoDateStringData} - emptyText={'No Dummy Data Found'} - isSearchable - /> - ); + const props = getDefaultIsoProps(); + props.initialSort = { key: 'createdDate', dir: 'DESC' }; + props.emptyText = 'No Dummy Data Found'; + props.isSearchable = true; + return {...props} />; } +// default basic table with interactive cells export function DefaultAndClickableLabels() { return ( @@ -170,6 +207,64 @@ function sortTagsByLength(a: DummyDataType['tags'], b: DummyDataType['tags']) { return a.length - b.length; } +const getDefaultProps = (): TableProps => ({ + data: data, + emptyText: 'No Dummy Data Found', + columns: [ + { key: 'name', headerText: 'Name', isSortable: true }, + { key: 'desc', headerText: 'Description' }, + { key: 'amount', headerText: 'Amount', isSortable: true }, + { + key: 'createdDate', + headerText: 'Created Date', + isSortable: true, + render: row => , + }, + { + key: 'removedDate', + headerText: 'Removed Date', + isSortable: true, + render: row => , + }, + { + key: 'tags', + headerText: 'Labels', + render: row => , + isSortable: true, + onSort: sortTagsByLength, + }, + { key: 'bool', headerText: 'Boolean', isSortable: true }, + ], +}); + +const getDefaultIsoProps = (): TableProps => ({ + data: isoDateStringData, + emptyText: 'No Dummy Data Found', + columns: [ + { key: 'name', headerText: 'Name', isSortable: true }, + { key: 'desc', headerText: 'Description' }, + { key: 'amount', headerText: 'Amount', isSortable: true }, + { + key: 'createdDate', + headerText: 'Created Date', + isSortable: true, + }, + { + key: 'removedDate', + headerText: 'Removed Date', + isSortable: true, + }, + { + key: 'tags', + headerText: 'Labels', + render: row => , + isSortable: true, + onSort: sortTagsByLength, + }, + { key: 'bool', headerText: 'Boolean', isSortable: true }, + ], +}); + const data: DummyDataType[] = [ { name: 'a-test', @@ -325,7 +420,7 @@ const isoDateStringData: DummyDataISOStringType[] = [ createdDate: '2022-09-09T19:08:17.27Z', removedDate: new Date(1635322403).toISOString(), tags: ['test12: test12'], - bool: false, + bool: true, }, { name: 'j-test', diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx index e8babc876d59a..7776f0b1a1610 100644 --- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx +++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import React, { SetStateAction } from 'react'; +import React, { JSX, SetStateAction } from 'react'; import styled from 'styled-components'; import { height, space, color } from 'design/system'; @@ -24,17 +24,15 @@ import { height, space, color } from 'design/system'; export default function InputSearch({ searchValue, setSearchValue, - useNewBackground = false, children, }: Props) { return ( ) => setSearchValue(e.target.value) } @@ -50,8 +48,6 @@ export default function InputSearch({ type Props = { searchValue: string; setSearchValue: React.Dispatch>; - // TODO (avatus): remove after new table styles are backported to 15 - useNewBackground?: boolean; children?: JSX.Element; }; @@ -62,8 +58,7 @@ const ChildWrapper = styled.div` display: flex; align-items: center; justify-content: center; - background: ${props => props.theme.colors.spotBackground[0]}; - border-radius: 200px; + border-radius: 0 200px 200px 0; `; const ChildWrapperBackground = styled.div` @@ -73,68 +68,42 @@ const ChildWrapperBackground = styled.div` display: flex; align-items: center; justify-content: center; - background: ${props => - props.theme.type === 'dark' - ? props.theme.colors.levels.surface - : props.theme.colors.levels.deep}; - border-radius: 200px; + border-left: ${props => props.theme.borders[1]} + ${props => props.theme.colors.spotBackground[0]}; + border-radius: 0 200px 200px 0; `; const Wrapper = styled.div` position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; `; const WrapperBackground = styled.div` background: ${props => props.theme.colors.levels.sunken}; border-radius: 200px; width: 100%; - height: 32px; + height: ${props => props.theme.space[8]}px; + margin-bottom: 12px; `; const StyledInput = styled.input` border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: ${props => props.theme.fontSizes[3]}px; width: 100%; transition: all 0.2s; ${color} ${space} ${height} - ${fromTheme}; + color: ${props => props.theme.colors.text.main}; + background: ${props => props.theme.colors.spotBackground[0]}; padding-right: 184px; - // TODO (avatus): remove after new table styles are backported to 15 - ${props => - props.useNewBackground - ? `background: ${props.theme.colors.spotBackground[0]};` - : null} + // should match padding-left on StyledTable &:first-child to align Search content to Table content + padding-left: ${props => props.theme.space[4]}px; `; - -function fromTheme(props) { - return { - color: props.theme.colors.text.main, - background: - props.theme.type === 'dark' - ? props.theme.colors.levels.sunken - : props.theme.colors.levels.deep, - - '&:hover, &:focus, &:active': { - color: props.theme.colors.text.main, - background: - props.theme.type === 'dark' - ? props.theme.colors.spotBackground[0] - : props.theme.colors.levels.sunken, - }, - '&::placeholder': { - color: props.theme.colors.text.muted, - fontSize: props.theme.fontSizes[1], - }, - }; -} diff --git a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx index 14c5a59876120..b75a0032fc96d 100644 --- a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx +++ b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx @@ -18,22 +18,27 @@ import React from 'react'; -import { Flex, Text } from 'design'; +import { Flex } from 'design'; import { CircleArrowLeft, CircleArrowRight } from 'design/Icon'; +import { PageIndicatorText } from 'design/DataTable/Pager/PageIndicatorText'; import { StyledArrowBtn, StyledFetchMoreBtn } from '../StyledPager'; -import { useClientSidePager, Props } from './useClientSidePager'; +import { Props, useClientSidePager } from './useClientSidePager'; export function ClientSidePager(props: Props) { const { nextPage, prevPage, onFetchMore, fetchStatus } = props; const { from, to, count, isNextDisabled, isPrevDisabled } = useClientSidePager(props); + if (count == 0) { + return; + } + const isFetchingEnabled = onFetchMore && fetchStatus !== 'disabled'; return ( - - + + {isFetchingEnabled && ( ); } - -export function PageIndicatorText({ - from, - to, - count, -}: { - from: number; - to: number; - count: number; -}) { - return ( - - Showing {from} - {to} of{' '} - {count} - - ); -} diff --git a/web/packages/design/src/DataTable/Pager/PageIndicatorText.tsx b/web/packages/design/src/DataTable/Pager/PageIndicatorText.tsx new file mode 100644 index 0000000000000..c499f95ef80b9 --- /dev/null +++ b/web/packages/design/src/DataTable/Pager/PageIndicatorText.tsx @@ -0,0 +1,50 @@ +/** + * Teleport + * Copyright (C) 2024 Gravitational, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import React from 'react'; + +import { Text } from 'design'; + +export function PageIndicatorText({ + from, + to, + count, +}: { + from: number; + to: number; + count: number; +}) { + if (count == 0) { + return; + } + + return ( + + Showing {from} - {to} of{' '} + {count} + + ); +} diff --git a/web/packages/design/src/DataTable/Pager/StyledPager.tsx b/web/packages/design/src/DataTable/Pager/StyledPager.tsx index 3887e264ea9b1..57ba821e50ce3 100644 --- a/web/packages/design/src/DataTable/Pager/StyledPager.tsx +++ b/web/packages/design/src/DataTable/Pager/StyledPager.tsx @@ -22,7 +22,7 @@ import { ButtonIcon } from 'design'; export const StyledArrowBtn = styled(ButtonIcon)` svg { - font-size: 20px; + font-size: ${props => props.theme.fontSizes[5]}px; } svg:before { // arrow icons have some padding that makes them look slightly off-center, padding compensates it @@ -39,7 +39,7 @@ export const StyledFetchMoreBtn = styled.button` border: none; font-weight: bold; line-height: 0; - font-size: 12px; + font-size: ${props => props.theme.fontSizes[1]}px; &:hover, &:focus { diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx index 0411ad4559c04..a37cdec1b217d 100644 --- a/web/packages/design/src/DataTable/StyledTable.tsx +++ b/web/packages/design/src/DataTable/StyledTable.tsx @@ -18,17 +18,13 @@ import styled from 'styled-components'; -import { space, borderRadius } from 'design/system'; +import { borderRadius } from 'design/system'; -import { decomposeColor, emphasize } from 'design/theme/utils/colorManipulator'; - -export const StyledTable = styled.table( - props => ` - background: ${props.theme.colors.levels.surface}; +export const StyledTable = styled.table` border-collapse: collapse; border-spacing: 0; border-style: hidden; - font-size: 12px; + font-size: ${props => props.theme.fontSizes[1]}px; width: 100%; & > thead > tr > th, @@ -37,14 +33,16 @@ export const StyledTable = styled.table( & > thead > tr > td, & > tbody > tr > td, & > tfoot > tr > td { - padding: 8px 8px; + padding: ${p => p.theme.space[2]}px ${p => p.theme.space[2]}px; vertical-align: middle; &:first-child { - padding-left: 24px; + // should match padding-left on StyledInput to align Search content to Table content + padding-left: ${props => props.theme.space[4]}px } + &:last-child { - padding-right: 24px; + padding-right: ${props => props.theme.space[4]}px; } } @@ -53,16 +51,12 @@ export const StyledTable = styled.table( } & > thead > tr > th { - background: ${props.theme.colors.spotBackground[0]}; - color: ${props.theme.colors.text.main}; + color: ${props => props.theme.colors.text.main}; + ${props => props.theme.typography.h6}; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; svg { @@ -71,54 +65,47 @@ export const StyledTable = styled.table( } & > tbody > tr > td { - color: ${props.theme.colors.text.main}; - line-height: 16px; + color: ${props => props.theme.colors.text.main}; + ${props => props.theme.typography.table} } tbody tr { - border-bottom: 1px solid ${getSolidRowBorderColor(props.theme)}; - } - - tbody tr:hover { - background-color: ${props.theme.colors.spotBackground[0]}; - } + transition: all 150ms; + position: relative; + border-top: ${props => props.theme.borders[2]} ${props => props.theme.colors.spotBackground[0]}; + + :hover { + border-top: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0); + background-color: ${props => props.theme.colors.levels.surface}; + + // We use a pseudo element for the shadow with position: absolute in order to prevent + // the shadow from increasing the size of the layout and causing scrollbar flicker. + :after { + box-shadow: ${props => props.theme.boxShadow[3]}; + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + } + + + tr { + // on hover, hide border on adjacent sibling + border-top: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0); + } + } - `, - space, - borderRadius -); - -// When `border-collapse: collapse` is set on a table element, Safari incorrectly renders row border with alpha channel. -// It looks like the collapsed border was rendered twice, that is, opacity 0.07 looks like opacity 0.14 (this is more visible -// on the dark theme). -// Sometimes, there is also an artifact visible after hovering the rows - some of them have correct border color, some not. -// WebKit issue https://bugs.webkit.org/show_bug.cgi?id=35456. -// -// `getSolidRowBorderColor` is a workaround. Instead of setting a color with an alpha channel to the border and letting -// the browser mix it with the background color, we calculate the final (non-alpha) color in the JS code. -// The final color is created by lightening or darkening the table background color by the value of the alpha channel of theme.colors.spotBackground[0]. -function getSolidRowBorderColor(theme) { - const alpha = decomposeColor(theme.colors.spotBackground[0]).values[3] || 0; - return emphasize(theme.colors.levels.surface, alpha); -} + ${borderRadius} +`; export const StyledPanel = styled.nav<{ showTopBorder: boolean }>` - padding: 16px 24px; display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: ${props => props.theme.colors.levels.surface}; - ${borderRadius} - border-top: ${props => - props.showTopBorder - ? '1px solid ' + props.theme.colors.spotBackground[0] - : undefined}; -`; - -export const StyledTableWrapper = styled.div` - box-shadow: ${props => props.theme.boxShadow[0]}; - overflow: hidden; - ${borderRadius} + padding: ${props => props.theme.space[3]}px 0; + max-height: ${props => props.theme.space[6]}px; + margin-bottom: ${p => p.theme.space[2]}px; `; diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx index 4a9c3999408a0..f57af7a7f8b5d 100644 --- a/web/packages/design/src/DataTable/Table.tsx +++ b/web/packages/design/src/DataTable/Table.tsx @@ -18,10 +18,10 @@ import React from 'react'; -import { Text, Indicator, Box, Flex } from 'design'; +import { Box, Flex, Indicator, Text } from 'design'; import * as Icons from 'design/Icon'; -import { StyledTable, StyledPanel, StyledTableWrapper } from './StyledTable'; +import { StyledTable, StyledPanel } from './StyledTable'; import { BasicTableProps, PagedTableProps, @@ -144,19 +144,17 @@ export function Table({ if (serversideProps) { return ( - - - + ); } @@ -179,26 +177,20 @@ export function Table({ } if (state.pagination) { - return ( - - - - ); + return ; } if (isSearchable) { return ( - - - + ); } @@ -239,12 +231,7 @@ function SearchableBasicTable({ }: SearchableBasicTableProps) { return ( <> - - - + ({ return ( <> {isTopPager && ( - - + <> + + + ({ {...fetching} {...pagination} /> - + )} {renderHeaders()} @@ -344,9 +333,11 @@ function ServersideTable({ {renderHeaders()} {renderBody(data)} - - - + {(nextPage || prevPage) && ( + + + + )} ); } diff --git a/web/packages/design/src/DataTable/index.ts b/web/packages/design/src/DataTable/index.ts index 3192b9177fd76..1cefb036ed1fd 100644 --- a/web/packages/design/src/DataTable/index.ts +++ b/web/packages/design/src/DataTable/index.ts @@ -24,15 +24,7 @@ import { LabelCell, ClickableLabelCell, } from './Cells'; -import { StyledPanel, StyledTableWrapper } from './StyledTable'; +import { StyledPanel } from './StyledTable'; -export { - Cell, - TextCell, - DateCell, - LabelCell, - ClickableLabelCell, - StyledPanel, - StyledTableWrapper, -}; +export { Cell, TextCell, DateCell, LabelCell, ClickableLabelCell, StyledPanel }; export default Table; diff --git a/web/packages/design/src/ThemeProvider/globals.js b/web/packages/design/src/ThemeProvider/globals.js index d2e0e41cdaf81..7f3de31e2065c 100644 --- a/web/packages/design/src/ThemeProvider/globals.js +++ b/web/packages/design/src/ThemeProvider/globals.js @@ -39,6 +39,10 @@ const GlobalStyle = createGlobalStyle` input { accent-color: ${props => props.theme.colors.brand}; + + ::placeholder { + color: ${props => props.theme.colors.text.muted}; + } } // custom scrollbars with the ability to use the default scrollbar behavior via adding the attribute [data-scrollbar=default] diff --git a/web/packages/design/src/theme/typography.js b/web/packages/design/src/theme/typography.js index 44610a0b89e2c..333b7981510e9 100644 --- a/web/packages/design/src/theme/typography.js +++ b/web/packages/design/src/theme/typography.js @@ -90,6 +90,12 @@ const typography = { fontWeight: regular, lineHeight: '14px', }, + table: { + fontWeight: light, + fontSize: '14px', + lineHeight: '20px', + letterSpacing: '0.035px', + }, }; export default typography; diff --git a/web/packages/shared/components/Search/SearchPanel.tsx b/web/packages/shared/components/Search/SearchPanel.tsx index fd68bb5f0ef7c..6a0ea66f029fa 100644 --- a/web/packages/shared/components/Search/SearchPanel.tsx +++ b/web/packages/shared/components/Search/SearchPanel.tsx @@ -16,11 +16,12 @@ * along with this program. If not, see . */ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { Text, Flex } from 'design'; +import { Flex } from 'design'; import { StyledPanel } from 'design/DataTable'; import InputSearch from 'design/DataTable/InputSearch'; +import { PageIndicatorText } from 'design/DataTable/Pager/PageIndicatorText'; import { ResourceFilter } from 'teleport/services/agents'; import { AdvancedSearchToggle } from 'shared/components/AdvancedSearchToggle'; @@ -107,31 +108,10 @@ const StyledFlex = styled(Flex)` // The timing functions of transitions have been chosen so that the element loses opacity slowly // when entering the disabled state but gains it quickly when going out of the disabled state. transition: opacity 150ms ease-out; + &.disabled { pointer-events: none; opacity: 0.7; transition: opacity 150ms ease-in; } `; - -export function PageIndicatorText({ - from, - to, - count, -}: { - from: number; - to: number; - count: number; -}) { - return ( - - Showing {from} - {to} of{' '} - {count} - - ); -} diff --git a/web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.tsx b/web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.tsx index 472200036201e..8b86351309421 100644 --- a/web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.tsx +++ b/web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.tsx @@ -105,30 +105,10 @@ function RemoveCell({ onRemove }: RemoveCellProps) { ); } -const StyledTable = styled(Table)( - props => ` - background-color: transparent; - - & > tbody > tr > td, thead > tr > th { - font-size: ${props.theme.fontSizes[2]}px; +const StyledTable = styled(Table)` + & > tbody > tr > td, + thead > tr > th { font-weight: 300; + padding-bottom: ${props => props.theme.space[2]}px; } - - & > thead > tr > th { - text-transform: none; - padding-top: ${props.theme.space[2]}px; - padding-bottom: ${props.theme.space[2]}px; - - &:first-child { - border-radius: ${props.theme.radii[2]}px 0 0 ${props.theme.radii[2]}px; - } - &:last-child { - border-radius: 0 ${props.theme.radii[2]}px ${props.theme.radii[2]}px 0; - } - } - - & > tbody > tr { - border: none; - } -` -); +`; diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap index 41715bf996024..12adc72a84915 100644 --- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap +++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap @@ -1,21 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`list of all events 1`] = ` -.c7 { +.c6 { box-sizing: border-box; + margin-bottom: 4px; width: 100%; } -.c9 { +.c8 { box-sizing: border-box; margin-right: 8px; } -.c13 { +.c12 { box-sizing: border-box; } -.c22 { +.c20 { line-height: 1.5; margin: 0; display: inline-flex; @@ -43,22 +44,22 @@ exports[`list of all events 1`] = ` width: 87px; } -.c22:hover, -.c22:focus { +.c20:hover, +.c20:focus { background: rgba(255,255,255,0.07); } -.c22:active { +.c20:active { background: rgba(255,255,255,0.13); } -.c22:disabled { +.c20:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c15 { +.c13 { align-items: center; border: none; cursor: pointer; @@ -80,25 +81,25 @@ exports[`list of all events 1`] = ` margin-right: 0px; } -.c15:disabled { +.c13:disabled { color: rgba(255,255,255,0.36); } -.c15:disabled { +.c13:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c15:hover:enabled, -.c15:focus:enabled { +.c13:hover:enabled, +.c13:focus:enabled { background: rgba(255,255,255,0.13); } -.c15:active:enabled { +.c13:active:enabled { background: rgba(255,255,255,0.18); } -.c18 { +.c16 { align-items: center; border: none; cursor: pointer; @@ -119,31 +120,31 @@ exports[`list of all events 1`] = ` margin-left: 0px; } -.c18:disabled { +.c16:disabled { color: rgba(255,255,255,0.36); } -.c18:disabled { +.c16:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c18:hover:enabled, -.c18:focus:enabled { +.c16:hover:enabled, +.c16:focus:enabled { background: rgba(255,255,255,0.13); } -.c18:active:enabled { +.c16:active:enabled { background: rgba(255,255,255,0.18); } -.c17 { +.c15 { display: inline-flex; align-items: center; justify-content: center; } -.c21 { +.c19 { display: inline-flex; align-items: center; justify-content: center; @@ -151,7 +152,7 @@ exports[`list of all events 1`] = ` padding: 4px; } -.c11 { +.c10 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -159,124 +160,132 @@ exports[`list of all events 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; -} - -.c8 { - display: flex; - justify-content: flex-end; + font-weight: 500; } -.c10 { +.c7 { display: flex; align-items: center; + justify-content: flex-end; } -.c14 { +.c9 { display: flex; } -.c19 { - background: #222C59; +.c17 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c19 > thead > tr > th, -.c19 > tbody > tr > th, -.c19 > tfoot > tr > th, -.c19 > thead > tr > td, -.c19 > tbody > tr > td, -.c19 > tfoot > tr > td { +.c17 > thead > tr > th, +.c17 > tbody > tr > th, +.c17 > tfoot > tr > th, +.c17 > thead > tr > td, +.c17 > tbody > tr > td, +.c17 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c19 > thead > tr > th:first-child, -.c19 > tbody > tr > th:first-child, -.c19 > tfoot > tr > th:first-child, -.c19 > thead > tr > td:first-child, -.c19 > tbody > tr > td:first-child, -.c19 > tfoot > tr > td:first-child { +.c17 > thead > tr > th:first-child, +.c17 > tbody > tr > th:first-child, +.c17 > tfoot > tr > th:first-child, +.c17 > thead > tr > td:first-child, +.c17 > tbody > tr > td:first-child, +.c17 > tfoot > tr > td:first-child { padding-left: 24px; } -.c19 > thead > tr > th:last-child, -.c19 > tbody > tr > th:last-child, -.c19 > tfoot > tr > th:last-child, -.c19 > thead > tr > td:last-child, -.c19 > tbody > tr > td:last-child, -.c19 > tfoot > tr > td:last-child { +.c17 > thead > tr > th:last-child, +.c17 > tbody > tr > th:last-child, +.c17 > tfoot > tr > th:last-child, +.c17 > thead > tr > td:last-child, +.c17 > tbody > tr > td:last-child, +.c17 > tfoot > tr > td:last-child { padding-right: 24px; } -.c19 > tbody > tr > td { +.c17 > tbody > tr > td { vertical-align: middle; } -.c19 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c17 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c19 > thead > tr > th svg { +.c17 > thead > tr > th svg { height: 12px; } -.c19 > tbody > tr > td { +.c17 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; +} + +.c17 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c19 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c17 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c19 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c17 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c1 { - padding: 16px 24px; +.c17 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c0 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; -} - -.c0 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c16 svg { +.c14 svg { font-size: 20px; } -.c16 svg:before { +.c14 svg:before { padding-left: 1px; } -.c12 { +.c11 { color: #009EFF; background: none; text-decoration: underline; @@ -288,83 +297,71 @@ exports[`list of all events 1`] = ` font-size: 12px; } -.c12:hover, -.c12:focus { +.c11:hover, +.c11:focus { cursor: pointer; } -.c12:disabled { +.c11:disabled { color: rgba(255,255,255,0.36); cursor: wait; } -.c6 { +.c5 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c5 { +.c4 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c3 { +.c2 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c2 { +.c1 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c4 { +.c3 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c4:hover, -.c4:focus, -.c4:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c4::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c20 { +.c18 { display: flex; align-items: center; min-width: 130px; @@ -375,74 +372,127 @@ exports[`list of all events 1`] = ` }
-
- +
+
-
+ 1 + + - + + 236 + + of + + + 236 + +
+ +
+
+ -
-
+ + + + + + +
+
+ + + + + + + + + + +
+ + Type - - + Description + + + Created (UTC) - - - - - - - - - - - - - - - + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - + + + - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - + + + - - - - - + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - -
- - Type - - - - - - - - - Description - - - Created (UTC) - - - - - - - -
+ + +
+
-
- - - - - - - - - SPIFFE SVID Issued -
-
- User [bot-test12] issued SPIFFE SVID [spiffe://example.teleport.com/bar] - - 2024-02-02T15:48:25.35Z - - -
+ + + + + + SPIFFE SVID Issued + + + User [bot-test12] issued SPIFFE SVID [spiffe://example.teleport.com/bar] + + 2024-02-02T15:48:25.35Z + +
+
+ - - - - - - - - Bot Created -
-
- User [noah] created a Bot [made-by-noah] - - 2023-12-08T10:53:39.798Z - - -
+ + + + + Bot Created + + + User [noah] created a Bot [made-by-noah] + + 2023-12-08T10:53:39.798Z + +
+
+ - - - - - - - - Bot Deleted -
-
- User [noah] deleted a Bot [review2] - - 2023-12-08T09:52:30.579Z - - -
+ + + + + Bot Deleted + + + User [noah] deleted a Bot [review2] + + 2023-12-08T09:52:30.579Z + + - User [marek] executed Access Monitoring query [select * FROM cert_create] - - 2023-10-09T10:09:10.473Z - - -
+
+
-
- - - - - - - - Access Monitoring Report Executed -
-
- User [system] executed [privilege_access_report_90_days] access monitoring report - - 2023-10-09T09:10:03.633Z - - -
+ + + + + Access Monitoring Query Executed + + + User [marek] executed Access Monitoring query [select * FROM cert_create] + + 2023-10-09T10:09:10.473Z + + - User [mike] failed to remove all members from access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - All members removed from access list -
-
- User [mike] removed all members from access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access Monitoring Report Executed + + + User [system] executed [privilege_access_report_90_days] access monitoring report + + 2023-10-09T09:10:03.633Z + + - User [mike] failed to remove members [carrot, apple, banana] from access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - Access list member removed -
-
- User [mike] removed member [user] from access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list member delete all members failure + + + User [mike] failed to remove all members from access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Access list member update failure -
-
- User [mike] failed to update member [user] in access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + All members removed from access list + + + User [mike] removed all members from access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - Access list member updated -
-
- User [mike] updated member [user] in access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list member removal failure + + + User [mike] failed to remove members [carrot, apple, banana] from access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Access list member addition failure -
-
- User [mike] failed to add member [user] to access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + Access list member removed + + + User [mike] removed member [user] from access list [access-list] + + 2023-05-08T19:21:36.144Z + + - User [mike] added member [user] to access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Access list review failed -
-
- User [mike] failed to to review access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list member update failure + + + User [mike] failed to update member [user] in access list [access-list] + + 2023-05-08T19:21:36.144Z + + - User [mike] reviewed access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Access list delete failed -
-
- User [mike] failed to delete access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + Access list member updated + + + User [mike] updated member [user] in access list [access-list] + + 2023-05-08T19:21:36.144Z + + - User [mike] deleted access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Access list update failed -
-
- User [mike] failed to update access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list member addition failure + + + User [mike] failed to add member [user] to access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Access list updated -
-
- User [mike] updated access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + Access list member added + + + User [mike] added member [user] to access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Access list create failed -
-
- User [mike] failed to create access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list review failed + + + User [mike] failed to to review access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Access list created -
-
- User [mike] created access list [access-list] - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list reviewed + + + User [mike] reviewed access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Okta access list synchronization failed -
-
+ + + + + Access list delete failed + + + User [mike] failed to delete access list [access-list] + + 2023-05-08T19:21:36.144Z + + - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Okta access list synchronization completed -
-
- Okta access list synchronization successfully completed - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list deleted + + + User [mike] deleted access list [access-list] + + 2023-05-08T19:21:36.144Z + + - Okta assignment [assignment-id], source [source], user [mike] cleanup has failed - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Okta assignment has been cleaned up -
-
- Okta assignment [assignment-id], source [source], user [mike] has been successfully cleaned up - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list update failed + + + User [mike] failed to update access list [access-list] + + 2023-05-08T19:21:36.144Z + + - Okta assignment [assignment-id], source [source], user [mike] processing has failed - - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Okta assignment has been processed -
-
- Okta assignment [assignment-id], source [source], user [mike] has been successfully processed - - 2023-05-08T19:21:36.144Z - - -
+ + + + + Access list updated + + + User [mike] updated access list [access-list] + + 2023-05-08T19:21:36.144Z + +
+
+ - - - - - - - - Okta synchronization failed -
-
+ + + + + Access list create failed + + + User [mike] failed to create access list [access-list] + + 2023-05-08T19:21:36.144Z + + - 2023-05-08T19:21:36.144Z - - -
+
+
-
- - - - - - - - Okta applications have been updated -
-
- [5] added, [1] updated, [7] deleted - - 2023-05-08T19:21:36.144Z - - -
+ + + + + + Access list created + + + User [mike] created access list [access-list] + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta access list synchronization failed +
+
+ Okta access list synchronization failed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta access list synchronization completed +
+
+ Okta access list synchronization successfully completed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta assignment failed to clean up +
+
+ Okta assignment [assignment-id], source [source], user [mike] cleanup has failed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta assignment has been cleaned up +
+
+ Okta assignment [assignment-id], source [source], user [mike] has been successfully cleaned up + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta assignment failed to process +
+
+ Okta assignment [assignment-id], source [source], user [mike] processing has failed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta assignment has been processed +
+
+ Okta assignment [assignment-id], source [source], user [mike] has been successfully processed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta synchronization failed +
+
+ Okta synchronization failed + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta applications have been updated +
+
+ [5] added, [1] updated, [7] deleted + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + + + Okta groups have been updated +
+
+ [5] added, [1] updated, [7] deleted + + 2023-05-08T19:21:36.144Z + + +
+
+ + + + + + OpenSearch Request Failed +
+
+ User [alice@example.com] has attempted to run a [SEARCH] query in [opensearch-aws], request path: [/_count] + + 2023-03-11T11:08:29.954Z + + +
+
+ + + + + + OpenSearch Request +
+
+ User [alice@example.com] has ran a [SEARCH] query in [opensearch-aws], request path: [/_count] + + 2023-03-11T11:08:29.954Z + + +
+
+ + + + + + + + SAML IdP service provider delete failed +
+
+ User [mike] failed to delete all service providers + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP service provider delete failed +
+
+ User [mike] failed to delete all service providers + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + All SAML IdP service provider deleted +
+
+ User [mike] deleted all service providers + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP service provider delete failed +
+
+ User [mike] failed to delete service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP service provider deleted +
+
+ User [mike] deleted service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP service provider update failed +
+
+ User [mike] failed to update service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
-
- - - - - - - - Okta groups have been updated -
-
- [5] added, [1] updated, [7] deleted - - 2023-05-08T19:21:36.144Z - - -
+ + + + + SAML IdP service provider updated + + + User [mike] updated service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + +
+
+ - - - - - - OpenSearch Request Failed -
-
- User [alice@example.com] has attempted to run a [SEARCH] query in [opensearch-aws], request path: [/_count] - - 2023-03-11T11:08:29.954Z - - -
+ + + + + SAML IdP service provider create failed + + + User [mike] failed to add service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP service provider created +
+
+ User [mike] added service provider [saml-idp] with entity ID [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP authentication +
+
+ User [mike] failed to authenticate to SAML service provider [shortcut] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP authentication +
+
+ User [mike] failed to authenticate to SAML service provider [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + SAML IdP authentication +
+
+ User [mike] successfully authenticated to SAML service provider [valid-entity-id] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + Login Rule Deleted +
+
+ User [nic] deleted a login rule [test_rule] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + Login Rule Created +
+
+ User [nic] created a login rule [test_rule] + + 2023-01-25T19:21:36.144Z + + +
+
+ + + + + + + + Device Updated +
+
+ User [lisa] has updated a device + + 2023-01-12T21:31:29.191Z + +
+
+ - - - - - - OpenSearch Request -
-
- User [alice@example.com] has ran a [SEARCH] query in [opensearch-aws], request path: [/_count] - - 2023-03-11T11:08:29.954Z - - -
+ + + + + Device Enrolled + + + User [lisa] has failed to enroll their device + + 2023-01-12T21:31:29.191Z + +
+
+ - - - - - - - - SAML IdP service provider delete failed -
-
- User [mike] failed to delete all service providers - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Enrolled + + + User [lisa] has successfully enrolled their device + + 2023-01-12T21:31:29.191Z + +
+
+ - - - - - - - - SAML IdP service provider delete failed -
-
- User [mike] failed to delete all service providers - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Enroll Token Spent + + + User [lisa] has failed to spend a device enroll token + + 2023-01-12T21:31:29.191Z + +
+
+ - - - - - - - - All SAML IdP service provider deleted -
-
- User [mike] deleted all service providers - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Enroll Token Spent + + + User [lisa] has spent a device enroll token + + 2023-01-12T21:31:29.191Z + +
+
+ - - - - - - - - SAML IdP service provider delete failed -
-
- User [mike] failed to delete service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Deleted + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to delete a device + + 2023-01-12T20:33:20.527Z + +
+
+ - - - - - - - - SAML IdP service provider deleted -
-
- User [mike] deleted service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Deleted + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has deleted a device + + 2023-01-12T20:33:20.527Z + +
+
+ - - - - - - - - SAML IdP service provider update failed -
-
- User [mike] failed to update service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Enroll Token Created + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to create a device enroll token + + 2023-01-12T19:51:54.168Z + + - User [mike] updated service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+
+
-
- - - - - - - - SAML IdP service provider create failed -
-
- User [mike] failed to add service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Enroll Token Created + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] created a device enroll token + + 2023-01-12T19:51:54.168Z + +
+
+ - - - - - - - - SAML IdP service provider created -
-
- User [mike] added service provider [saml-idp] with entity ID [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Authenticated + + + User [lisa] has failed to authenticate their device + + 2023-01-12T19:34:48.1Z + +
+
+ - - - - - - - - SAML IdP authentication -
-
- User [mike] failed to authenticate to SAML service provider [shortcut] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Authenticated + + + User [lisa] has successfully authenticated their device + + 2023-01-12T19:34:48.1Z + +
+
+ - - - - - - - - SAML IdP authentication -
-
- User [mike] failed to authenticate to SAML service provider [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Registered + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to register a device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - SAML IdP authentication -
-
- User [mike] successfully authenticated to SAML service provider [valid-entity-id] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Registered + + + User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has registered a device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Login Rule Deleted -
-
- User [nic] deleted a login rule [test_rule] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Updated + + + User [[object Object]] has updated a device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Login Rule Created -
-
- User [nic] created a login rule [test_rule] - - 2023-01-25T19:21:36.144Z - - -
+ + + + + Device Authenticated + + + User [[object Object]] has failed to authenticate their device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Updated -
-
- User [lisa] has updated a device - - 2023-01-12T21:31:29.191Z - - -
+ + + + + Device Enrolled + + + User [[object Object]] has failed to enroll their device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Enrolled -
-
- User [lisa] has failed to enroll their device - - 2023-01-12T21:31:29.191Z - - -
+ + + + + Device Enroll Token Spent + + + User [[object Object]] has spent a device enroll token + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Enrolled -
-
- User [lisa] has successfully enrolled their device - - 2023-01-12T21:31:29.191Z - - -
+ + + + + Device Enroll Token Created + + + User [[object Object]] created a device enroll token + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Enroll Token Spent -
-
- User [lisa] has failed to spend a device enroll token - - 2023-01-12T21:31:29.191Z - - -
+ + + + + Device Deleted + + + User [[object Object]] has deleted a device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Enroll Token Spent -
-
- User [lisa] has spent a device enroll token - - 2023-01-12T21:31:29.191Z - - -
+ + + + + Device Registered + + + User [[object Object]] has registered a device + + 2023-01-12T19:28:36.842Z + +
+
+ - - - - - - - - Device Deleted -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to delete a device - - 2023-01-12T20:33:20.527Z - - -
+ + + DynamoDB Request + + + User [alice@example.com] has made a request to database [ddb1], target API: [DynamoDB_20120810.Scan] + + 2022-12-23T19:14:07.763Z + +
+
+ - - - - - - - - Device Deleted -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has deleted a device - - 2023-01-12T20:33:20.527Z - - -
+ + + DynamoDB Request Failed + + + User [alice@example.com] failed to make a request to database [ddb1], target API: [DynamoDB_20120810.Scan] + + 2022-12-23T19:04:07.763Z + +
+
+ - - - - - - - - Device Enroll Token Created -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to create a device enroll token - - 2023-01-12T19:51:54.168Z - - -
+ + + + + Instance Joined + + + Instance [noah-laptop-follower] joined the cluster with the [Instance] role using the [token] join method + + 2022-12-06T09:17:06.392Z + +
+
+ - - - - - - - - Device Enroll Token Created -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] created a device enroll token - - 2023-01-12T19:51:54.168Z - - -
+ + + + + Bot Joined + + + Bot [github-demo] joined the cluster using the [github] join method + + 2022-12-05T17:11:03.268Z + +
+
+ - - - - - - - - Device Authenticated -
-
- User [lisa] has failed to authenticate their device - - 2023-01-12T19:34:48.1Z - - -
+ + + + Directory Sharing Write Failed + + + User [joe] failed to write [734] bytes to file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T23:19:34.519058Z + +
+
+ - - - - - - - - Device Authenticated -
-
- User [lisa] has successfully authenticated their device - - 2023-01-12T19:34:48.1Z - - -
+ + + + Directory Sharing Write + + + User [joe] wrote [734] bytes to file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T23:19:34.519058Z + +
+
+ - - - - - - - - Device Registered -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has failed to register a device - - 2023-01-12T19:28:36.842Z - - -
+ + + + Directory Sharing Read Failed + + + User [joe] failed to read [734] bytes from file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T23:07:36.496189Z + +
+
+ - - - - - - - - Device Registered -
-
- User [3827e8ad-7cbe-4423-a80f-dfc89e83eb86.im-a-cluster-name] has registered a device - - 2023-01-12T19:28:36.842Z - - -
+ + + + Directory Sharing Read + + + User [joe] read [734] bytes from file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T23:07:36.496189Z + + +
+
-
- - - - - - - - Device Updated -
-
- User [[object Object]] has updated a device - - 2023-01-12T19:28:36.842Z - - -
+ + + + Directory Sharing Start Failed + + + User [joe] failed to start sharing directory [windows-server-2012-shared] to desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T22:36:27.314409Z + + - User [[object Object]] has failed to authenticate their device - - 2023-01-12T19:28:36.842Z - - -
+
+
-
- - - - - - - - Device Enrolled -
-
- User [[object Object]] has failed to enroll their device - - 2023-01-12T19:28:36.842Z - - -
+ + + + Directory Sharing Started + + + User [joe] started sharing directory [windows-server-2012-shared] to desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] + + 2022-10-21T22:36:27.314409Z + + - User [[object Object]] has spent a device enroll token - - 2023-01-12T19:28:36.842Z - - -
+
+
-
- - - - - - - - Device Enroll Token Created -
-
- User [[object Object]] created a device enroll token - - 2023-01-12T19:28:36.842Z - - -
+ + + App Session DynamoDB Request + + + User [alice] has made a request to application [dyno2] + + 2022-10-19T19:04:07.763Z + +
+
+ - - - - - - - - Device Deleted -
-
- User [[object Object]] has deleted a device - - 2023-01-12T19:28:36.842Z - - -
+ + + App Session DynamoDB Request + + + User [alice] has made a request to application [dyno1], target: [DynamoDB_20120810.Scan] + + 2022-10-19T19:04:07.763Z + +
+
+ - - - - - - - - Device Registered -
-
- User [[object Object]] has registered a device - - 2023-01-12T19:28:36.842Z - - -
+ + + Application Deleted + + + User [mike] deleted application [dynamic-app] + + 2022-09-27T19:11:35.00Z + +
+
+ - - - - - - DynamoDB Request -
-
- User [alice@example.com] has made a request to database [ddb1], target API: [DynamoDB_20120810.Scan] - - 2022-12-23T19:14:07.763Z - - -
+ + + Application Updated + + + User [mike] updated application [dynamic-app] + + 2022-09-27T19:09:35.00Z + +
+
+ - - - - - - DynamoDB Request Failed -
-
- User [alice@example.com] failed to make a request to database [ddb1], target API: [DynamoDB_20120810.Scan] - - 2022-12-23T19:04:07.763Z - - -
+ + + Application Created + + + User [mike] created application [dynamic-app] + + 2022-09-27T19:07:35.00Z + + - Instance [noah-laptop-follower] joined the cluster with the [Instance] role using the [token] join method - - 2022-12-06T09:17:06.392Z - - -
+
+
-
- - - - - - - - Bot Joined -
-
- Bot [github-demo] joined the cluster using the [github] join method - - 2022-12-05T17:11:03.268Z - - -
+ + + Elasticsearch Request + + + User [alice] has ran a [SEARCH] query in [myelastic], request path: [/_search], query string: [{"term":{"user.id":"bob"}}] + + 2022-09-27T13:11:01.071Z + +
+
+ - - - - - - - Directory Sharing Write Failed -
-
- User [joe] failed to write [734] bytes to file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T23:19:34.519058Z - - -
+ + + Elasticsearch Request + + + User [alice] has ran a [SEARCH] query in [myelastic], request path: [/_all/_search], query string: [{"term":{"user.id":"bob"}}], target: [_all] + + 2022-09-27T13:09:33.419Z + +
+
+ - - - - - - - Directory Sharing Write -
-
- User [joe] wrote [734] bytes to file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T23:19:34.519058Z - - -
+ + + Elasticsearch Request + + + User [alice] has ran a [GENERAL] query in [myelastic], request path: [/] + + 2022-09-27T11:43:58.433Z + +
+
+ - - - - - - - Directory Sharing Read Failed -
-
- User [joe] failed to read [734] bytes from file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T23:07:36.496189Z - - -
+ + + + + SSM Command Execution Failed + + + SSM Command with ID [c2936d68-fc0c-4c16-a860-916a97f57644] failed during execution on EC2 Instance [i-057d0ffe877128673] on AWS Account [278576220453] in [eu-central-1] + + 2022-09-14T14:45:38.122Z + +
+
+ - - - - - - - Directory Sharing Read -
-
- User [joe] read [734] bytes from file [powershell-scripts/domain-controller.ps1] in shared directory [windows-server-2012-shared] on desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T23:07:36.496189Z - - -
+ + + + + SSM Command Executed + + + SSM Command with ID [e8a5f3ba-e9e5-4cbd-979b-18fd1e7ad00f] was successfully executed on EC2 Instance [i-057d0ffe877128673] on AWS Account [278576220453] in [eu-central-1] + + 2022-09-14T14:45:38.122Z + +
+
+ - - - - - - - Directory Sharing Start Failed -
-
- User [joe] failed to start sharing directory [windows-server-2012-shared] to desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T22:36:27.314409Z - - -
+ + + Kubernetes Deleted + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] deleted kubernetes cluster [kube-local] + + 2022-09-08T15:42:36.005Z + +
+
+ - - - - - - - Directory Sharing Started -
-
- User [joe] started sharing directory [windows-server-2012-shared] to desktop [ec2-54-162-177-255.compute-1.amazonaws.com:3389] - - 2022-10-21T22:36:27.314409Z - - -
+ + + Kubernetes Updated + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] updated kubernetes cluster [kube-local] + + 2022-09-08T15:42:36.005Z + + +
+
-
- - - - - - App Session DynamoDB Request -
-
- User [alice] has made a request to application [dyno2] - - 2022-10-19T19:04:07.763Z - - -
+ + + Kubernetes Created + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] created kubernetes cluster [kube-local] + + 2022-09-08T15:42:36.005Z + +
+
+ - - - - - - App Session DynamoDB Request -
-
- User [alice] has made a request to application [dyno1], target: [DynamoDB_20120810.Scan] - - 2022-10-19T19:04:07.763Z - - -
+ + + + + App Session Ended + + + User [alice] has disconnected from application [ponger] + + 2022-08-10T19:54:40.444Z + +
+
+ - - - - - - Application Deleted -
-
- User [mike] deleted application [dynamic-app] - - 2022-09-27T19:11:35.00Z - - -
+ + + + + Session Recording Accessed + + + User [ops@gravitational.io] accessed a session recording [44c6cea8-362f-11ea-83aa-125400432324] + + 2022-07-14T18:04:37.067Z + +
+
+ - - - - - - Application Updated -
-
- User [mike] updated application [dynamic-app] - - 2022-09-27T19:09:35.00Z - - -
+ + + + + Resource Access Search + + + User [foo] searched for resource type [db_server] with role(s) [admin,really-long-role-name-1,really-long-role-name-2,really-long-role-name-3...] + + 2022-06-08T15:10:35.368Z + +
+
+ - - - - - - Application Created -
-
- User [mike] created application [dynamic-app] - - 2022-09-27T19:07:35.00Z - - -
+ + + Cassandra Register + + + User [alice] has sent Cassandra Register to [cassandra] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Elasticsearch Request -
-
- User [alice] has ran a [SEARCH] query in [myelastic], request path: [/_search], query string: [{"term":{"user.id":"bob"}}] - - 2022-09-27T13:11:01.071Z - - -
+ + + Cassandra Batch + + + User [alice] has sent Cassandra Batch to [cassandra] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Elasticsearch Request -
-
- User [alice] has ran a [SEARCH] query in [myelastic], request path: [/_all/_search], query string: [{"term":{"user.id":"bob"}}], target: [_all] - - 2022-09-27T13:09:33.419Z - - -
+ + + Cassandra Execute + + + User [alice] has sent Cassandra Execute to [cassandra] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Elasticsearch Request -
-
- User [alice] has ran a [GENERAL] query in [myelastic], request path: [/] - - 2022-09-27T11:43:58.433Z - - -
+ + + Cassandra Prepare Event + + + User [alice] has sent Cassandra Prepare [SELECT * FROM system_schema.keyspaces] to [cassandra] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - - - SSM Command Execution Failed -
-
- SSM Command with ID [c2936d68-fc0c-4c16-a860-916a97f57644] failed during execution on EC2 Instance [i-057d0ffe877128673] on AWS Account [278576220453] in [eu-central-1] - - 2022-09-14T14:45:38.122Z - - -
+ + + Database User Deactivate Failure + + + Failed to disable database user [ben] in database [postgres-local], error: [dummy error] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - - - SSM Command Executed -
-
- SSM Command with ID [e8a5f3ba-e9e5-4cbd-979b-18fd1e7ad00f] was successfully executed on EC2 Instance [i-057d0ffe877128673] on AWS Account [278576220453] in [eu-central-1] - - 2022-09-14T14:45:38.122Z - - -
+ + + Database User Deactivated + + + Database user [ben] deleted in database [postgres-local] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Kubernetes Deleted -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] deleted kubernetes cluster [kube-local] - - 2022-09-08T15:42:36.005Z - - -
+ + + Database User Deactivated + + + Database user [ben] disabled in database [postgres-local] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Kubernetes Updated -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] updated kubernetes cluster [kube-local] - - 2022-09-08T15:42:36.005Z - - -
+ + + Database User Creation Failed + + + Failed to create database user [ben] in database [postgres-local], error: [dummy error] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - Kubernetes Created -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] created kubernetes cluster [kube-local] - - 2022-09-08T15:42:36.005Z - - -
+ + + Database User Created + + + Database user [alice] created in database [postgres-local], roles: [foo,bar] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - - - App Session Ended -
-
- User [alice] has disconnected from application [ponger] - - 2022-08-10T19:54:40.444Z - - -
+ + + Database User Created + + + Database user [alice] created in database [postgres-local] + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - - - Session Recording Accessed -
-
- User [ops@gravitational.io] accessed a session recording [44c6cea8-362f-11ea-83aa-125400432324] - - 2022-07-14T18:04:37.067Z - - -
+ + + Database User Permissions Updated + + + Database user [alice] permissions updated for database [master] on [postgres-local]: INSERT:table:1,view:2; SELECT:table:2,view:4; UPDATE:table:3 + + 2022-06-02T08:46:33.825Z + +
+
+ - - - - - - - - Resource Access Search -
-
- User [foo] searched for resource type [db_server] with role(s) [admin,really-long-role-name-1,really-long-role-name-2,really-long-role-name-3...] - - 2022-06-08T15:10:35.368Z - - -
+ + + Database Malformed Packet + + + Received malformed packet from [alice] in [master] on database [sqlserver02] + + 2022-06-02T08:46:33.825Z + + +
+
-
- - - - - - Cassandra Register -
-
- User [alice] has sent Cassandra Register to [cassandra] - - 2022-06-02T08:46:33.825Z - - -
+ + + SQLServer RPC Request + + + User [alice] has sent RPC Request [Sp_ExecuteSql] in database [master] on [sqlserver02] + + 2022-06-02T08:29:17.693Z + + - User [alice] has sent Cassandra Batch to [cassandra] - - 2022-06-02T08:46:33.825Z - - -
+
+
-
- - - - - - Cassandra Execute -
-
- User [alice] has sent Cassandra Execute to [cassandra] - - 2022-06-02T08:46:33.825Z - - -
+ + + + + SSO Test Flow Login Failed + + + SSO Test flow: user login failed [No roles mapped from claims. The mappings may contain typos.] + + 2022-05-23T08:29:14.126Z + +
+
+ - - - - - - Cassandra Prepare Event -
-
- User [alice] has sent Cassandra Prepare [SELECT * FROM system_schema.keyspaces] to [cassandra] - - 2022-06-02T08:46:33.825Z - - -
+ + + + + SSO Test Flow Login + + + SSO Test Flow: user [ops@gravitational.io] successfully logged in + + 2022-05-23T08:28:37.067Z + +
+
+ - - - - - - Database User Deactivate Failure -
-
- Failed to disable database user [ben] in database [postgres-local], error: [dummy error] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Change Database + + + User [alice@example.com] has changed default database to [another_database] on [self-hosted-mysql] + + 2022-04-13T20:00:10.000Z + +
+
+ - - - - - - Database User Deactivated -
-
- Database user [ben] deleted in database [postgres-local] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Create Database + + + User [alice@example.com] has created database [another_database] on [self-hosted-mysql] + + 2022-04-13T20:00:09.000Z + +
+
+ - - - - - - Database User Deactivated -
-
- Database user [ben] disabled in database [postgres-local] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Drop Database + + + User [alice@example.com] has dropped database [another_database] on [self-hosted-mysql] + + 2022-04-13T20:00:08.000Z + +
+
+ - - - - - - Database User Creation Failed -
-
- Failed to create database user [ben] in database [postgres-local], error: [dummy error] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Shut Down + + + User [alice@example.com] has attempted to shut down [self-hosted-mysql] + + 2022-04-13T20:00:07.000Z + +
+
+ - - - - - - Database User Created -
-
- Database user [alice] created in database [postgres-local], roles: [foo,bar] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Kill Process + + + User [alice@example.com] has attempted to kill process [60] on [self-hosted-mysql] + + 2022-04-13T20:00:06.000Z + +
+
+ - - - - - - Database User Created -
-
- Database user [alice] created in database [postgres-local] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Debug + + + User [alice@example.com] has asked [self-hosted-mysql] to dump debug information + + 2022-04-13T20:00:05.000Z + +
+
+ - - - - - - Database User Permissions Updated -
-
- Database user [alice] permissions updated for database [master] on [postgres-local]: INSERT:table:1,view:2; SELECT:table:2,view:4; UPDATE:table:3 - - 2022-06-02T08:46:33.825Z - - -
+ + + + + Upgrade Window Start Updated + + + Upgrade Window Start updated to [23:00] by user [alice@example.com] + + 2022-04-13T20:00:04.000Z + +
+
+ - - - - - - Database Malformed Packet -
-
- Received malformed packet from [alice] in [master] on database [sqlserver02] - - 2022-06-02T08:46:33.825Z - - -
+ + + MySQL Refresh + + + User [alice@example.com] has sent command [REFRESH_THREADS] to [self-hosted-mysql] + + 2022-04-13T20:00:04.000Z + +
+
+ - - - - - - SQLServer RPC Request -
-
- User [alice] has sent RPC Request [Sp_ExecuteSql] in database [master] on [sqlserver02] - - 2022-06-02T08:29:17.693Z - - -
+ + + MySQL Statement Close + + + User [alice@example.com] has closed statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:56.000Z + +
+
+ - - - - - - - - SSO Test Flow Login Failed -
-
- SSO Test flow: user login failed [No roles mapped from claims. The mappings may contain typos.] - - 2022-05-23T08:29:14.126Z - - -
+ + + MySQL Statement Fetch + + + User [alice@example.com] has fetched 5 rows of statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:55.000Z + +
+
+ - - - - - - - - SSO Test Flow Login -
-
- SSO Test Flow: user [ops@gravitational.io] successfully logged in - - 2022-05-23T08:28:37.067Z - - -
+ + + MySQL Statement Execute + + + User [alice@example.com] has executed statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:54.000Z + +
+
+ - - - - - - MySQL Change Database -
-
- User [alice@example.com] has changed default database to [another_database] on [self-hosted-mysql] - - 2022-04-13T20:00:10.000Z - - -
+ + + MySQL Statement Bulk Execute + + + User [alice@example.com] has executed statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:53.000Z + +
+
+ - - - - - - MySQL Create Database -
-
- User [alice@example.com] has created database [another_database] on [self-hosted-mysql] - - 2022-04-13T20:00:09.000Z - - -
+ + + MySQL Statement Reset + + + User [alice@example.com] has reset statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:52.000Z + + +
+
-
- - - - - - MySQL Drop Database -
-
- User [alice@example.com] has dropped database [another_database] on [self-hosted-mysql] - - 2022-04-13T20:00:08.000Z - - -
+ + + MySQL Statement Send Long Data + + + User [alice@example.com] has sent 32 bytes of data to parameter [2] of statement [1] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:51.000Z + + - User [alice@example.com] has attempted to shut down [self-hosted-mysql] - - 2022-04-13T20:00:07.000Z - - -
+
+
-
- - - - - - MySQL Kill Process -
-
- User [alice@example.com] has attempted to kill process [60] on [self-hosted-mysql] - - 2022-04-13T20:00:06.000Z - - -
+ + + MySQL Statement Prepare + + + User [alice@example.com] has prepared [UPDATE \`test\`.\`user\` SET \`age\` = '7' WHERE (\`name\` = 'alice')] in database [test] on [self-hosted-mysql] + + 2022-02-10T20:57:50.000Z + + - User [alice@example.com] has asked [self-hosted-mysql] to dump debug information - - 2022-04-13T20:00:05.000Z - - -
+
+
-
- - - - - - - - Upgrade Window Start Updated -
-
- Upgrade Window Start updated to [23:00] by user [alice@example.com] - - 2022-04-13T20:00:04.000Z - - -
+ + + + + + Certificate Issued + + + User certificate issued for [alice] + + 2022-02-04T19:43:23.529Z + +
+
+ - - - - - - MySQL Refresh -
-
- User [alice@example.com] has sent command [REFRESH_THREADS] to [self-hosted-mysql] - - 2022-04-13T20:00:04.000Z - - -
+ + + Session Connected + + + Session connected to [192.168.0.106:43858] + + 2022-02-04T18:15:28.572Z + +
+
+ - - - - - - MySQL Statement Close -
-
- User [alice@example.com] has closed statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:56.000Z - - -
+ + + + + X11 Forwarding Request Failed + + + User [lisa] was denied x11 forwarding for a session + + 2022-01-20T19:49:02.307Z + +
+
+ - - - - - - MySQL Statement Fetch -
-
- User [alice@example.com] has fetched 5 rows of statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:55.000Z - - -
+ + + + + X11 Forwarding Requested + + + User [lisa] has requested x11 forwarding for a session + + 2022-01-20T18:31:45.012Z + +
+
+ - - - - - - MySQL Statement Execute -
-
- User [alice@example.com] has executed statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:54.000Z - - -
+ + + PostgreSQL Function Call + + + User [alice] has executed function with OID [123] on [local] + + 2021-12-16T00:40:37.073Z + +
+
+ - - - - - - MySQL Statement Bulk Execute -
-
- User [alice@example.com] has executed statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:53.000Z - - -
+ + + PostgreSQL Statement Close + + + User [alice] has closed statement [test-ps] on [local] + + 2021-12-16T00:40:37.073Z + +
+
+ - - - - - - MySQL Statement Reset -
-
- User [alice@example.com] has reset statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:52.000Z - - -
+ + + PostgreSQL Statement Execute + + + User [alice] has executed portal [] on [local] + + 2021-12-16T00:40:37.071Z + +
+
+ - - - - - - MySQL Statement Send Long Data -
-
- User [alice@example.com] has sent 32 bytes of data to parameter [2] of statement [1] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:51.000Z - - -
+ + + PostgreSQL Statement Bind + + + User [alice] has readied statement [test-ps] for execution as portal [] on [local] + + 2021-12-16T00:40:37.071Z + +
+
+ - - - - - - MySQL Statement Prepare -
-
- User [alice@example.com] has prepared [UPDATE \`test\`.\`user\` SET \`age\` = '7' WHERE (\`name\` = 'alice')] in database [test] on [self-hosted-mysql] - - 2022-02-10T20:57:50.000Z - - -
+ + + PostgreSQL Statement Parse + + + User [alice] has prepared [select id from test where id = $1::varchar] as statement [test-ps] on [local] + + 2021-12-16T00:40:37.069Z + +
+
+ - - - - - - - - - Certificate Issued -
-
- User certificate issued for [alice] - - 2022-02-04T19:43:23.529Z - - -
+ + + + + Privilege Token Created + + + Privilege token was created for user [user@example.com] + + 2021-11-01T22:24:47.99Z + +
+
+ - - - - - - Session Connected -
-
- Session connected to [192.168.0.106:43858] - - 2022-02-04T18:15:28.572Z - - -
+ + + + + Clipboard Data Received + + + User [joe] received 512 bytes of clipboard data from desktop [100.104.52.89:3389] + + 2021-10-18T23:39:13.105Z + +
+
+ - - - - - - - - X11 Forwarding Request Failed -
-
- User [lisa] was denied x11 forwarding for a session - - 2022-01-20T19:49:02.307Z - - -
+ + + + + Clipboard Data Sent + + + User [joe] sent 512 bytes of clipboard data to desktop [100.104.52.89:3389] + + 2021-10-18T23:39:13.105Z + +
+
+ - - - - - - - - X11 Forwarding Requested -
-
- User [lisa] has requested x11 forwarding for a session - - 2022-01-20T18:31:45.012Z - - -
+ + + Windows Desktop Session Denied + + + User [joe] was denied access to Windows desktop [Administrator@desktop-name] on [desktopaccess.com] + + 2021-10-18T23:39:13.105Z + +
+
+ - - - - - - PostgreSQL Function Call -
-
- User [alice] has executed function with OID [123] on [local] - - 2021-12-16T00:40:37.073Z - - -
+ + + Windows Desktop Session Ended + + + Session for Windows desktop [Administrator@desktop-name] on [desktopaccess.com] has ended for user [joe] + + 2021-10-18T23:19:13.105Z + +
+
+ - - - - - - PostgreSQL Statement Close -
-
- User [alice] has closed statement [test-ps] on [local] - - 2021-12-16T00:40:37.073Z - - -
+ + + Windows Desktop Session Started + + + User [joe] has connected to Windows desktop [Administrator@desktop-name] on [desktopaccess.com] + + 2021-10-18T23:18:29.144Z + +
+
+ - - - - - - PostgreSQL Statement Execute -
-
- User [alice] has executed portal [] on [local] - - 2021-12-16T00:40:37.071Z - - -
+ + + Database Deleted + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] deleted database [postgres-local] + + 2021-10-08T15:42:36.005Z + +
+
+ - - - - - - PostgreSQL Statement Bind -
-
- User [alice] has readied statement [test-ps] for execution as portal [] on [local] - - 2021-12-16T00:40:37.071Z - - -
+ + + Database Updated + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] updated database [postgres-local] + + 2021-10-08T15:42:24.581Z + +
+
+ - - - - - - PostgreSQL Statement Parse -
-
- User [alice] has prepared [select id from test where id = $1::varchar] as statement [test-ps] on [local] - - 2021-12-16T00:40:37.069Z - - -
+ + + Database Created + + + User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] created database [postgres-local] + + 2021-10-08T15:42:15.39Z + +
+
+ - - - - - - - - Privilege Token Created -
-
- Privilege token was created for user [user@example.com] - - 2021-11-01T22:24:47.99Z - - -
+ + + Lock Deleted + + + Lock [lock-name] was deleted by user [df83fda8-1111-5567-8bcc-c282dec3290e.im-a-cluster-name] + + 2021-08-06T18:49:51.626Z + +
+
+ - - - - - - - - Clipboard Data Received -
-
- User [joe] received 512 bytes of clipboard data from desktop [100.104.52.89:3389] - - 2021-10-18T23:39:13.105Z - - -
+ + + Lock Created + + + Lock [lock-name] was created by user [df83fda8-1111-5567-8bcc-c282dec3290e.im-a-cluster-name] + + 2021-08-06T18:47:19.75Z + +
+
+ - - - - - - - - Clipboard Data Sent -
-
- User [joe] sent 512 bytes of clipboard data to desktop [100.104.52.89:3389] - - 2021-10-18T23:39:13.105Z - - -
+ + + + Recovery Code Use Failed + + + User [user@example.com] failed an attempt to use a recovery code + + 2021-08-05T23:32:41.273Z + +
+
+ - - - - - - Windows Desktop Session Denied -
-
- User [joe] was denied access to Windows desktop [Administrator@desktop-name] on [desktopaccess.com] - - 2021-10-18T23:39:13.105Z - - -
+ + + + + Recovery Token Created + + + Recovery token was created for user [user@example.com] + + 2021-08-05T21:41:14.935Z + +
+
+ - - - - - - Windows Desktop Session Ended -
-
- Session for Windows desktop [Administrator@desktop-name] on [desktopaccess.com] has ended for user [joe] - - 2021-10-18T23:19:13.105Z - - -
+ + + + Recovery Code Used + + + User [user@example.com] successfully used a recovery code + + 2021-08-05T21:22:46.042Z + +
+
+ - - - - - - Windows Desktop Session Started -
-
- User [joe] has connected to Windows desktop [Administrator@desktop-name] on [desktopaccess.com] - - 2021-10-18T23:18:29.144Z - - -
+ + + + + + Recovery Codes Generated + + + New recovery codes were generated for user [user@example.com] + + 2021-08-05T21:16:17.13Z + +
+
+ - - - - - - Database Deleted -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] deleted database [postgres-local] - - 2021-10-08T15:42:36.005Z - - -
+ + + Database Session Ended + + + User [alice@example.com] has disconnected on [mongo-primary] + + 2021-07-14T07:06:25.608Z + +
+
+ - - - - - - Database Updated -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] updated database [postgres-local] - - 2021-10-08T15:42:24.581Z - - -
+ + + Database Query Failed + + + User [alice@example.com] query [{"find": "test","filter": {},"lsid": {"id": {"$binary":{"base64":"2KMk23/TTCK...] in database [houston] on [mongo-primary] failed + + 2021-07-14T07:05:22.32Z + +
+
+ - - - - - - Database Created -
-
- User [05ff66c9-a948-42f4-af0e-a1b6ba62561e.root] created database [postgres-local] - - 2021-10-08T15:42:15.39Z - - -
+ + + Database Query + + + User [alice@example.com] has executed query [{"find": "test","filter": {},"lsid": {"id": {"$binary":{"base64":"2KMk23/TTCK...] in database [test] on [mongo-primary] + + 2021-07-14T07:03:49.783Z + +
+
+ - - - - - - Lock Deleted -
-
- Lock [lock-name] was deleted by user [df83fda8-1111-5567-8bcc-c282dec3290e.im-a-cluster-name] - - 2021-08-06T18:49:51.626Z - - -
+ + + Database Session Started + + + User [alice@example.com] has connected as [alice] on [mongo-primary] + + 2021-07-14T07:01:31.958Z + +
+
+ - - - - - - Lock Created -
-
- Lock [lock-name] was created by user [df83fda8-1111-5567-8bcc-c282dec3290e.im-a-cluster-name] - - 2021-08-06T18:47:19.75Z - - -
+ + + Session Ended + + + User [foo] has ended a non-interactive session [9d92ad96-a45c-4add-463cc7bc48b1] on node [ip-172-31-30-254] + + 2021-05-21T22:54:27.123Z + +
+
+ - - - - - - - Recovery Code Use Failed -
-
- User [user@example.com] failed an attempt to use a recovery code - - 2021-08-05T23:32:41.273Z - - -
+ + + Session Ended + + + User [root] has ended an interactive session lasting 6 seconds [5ef7244c-0f7b-4f57-80b0-26a79f960aae] on node [im-a-nodename] + + 2021-05-12T01:26:22.613Z + +
+
+ - - - - - - - - Recovery Token Created -
-
- Recovery token was created for user [user@example.com] - - 2021-08-05T21:41:14.935Z - - -
+ + + Session Ended + + + User [root] has ended an interactive session lasting 2 minutes [941a4c65-c6cd-11ea-9bef-482ae3513733] on node [im-a-nodename] + + 2021-05-12T01:26:22.613Z + +
+
+ - - - - - - - Recovery Code Used -
-
- User [user@example.com] successfully used a recovery code - - 2021-08-05T21:22:46.042Z - - -
+ + + Billing Information Updated + + + User [root] has updated the billing information + + 2021-03-18T16:29:15.719Z + +
+
+ - - - - - - - - - Recovery Codes Generated -
-
- New recovery codes were generated for user [user@example.com] - - 2021-08-05T21:16:17.13Z - - -
+ + + Credit Card Added + + + User [root] has added a credit card + + 2021-03-18T16:29:05.044Z + +
+
+ - - - - - - Database Session Ended -
-
- User [alice@example.com] has disconnected on [mongo-primary] - - 2021-07-14T07:06:25.608Z - - -
+ + + Credit Card Deleted + + + User [root] has deleted a credit card + + 2021-03-18T16:28:51.219Z + +
+
+ - - - - - - Database Query Failed -
-
- User [alice@example.com] query [{"find": "test","filter": {},"lsid": {"id": {"$binary":{"base64":"2KMk23/TTCK...] in database [houston] on [mongo-primary] failed - - 2021-07-14T07:05:22.32Z - - -
+ + + Credit Card Updated + + + User [root] has updated a credit card + + 2021-03-18T16:28:49.067Z + +
+
+ - - - - - - Database Query -
-
- User [alice@example.com] has executed query [{"find": "test","filter": {},"lsid": {"id": {"$binary":{"base64":"2KMk23/TTCK...] in database [test] on [mongo-primary] - - 2021-07-14T07:03:49.783Z - - -
+ + + + + MFA Device Deleted + + + User [awly] deleted U2F device [usb-c] + + 2021-03-03T22:58:44.737Z + +
+
+ - - - - - - Database Session Started -
-
- User [alice@example.com] has connected as [alice] on [mongo-primary] - - 2021-07-14T07:01:31.958Z - - -
+ + + + + MFA Device Added + + + User [awly] added U2F device [usb-c] + + 2021-03-03T22:58:34.737Z + + - User [foo] has ended a non-interactive session [9d92ad96-a45c-4add-463cc7bc48b1] on node [ip-172-31-30-254] - - 2021-05-21T22:54:27.123Z - - -
+
+
-
- - - - - - Session Ended -
-
- User [root] has ended an interactive session lasting 6 seconds [5ef7244c-0f7b-4f57-80b0-26a79f960aae] on node [im-a-nodename] - - 2021-05-12T01:26:22.613Z - - -
+ + + Kubernetes Request + + + User [alex] received a [200] from a [GET /api/v1/namespaces/teletest/pods/test-pod] request to kubernetes cluster [gke_teleport-a] + + 2020-11-12T20:35:44.978Z + +
+
+ - - - - - - Session Ended -
-
- User [root] has ended an interactive session lasting 2 minutes [941a4c65-c6cd-11ea-9bef-482ae3513733] on node [im-a-nodename] - - 2021-05-12T01:26:22.613Z - - -
+ + + + + App Session Data + + + New session data chunk created for application [aws-console] accessed by user [alice] + + 2020-10-30T17:28:15.705Z + +
+
+ - - - - - - Billing Information Updated -
-
- User [root] has updated the billing information - - 2021-03-18T16:29:15.719Z - - -
+ + + + + App Session Started + + + User [STeve] has connected to AWS console [aws-console] + + 2020-10-30T17:28:15.381Z + +
+
+ - - - - - - Credit Card Added -
-
- User [root] has added a credit card - - 2021-03-18T16:29:05.044Z - - -
+ + + Command Execution + + + User [alex] executed a command on kubernetes cluster [clusterOne] + + 2020-10-30T17:28:14.705Z + +
+
+ - - - - - - Credit Card Deleted -
-
- User [root] has deleted a credit card - - 2021-03-18T16:28:51.219Z - - -
+ + + + + App Session Data + + + New session data chunk created for application [test] accessed by user [alice] + + 2020-10-30T17:28:14.705Z + +
+
+ - - - - - - Credit Card Updated -
-
- User [root] has updated a credit card - - 2021-03-18T16:28:49.067Z - - -
+ + + + + App Session Started + + + User [kimlisa] has connected to application [test] + + 2020-10-30T17:28:14.381Z + +
+
+ - - - - - - - - MFA Device Deleted -
-
- User [awly] deleted U2F device [usb-c] - - 2021-03-03T22:58:44.737Z - - -
+ + + + + SAML Connector Updated + + + User [unimplemented] updated SAML connector [new_saml_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - - - MFA Device Added -
-
- User [awly] added U2F device [usb-c] - - 2021-03-03T22:58:34.737Z - - -
+ + + + + SAML Connector Deleted + + + User [unimplemented] deleted SAML connector [new_saml_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - Kubernetes Request -
-
- User [alex] received a [200] from a [GET /api/v1/namespaces/teletest/pods/test-pod] request to kubernetes cluster [gke_teleport-a] - - 2020-11-12T20:35:44.978Z - - -
+ + + + + SAML Connector Created + + + User [unimplemented] created SAML connector [new_saml_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - - - App Session Data -
-
- New session data chunk created for application [aws-console] accessed by user [alice] - - 2020-10-30T17:28:15.705Z - - -
+ + + + + OIDC Auth Connector Updated + + + User [unimplemented] updated OIDC connector [new_oidc_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - - - App Session Started -
-
- User [STeve] has connected to AWS console [aws-console] - - 2020-10-30T17:28:15.381Z - - -
+ + + + + OIDC Auth Connector Deleted + + + User [unimplemented] deleted OIDC connector [new_oidc_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - Command Execution -
-
- User [alex] executed a command on kubernetes cluster [clusterOne] - - 2020-10-30T17:28:14.705Z - - -
+ + + + + OIDC Auth Connector Created + + + User [unimplemented] created OIDC connector [new_oidc_connector] + + 2020-06-05T19:29:14Z + +
+
+ - - - - - - - - App Session Data -
-
- New session data chunk created for application [test] accessed by user [alice] - - 2020-10-30T17:28:14.705Z - - -
+ + + + + GITHUB Auth Connector Updated + + + User [unimplemented] updated GitHub connector [new_github_connector] + + 2020-06-05T19:28:28Z + +
+
+ - - - - - - - - App Session Started -
-
- User [kimlisa] has connected to application [test] - - 2020-10-30T17:28:14.381Z - - -
+ + + + + GITHUB Auth Connector Deleted + + + User [unimplemented] deleted GitHub connector [new_github_connector] + + 2020-06-05T19:28:28Z + + +
+
-
- - - - - - - - SAML Connector Updated -
-
- User [unimplemented] updated SAML connector [new_saml_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + GITHUB Auth Connector Created + + + User [unimplemented] created GitHub connector [new_github_connector] + + 2020-06-05T19:28:00Z + +
+
+ - - - - - - - - SAML Connector Deleted -
-
- User [unimplemented] deleted SAML connector [new_saml_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + User Password Updated + + + User [Ivan_Jordan] has changed a password + + 2020-06-05T19:26:53Z + +
+
+ - - - - - - - - SAML Connector Created -
-
- User [unimplemented] created SAML connector [new_saml_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + Access Request Deleted + + + Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been deleted + + 2020-06-05T19:26:53Z + +
+
+ - - - - - - - - OIDC Auth Connector Updated -
-
- User [unimplemented] updated OIDC connector [new_oidc_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + Access Request Updated + + + Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been updated to APPROVED + + 2020-06-05T19:26:53Z + +
+
+ - - - - - - - - OIDC Auth Connector Deleted -
-
- User [unimplemented] deleted OIDC connector [new_oidc_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + Access Request Created + + + Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been created and is PENDING + + 2020-06-05T19:26:53Z + +
+
+ - - - - - - - - OIDC Auth Connector Created -
-
- User [unimplemented] created OIDC connector [new_oidc_connector] - - 2020-06-05T19:29:14Z - - -
+ + + + + Reset Password Token Created + + + User [b331fb6c-85f9-4cb0-b308-3452420bf81e.one] created a password reset token for user [hello] + + 2020-06-05T16:24:22Z + +
+
+ - - - - - - - - GITHUB Auth Connector Updated -
-
- User [unimplemented] updated GitHub connector [new_github_connector] - - 2020-06-05T19:28:28Z - - -
+ + + + + User Created + + + User [hello] has been created + + 2020-06-05T16:24:05Z + +
+
+ - - - - - - - - GITHUB Auth Connector Deleted -
-
- User [unimplemented] deleted GitHub connector [new_github_connector] - - 2020-06-05T19:28:28Z - - -
+ + + + + User Updated + + + User [bob] has been updated + + 2020-06-05T16:24:05Z + +
+
+ - - - - - - - - GITHUB Auth Connector Created -
-
- User [unimplemented] created GitHub connector [new_github_connector] - - 2020-06-05T19:28:00Z - - -
+ + + + + User Deleted + + + User [bob] has been deleted + + 2020-06-05T16:24:05Z + +
+
+ - - - - - - - - User Password Updated -
-
- User [Ivan_Jordan] has changed a password - - 2020-06-05T19:26:53Z - - -
+ + + Session Data + + + Usage report has been updated for session [5fc8bf85-a73e-11ea-afd1-0242ac0a0101] + + 2020-06-05T15:14:51Z + +
+
+ - - - - - - - - Access Request Deleted -
-
- Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been deleted - - 2020-06-05T19:26:53Z - - -
+ + + Session Data + + + Usage report has been updated for session [5fc8bf85-a73e-11ea-afd1-0242ac0a0101] + + 2020-06-05T15:14:51Z + +
+
+ - - - - - - - - Access Request Updated -
-
- Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been updated to APPROVED - - 2020-06-05T19:26:53Z - - -
+ + + Session Command + + + Program [ping] has been executed within a session [44c6cea8-362f-11ea-83aa-125400432324] + + 2020-01-13T18:05:53.919Z + +
+
+ - - - - - - - - Access Request Created -
-
- Access request [66b827b2-1b0b-512b-965d-6c789388d3c9] has been created and is PENDING - - 2020-06-05T19:26:53Z - - -
+ + + + SFTP Symlink Failed + + + User [root] failed to create symbolic link [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - - Reset Password Token Created -
-
- User [b331fb6c-85f9-4cb0-b308-3452420bf81e.one] created a password reset token for user [hello] - - 2020-06-05T16:24:22Z - - -
+ + + + SFTP Symlink + + + User [root] created symbolic link [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + + - User [hello] has been created - - 2020-06-05T16:24:05Z - - -
+
+
-
- - - - - - - - User Updated -
-
- User [bob] has been updated - - 2020-06-05T16:24:05Z - - -
+ + + + SFTP Readlink Failed + + + User [root] failed to read symbolic link [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - - User Deleted -
-
- User [bob] has been deleted - - 2020-06-05T16:24:05Z - - -
+ + + + SFTP Readlink + + + User [root] read symbolic link [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - Session Data -
-
- Usage report has been updated for session [5fc8bf85-a73e-11ea-afd1-0242ac0a0101] - - 2020-06-05T15:14:51Z - - -
+ + + + SFTP Rename Failed + + + User [root] failed to rename file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - Session Data -
-
- Usage report has been updated for session [5fc8bf85-a73e-11ea-afd1-0242ac0a0101] - - 2020-06-05T15:14:51Z - - -
+ + + + SFTP Rename + + + User [root] renamed file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - Session Command -
-
- Program [ping] has been executed within a session [44c6cea8-362f-11ea-83aa-125400432324] - - 2020-01-13T18:05:53.919Z - - -
+ + + + SFTP Stat Failed + + + User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Symlink Failed -
-
- User [root] failed to create symbolic link [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Stat + + + User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Symlink -
-
- User [root] created symbolic link [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Realpath Failed + + + User [root] failed to query absolute path of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + + +
+
-
- - - - - - - SFTP Readlink Failed -
-
- User [root] failed to read symbolic link [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Realpath + + + User [root] queried absolute path of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + + - User [root] read symbolic link [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Rename Failed -
-
- User [root] failed to rename file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Rmdir Failed + + + User [root] failed to remove directory [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + + - User [root] renamed file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Stat Failed -
-
- User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Rmdir + + + User [root] removed directory [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Stat -
-
- User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Mkdir Failed + + + User [root] failed to create directory [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Realpath Failed -
-
- User [root] failed to query absolute path of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Mkdir + + + User [root] created directory [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Realpath -
-
- User [root] queried absolute path of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Remove Failed + + + User [root] failed to remove file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Rmdir Failed -
-
- User [root] failed to remove directory [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Remove + + + User [root] removed file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + + - User [root] removed directory [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Mkdir Failed -
-
- User [root] failed to create directory [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Readdir Failed + + + User [root] failed to read directory [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Mkdir -
-
- User [root] created directory [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Readdir + + + User [root] read directory [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Remove Failed -
-
- User [root] failed to remove file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Opendir Failed + + + User [root] failed to open directory [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Remove -
-
- User [root] removed file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Opendir + + + User [root] opened directory [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Readdir Failed -
-
- User [root] failed to read directory [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Fsetstat Failed + + + User [root] failed to change attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Readdir -
-
- User [root] read directory [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Fsetstat + + + User [root] changed attributes of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Opendir Failed -
-
- User [root] failed to open directory [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Setstat Failed + + + User [root] failed to change attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + + +
+
-
- - - - - - - SFTP Opendir -
-
- User [root] opened directory [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Setstat + + + User [root] changed attributes of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + + - User [root] failed to change attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Fsetstat -
-
- User [root] changed attributes of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Fstat Failed + + + User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + + - User [root] failed to change attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Setstat -
-
- User [root] changed attributes of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Fstat + + + User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Fstat Failed -
-
- User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Lstat Failed + + + User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Fstat -
-
- User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Lstat + + + User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Lstat Failed -
-
- User [root] failed to query attributes of file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Write Failed + + + User [root] failed to write to file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Lstat -
-
- User [root] queried attributes of file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Write + + + User [root] wrote to file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + + - User [root] failed to write to file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SFTP Write -
-
- User [root] wrote to file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Read Failed + + + User [root] failed to read from file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Read Failed -
-
- User [root] failed to read from file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Read + + + User [root] read from file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Read -
-
- User [root] read from file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Close Failed + + + User [root] failed to close file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Close Failed -
-
- User [root] failed to close file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Close + + + User [root] closed file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Close -
-
- User [root] closed file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Open Failed + + + User [root] failed to open file [/tmp/file] on node [im-a-server-hostname]: [EOF] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Open Failed -
-
- User [root] failed to open file [/tmp/file] on node [im-a-server-hostname]: [EOF] - - 2019-04-22T19:41:23Z - - -
+ + + + SFTP Open + + + User [root] opened file [/tmp/file] on node [im-a-server-hostname] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SFTP Open -
-
- User [root] opened file [/tmp/file] on node [im-a-server-hostname] - - 2019-04-22T19:41:23Z - - -
+ + + + SCP Upload + + + User [root] uploaded a file to [~/] on node [192.168.0.105:3022] + + 2019-04-22T19:41:23Z + + - User [root] uploaded a file to [~/] on node [192.168.0.105:3022] - - 2019-04-22T19:41:23Z - - -
+
+
-
- - - - - - - SCP Download Failed -
-
- File download from node [192.168.0.105:3022] failed [exit status 1] - - 2019-04-22T19:41:23Z - - -
+ + + + SCP Download Failed + + + File download from node [192.168.0.105:3022] failed [exit status 1] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - - SCP Download -
-
- User [admin@example.com] downloaded a file [~/fsdfsdfsdfsdfs] from node [172.31.28.130:3022] - - 2019-04-22T19:41:23Z - - -
+ + + + SCP Download + + + User [admin@example.com] downloaded a file [~/fsdfsdfsdfsdfs] from node [172.31.28.130:3022] + + 2019-04-22T19:41:23Z + +
+
+ - - - - - - User Joined -
-
- User [admin@example.com] has joined the session [56408539-6536-11e9-80a1-427cfde50f5a] - - 2019-04-22T19:39:52.434Z - - -
+ + + User Joined + + + User [admin@example.com] has joined the session [56408539-6536-11e9-80a1-427cfde50f5a] + + 2019-04-22T19:39:52.434Z + +
+
+ - - - - - - Terminal Resize -
-
- User [admin@example.com] resized the session [56408539-6536-11e9-80a1-427cfde50f5a] terminal - - 2019-04-22T19:39:52.432Z - - -
+ + + Terminal Resize + + + User [admin@example.com] resized the session [56408539-6536-11e9-80a1-427cfde50f5a] terminal + + 2019-04-22T19:39:52.432Z + +
+
+ - - - - - - Session Started -
-
- User [admin@example.com] has started a session [56408539-6536-11e9-80a1-427cfde50f5a] - - 2019-04-22T19:39:26.676Z - - -
+ + + Session Started + + + User [admin@example.com] has started a session [56408539-6536-11e9-80a1-427cfde50f5a] + + 2019-04-22T19:39:26.676Z + +
+
+ - - - - - - Session File Access -
-
- Program [bash] accessed a file [/etc/profile.d/] within a session [44c6cea8-362f-11ea-83aa-125400432324] - - 2019-04-22T19:39:26.676Z - - -
+ + + Session File Access + + + Program [bash] accessed a file [/etc/profile.d/] within a session [44c6cea8-362f-11ea-83aa-125400432324] + + 2019-04-22T19:39:26.676Z + +
+
+ - - - - - - Session Network Connection -
-
- [DENY] Program [bash] was prevented from opening a connection [10.217.136.161 <-> 190.58.129.4:3000] within a session [44c6cea8-362f-11ea-83aa-125400432324] - - 2019-04-22T19:39:26.676Z - - -
+ + + Session Network Connection + + + [DENY] Program [bash] was prevented from opening a connection [10.217.136.161 <-> 190.58.129.4:3000] within a session [44c6cea8-362f-11ea-83aa-125400432324] + + 2019-04-22T19:39:26.676Z + +
+
+ - - - - - - - - Local Login Failed -
-
- Local user [fsdfsdf] login failed [user(name="fsdfsdf") not found] - - 2019-04-22T18:06:32Z - - -
+ + + + + Local Login Failed + + + Local user [fsdfsdf] login failed [user(name="fsdfsdf") not found] + + 2019-04-22T18:06:32Z + +
+
+ - - - - - - - - Auth Attempt Failed -
-
- User [admin@example.com] failed auth attempt: ssh: principal "fsdfdsf" not in the set of valid principals for given certificate: ["root"] - - 2019-04-22T02:09:06Z - - -
+ + + + + Auth Attempt Failed + + + User [admin@example.com] failed auth attempt: ssh: principal "fsdfdsf" not in the set of valid principals for given certificate: ["root"] + + 2019-04-22T02:09:06Z + +
+
+ - - - - - - - - Headless Login Rejected -
-
- User [admin@example.com] rejected headless login request - - 2019-04-22T00:49:03Z - - -
+ + + + + Headless Login Rejected + + + User [admin@example.com] rejected headless login request + + 2019-04-22T00:49:03Z + +
+
+ - - - - - - - - Headless Login Failed -
-
- User [admin@example.com] tried to approve headless login request, but got an error [user(name="fsdfsdf") not found] - - 2019-04-22T00:49:03Z - - -
+ + + + + Headless Login Failed + + + User [admin@example.com] tried to approve headless login request, but got an error [user(name="fsdfsdf") not found] + + 2019-04-22T00:49:03Z + +
+
+ - - - - - - - - Headless Login Approved -
-
- User [admin@example.com] successfully approved headless login request - - 2019-04-22T00:49:03Z - - -
+ + + + + Headless Login Approved + + + User [admin@example.com] successfully approved headless login request + + 2019-04-22T00:49:03Z + +
+
+ - - - - - - - - Headless Login Requested -
-
- Headless login was requested for user [admin@example.com] - - 2019-04-22T00:49:03Z - - -
+ + + + + Headless Login Requested + + + Headless login was requested for user [admin@example.com] + + 2019-04-22T00:49:03Z + +
+
+ - - - - - - - - Local Login -
-
- Local user [admin@example.com] successfully logged in - - 2019-04-22T00:49:03Z - - -
- + + + + + + Local Login + + +
+ Local user [admin@example.com] successfully logged in + + 2019-04-22T00:49:03Z + + +
`; @@ -12695,27 +12688,13 @@ exports[`loaded audit log screen 1`] = ` margin-bottom: 24px; } -.c8 { - box-sizing: border-box; - margin-left: auto; - width: 210px; -} - -.c17 { - box-sizing: border-box; - width: 100%; -} - -.c19 { - box-sizing: border-box; - margin-right: 8px; -} - -.c21 { +.c8 { box-sizing: border-box; + margin-left: auto; + width: 210px; } -.c29 { +.c20 { line-height: 1.5; margin: 0; display: inline-flex; @@ -12743,107 +12722,28 @@ exports[`loaded audit log screen 1`] = ` width: 87px; } -.c29:hover, -.c29:focus { +.c20:hover, +.c20:focus { background: rgba(255,255,255,0.07); } -.c29:active { +.c20:active { background: rgba(255,255,255,0.13); } -.c29:disabled { +.c20:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c22 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; - margin-right: 0px; -} - -.c22:disabled { - color: rgba(255,255,255,0.36); -} - -.c22:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c22:hover:enabled, -.c22:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c22:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c25 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; -} - -.c25:disabled { - color: rgba(255,255,255,0.36); -} - -.c25:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c25:hover:enabled, -.c25:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c25:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c24 { +.c17 { display: inline-flex; align-items: center; justify-content: center; } -.c28 { +.c19 { display: inline-flex; align-items: center; justify-content: center; @@ -12861,17 +12761,6 @@ exports[`loaded audit log screen 1`] = ` margin-right: 56px; } -.c20 { - overflow: hidden; - text-overflow: ellipsis; - font-weight: 400; - font-size: 12px; - line-height: 16px; - margin: 0px; - margin-right: 4px; - color: #FFFFFF; -} - .c1 { display: flex; } @@ -12881,11 +12770,6 @@ exports[`loaded audit log screen 1`] = ` align-items: center; } -.c18 { - display: flex; - justify-content: flex-end; -} - .c9 .react-select-container { box-sizing: border-box; display: block; @@ -13071,173 +12955,165 @@ exports[`loaded audit log screen 1`] = ` padding-bottom: 24px; } -.c26 { - background: #222C59; +.c16 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c26 > thead > tr > th, -.c26 > tbody > tr > th, -.c26 > tfoot > tr > th, -.c26 > thead > tr > td, -.c26 > tbody > tr > td, -.c26 > tfoot > tr > td { +.c16 > thead > tr > th, +.c16 > tbody > tr > th, +.c16 > tfoot > tr > th, +.c16 > thead > tr > td, +.c16 > tbody > tr > td, +.c16 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c26 > thead > tr > th:first-child, -.c26 > tbody > tr > th:first-child, -.c26 > tfoot > tr > th:first-child, -.c26 > thead > tr > td:first-child, -.c26 > tbody > tr > td:first-child, -.c26 > tfoot > tr > td:first-child { +.c16 > thead > tr > th:first-child, +.c16 > tbody > tr > th:first-child, +.c16 > tfoot > tr > th:first-child, +.c16 > thead > tr > td:first-child, +.c16 > tbody > tr > td:first-child, +.c16 > tfoot > tr > td:first-child { padding-left: 24px; } -.c26 > thead > tr > th:last-child, -.c26 > tbody > tr > th:last-child, -.c26 > tfoot > tr > th:last-child, -.c26 > thead > tr > td:last-child, -.c26 > tbody > tr > td:last-child, -.c26 > tfoot > tr > td:last-child { +.c16 > thead > tr > th:last-child, +.c16 > tbody > tr > th:last-child, +.c16 > tfoot > tr > th:last-child, +.c16 > thead > tr > td:last-child, +.c16 > tbody > tr > td:last-child, +.c16 > tfoot > tr > td:last-child { padding-right: 24px; } -.c26 > tbody > tr > td { +.c16 > tbody > tr > td { vertical-align: middle; } -.c26 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c16 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c26 > thead > tr > th svg { +.c16 > thead > tr > th svg { height: 12px; } -.c26 > tbody > tr > td { +.c16 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; -} - -.c26 tbody tr { - border-bottom: 1px solid rgb(49,58,100); + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c26 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c16 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c11 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; +.c16 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c10 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; +.c16 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c23 svg { - font-size: 20px; +.c16 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); } -.c23 svg:before { - padding-left: 1px; +.c10 { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c16 { +.c15 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c15 { +.c14 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c13 { +.c12 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c12 { +.c11 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c14 { +.c13 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c14:hover, -.c14:focus, -.c14:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c14::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c27 { +.c18 { display: flex; align-items: center; min-width: 130px; @@ -13320,599 +13196,516 @@ exports[`loaded audit log screen 1`] = `
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Type + + + + + + + + + Description + + + Created (UTC) + + + + + + + +
+
+ + + + + + + + User Deleted +
+
+ User [bob] has been deleted + + 2020-06-05T16:24:05Z + + +
+ + + + + + + + User Updated +
+
+ User [bob] has been updated + + 2020-06-05T16:24:05Z + +
- + Session Network Connection + + + [ALLOW] Program [bash] successfully opened a connection [10.217.136.161 <-> 190.58.129.4:3000] within a session [44c6cea8-362f-11ea-83aa-125400432324] + + 2019-04-22T19:39:26.676Z + +
+
+ Session File Access +
+
+ Program [bash] accessed a file [/etc/profile.d/] within a session [44c6cea8-362f-11ea-83aa-125400432324] + + 2019-04-22T19:39:26.676Z + + - - - - - - - - - - - - - - + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - - + + + - - - - - -
- - Type - - - - - - - - - Description - - - Created (UTC) - - - - - - - -
+
+
-
- - - - - - - - User Deleted -
-
- User [bob] has been deleted - - 2020-06-05T16:24:05Z - - -
+ + + + + Unknown Event + + + Unknown 'unimplemented.event' event (abc123) + + 2019-04-22T19:39:26.676Z + + - User [bob] has been updated - - 2020-06-05T16:24:05Z - - -
+
+
-
- - - - - - Session Network Connection -
-
- [ALLOW] Program [bash] successfully opened a connection [10.217.136.161 <-> 190.58.129.4:3000] within a session [44c6cea8-362f-11ea-83aa-125400432324] - - 2019-04-22T19:39:26.676Z - - -
+ + + + + User Role Created + + + User [system] created a role [editor] + + 2023-10-26T16:08:43.426Z + + - Program [bash] accessed a file [/etc/profile.d/] within a session [44c6cea8-362f-11ea-83aa-125400432324] - - 2019-04-22T19:39:26.676Z - - -
+
+
-
- - - - - - - - Unknown Event -
-
- Unknown 'unimplemented.event' event (abc123) - - 2019-04-22T19:39:26.676Z - - -
+ + + + + User Role Updated + + + User [larry] updated a role [editor] + + 2023-10-26T22:09:23.29Z + + - User [system] created a role [editor] - - 2023-10-26T16:08:43.426Z - - -
+
+
-
- - - - - - - - User Role Updated -
-
- User [larry] updated a role [editor] - - 2023-10-26T22:09:23.29Z - - -
+ + + + + User Role Deleted + + + User [moe] deleted a role [editor] + + 2023-10-26T22:10:50.076Z + + - User [moe] deleted a role [editor] - - 2023-10-26T22:10:50.076Z - - -
- + Details + +
`; diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap index 81b28a299066d..920aacdc0fac1 100644 --- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap +++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`render clusters 1`] = ` -.c22 { +.c16 { display: inline-flex; align-items: center; justify-content: center; } -.c28 { +.c19 { display: inline-flex; align-items: center; justify-content: center; @@ -27,21 +27,7 @@ exports[`render clusters 1`] = ` margin-bottom: 24px; } -.c15 { - box-sizing: border-box; - width: 100%; -} - -.c17 { - box-sizing: border-box; - margin-right: 8px; -} - -.c19 { - box-sizing: border-box; -} - -.c27 { +.c18 { line-height: 1.5; margin: 0; display: inline-flex; @@ -69,100 +55,21 @@ exports[`render clusters 1`] = ` height: 24px; } -.c27:hover, -.c27:focus { +.c18:hover, +.c18:focus { background: rgba(255,255,255,0.07); } -.c27:active { +.c18:active { background: rgba(255,255,255,0.13); } -.c27:disabled { +.c18:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c20 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; - margin-right: 0px; -} - -.c20:disabled { - color: rgba(255,255,255,0.36); -} - -.c20:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c20:hover:enabled, -.c20:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c20:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c23 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; -} - -.c23:disabled { - color: rgba(255,255,255,0.36); -} - -.c23:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c23:hover:enabled, -.c23:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c23:active:enabled { - background: rgba(255,255,255,0.18); -} - .c6 { overflow: hidden; text-overflow: ellipsis; @@ -172,18 +79,7 @@ exports[`render clusters 1`] = ` margin: 0px; } -.c18 { - overflow: hidden; - text-overflow: ellipsis; - font-weight: 400; - font-size: 12px; - line-height: 16px; - margin: 0px; - margin-right: 4px; - color: #FFFFFF; -} - -.c26 { +.c17 { box-sizing: border-box; border-radius: 10px; display: inline-block; @@ -205,11 +101,6 @@ exports[`render clusters 1`] = ` align-items: center; } -.c16 { - display: flex; - justify-content: flex-end; -} - .c5 { flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.07); @@ -235,173 +126,165 @@ exports[`render clusters 1`] = ` padding-bottom: 24px; } -.c24 { - background: #222C59; +.c14 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c24 > thead > tr > th, -.c24 > tbody > tr > th, -.c24 > tfoot > tr > th, -.c24 > thead > tr > td, -.c24 > tbody > tr > td, -.c24 > tfoot > tr > td { +.c14 > thead > tr > th, +.c14 > tbody > tr > th, +.c14 > tfoot > tr > th, +.c14 > thead > tr > td, +.c14 > tbody > tr > td, +.c14 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c24 > thead > tr > th:first-child, -.c24 > tbody > tr > th:first-child, -.c24 > tfoot > tr > th:first-child, -.c24 > thead > tr > td:first-child, -.c24 > tbody > tr > td:first-child, -.c24 > tfoot > tr > td:first-child { +.c14 > thead > tr > th:first-child, +.c14 > tbody > tr > th:first-child, +.c14 > tfoot > tr > th:first-child, +.c14 > thead > tr > td:first-child, +.c14 > tbody > tr > td:first-child, +.c14 > tfoot > tr > td:first-child { padding-left: 24px; } -.c24 > thead > tr > th:last-child, -.c24 > tbody > tr > th:last-child, -.c24 > tfoot > tr > th:last-child, -.c24 > thead > tr > td:last-child, -.c24 > tbody > tr > td:last-child, -.c24 > tfoot > tr > td:last-child { +.c14 > thead > tr > th:last-child, +.c14 > tbody > tr > th:last-child, +.c14 > tfoot > tr > th:last-child, +.c14 > thead > tr > td:last-child, +.c14 > tbody > tr > td:last-child, +.c14 > tfoot > tr > td:last-child { padding-right: 24px; } -.c24 > tbody > tr > td { +.c14 > tbody > tr > td { vertical-align: middle; } -.c24 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c14 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c24 > thead > tr > th svg { +.c14 > thead > tr > th svg { height: 12px; } -.c24 > tbody > tr > td { +.c14 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; -} - -.c24 tbody tr { - border-bottom: 1px solid rgb(49,58,100); + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c24 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c14 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c9 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; +.c14 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c8 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; +.c14 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c21 svg { - font-size: 20px; +.c14 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); } -.c21 svg:before { - padding-left: 1px; +.c8 { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c14 { +.c13 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c13 { +.c12 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c11 { +.c10 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c10 { +.c9 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c12 { +.c11 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c12:hover, -.c12:focus, -.c12:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c12::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c25 td { +.c15 td { height: 22px; } @@ -417,1491 +300,1408 @@ exports[`render clusters 1`] = ` Manage Clusters
-
- + + + + + + + + + + + + + + + + +
+ + + Name + + + + + + + +
- Showing - - 0 - - - - - 0 - - of - - - 0 - + ROOT
- -
+
+ localhost + +
+ + nidvojik + - - - - - - - - - - - - - - - - - - + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- - - Name - - - - - - - -
-
- ROOT -
-
- localhost - - -
- - nidvojik - +
+ + lidtabih + + -
- - lidtabih - + + + +
+ + farovluv + + -
- - farovluv - + + + +
+ + rozpaari + + -
- - rozpaari - + + + +
+ + wetjolune + + -
- - wetjolune - + + + +
+ + dashawic + + -
- - dashawic - - -
- - jesushenry58 - + + + +
+ + jesushenry58 + + -
- - jordansimpson35 - + + + +
+ + jordansimpson35 + + -
- - leonamann249 - + + + +
+ + leonamann249 + + -
- - bessiecohen207 - + + + +
+ + bessiecohen207 + + -
- - philipjohnson10 - + + + +
+ + philipjohnson10 + + -
- - teresastone14 - + + + +
+ + teresastone14 + + -
- - connorsharp137 - + + + +
+ + connorsharp137 + + -
- - ricardosingleton242 - + + + +
+ + ricardosingleton242 + + -
- - rozpaari - + + + +
+ + rozpaari + + -
- - wetjolune - + + + +
+ + wetjolune + + -
- - dashawic - + + + +
+ + dashawic + + -
- - williepayne223 - + + + +
+ + williepayne223 + + -
- - samlewis176 - + + + +
+ + samlewis176 + + -
- - nellwheeler72 - + + + +
+ + nellwheeler72 + + -
- - albertowens200 - + + + +
+ + albertowens200 + + -
- - beatricecarson171 - + + + +
+ + beatricecarson171 + + -
- - besscarroll152 - + + + +
+ + besscarroll152 + + -
- - hannahsutton232 - + + + +
+ + hannahsutton232 + + -
- - barrynelson110 - + + + +
+ + barrynelson110 + + -
- - rozpaari - + + + +
+ + rozpaari + + -
- - wetjolune - + + + +
+ + wetjolune + + -
- - dashawic - + + + +
+ + dashawic + + -
- - henriettarios78 - + + + +
+ + henriettarios78 + + -
- - josephinewolfe55 - + + + +
+ + josephinewolfe55 + + -
- - jaysandoval137 - + + + +
+ + jaysandoval137 + + -
- - isabellekim81 - + + + +
+ + isabellekim81 + + -
- - francismoran134 - + + + +
+ + francismoran134 + + -
- - theodorefrazier78 - + + + +
+ + theodorefrazier78 + + -
- - hattiestanley34 - + + + +
+ + hattiestanley34 + + -
- - tommybrooks146 - + + + +
+ + tommybrooks146 + + -
- + + + + +
`; diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap index b6abe4dba86bc..e8bd88d0c734d 100644 --- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap +++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap @@ -27,28 +27,23 @@ exports[`render DocumentNodes 1`] = ` margin-bottom: 8px; } -.c9 { - box-sizing: border-box; - width: 100%; -} - -.c11 { +.c7 { box-sizing: border-box; } -.c13 { +.c14 { box-sizing: border-box; - margin-right: 16px; - width: 100%; + padding-left: 24px; + padding-right: 24px; } -.c19 { +.c24 { box-sizing: border-box; - padding-left: 24px; - padding-right: 24px; + margin-bottom: 4px; + margin-right: 8px; } -.c34 { +.c31 { line-height: 1.5; margin: 0; display: inline-flex; @@ -76,107 +71,28 @@ exports[`render DocumentNodes 1`] = ` height: 24px; } -.c34:hover, -.c34:focus { +.c31:hover, +.c31:focus { background: rgba(255,255,255,0.07); } -.c34:active { +.c31:active { background: rgba(255,255,255,0.13); } -.c34:disabled { +.c31:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c38 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; - margin-right: 0px; -} - -.c38:disabled { - color: rgba(255,255,255,0.36); -} - -.c38:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c38:hover:enabled, -.c38:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c38:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c40 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; -} - -.c40:disabled { - color: rgba(255,255,255,0.36); -} - -.c40:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c40:hover:enabled, -.c40:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c40:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c27 { +.c22 { display: inline-flex; align-items: center; justify-content: center; } -.c35 { +.c32 { display: inline-flex; align-items: center; justify-content: center; @@ -192,7 +108,7 @@ exports[`render DocumentNodes 1`] = ` margin: 0px; } -.c25 { +.c20 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -201,7 +117,7 @@ exports[`render DocumentNodes 1`] = ` margin: 0px; } -.c29 { +.c26 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -209,10 +125,10 @@ exports[`render DocumentNodes 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } -.c32 { +.c29 { box-sizing: border-box; border-radius: 10px; display: inline-block; @@ -231,45 +147,39 @@ exports[`render DocumentNodes 1`] = ` display: flex; } -.c10 { - display: flex; - align-items: center; - justify-content: space-between; -} - -.c12 { +.c8 { display: flex; - align-items: center; + flex-direction: column; } -.c20 { +.c15 { display: flex; align-items: center; gap: 8px; } -.c31 { +.c25 { display: flex; - flex-wrap: wrap; + justify-content: flex-end; } -.c37 { +.c28 { display: flex; - justify-content: flex-end; + flex-wrap: wrap; } -.c21 { +.c16 { position: relative; display: flex; align-items: center; cursor: pointer; } -.c21[disabled] { +.c16[disabled] { cursor: default; } -.c24 { +.c19 { width: 32px; height: 16px; border-radius: 10px; @@ -279,15 +189,15 @@ exports[`render DocumentNodes 1`] = ` transition: background 0.15s ease-in-out; } -.c24:hover { +.c19:hover { background: rgba(255,255,255,0.13); } -.c24:active { +.c19:active { background: rgba(255,255,255,0.18); } -.c24:before { +.c19:before { content: ''; position: absolute; top: 50%; @@ -300,60 +210,59 @@ exports[`render DocumentNodes 1`] = ` transition: transform 0.05s ease-in; } -.c22 { +.c17 { opacity: 0; position: absolute; cursor: inherit; z-index: -1; } -.c22:checked + .c23:before { +.c17:checked + .c18:before { transform: translate(18px,-50%); } -.c22:enabled:checked + .c23 { +.c17:enabled:checked + .c18 { background: #00BFA6; } -.c22:enabled:checked + .c23:hover { +.c17:enabled:checked + .c18:hover { background: #33CCB8; } -.c22:enabled:checked + .c23:active { +.c17:enabled:checked + .c18:active { background: #66D9CA; } -.c22:disabled + .c23 { +.c17:disabled + .c18 { background: rgba(255,255,255,0.07); } -.c22:disabled + .c23:before { +.c17:disabled + .c18:before { opacity: 0.36; box-shadow: none; } -.c22:disabled:checked + .c23 { +.c17:disabled:checked + .c18 { background: rgba(0,191,166,0.25); } -.c28 { +.c23 { height: 18px; width: 18px; color: inherit; } -.c26 { +.c21 { vertical-align: middle; display: inline-block; height: 18px; } -.c26:hover { +.c21:hover { cursor: pointer; } -.c30 { - background: #222C59; +.c27 { border-collapse: collapse; border-spacing: 0; border-style: hidden; @@ -361,178 +270,148 @@ exports[`render DocumentNodes 1`] = ` width: 100%; } -.c30 > thead > tr > th, -.c30 > tbody > tr > th, -.c30 > tfoot > tr > th, -.c30 > thead > tr > td, -.c30 > tbody > tr > td, -.c30 > tfoot > tr > td { +.c27 > thead > tr > th, +.c27 > tbody > tr > th, +.c27 > tfoot > tr > th, +.c27 > thead > tr > td, +.c27 > tbody > tr > td, +.c27 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c30 > thead > tr > th:first-child, -.c30 > tbody > tr > th:first-child, -.c30 > tfoot > tr > th:first-child, -.c30 > thead > tr > td:first-child, -.c30 > tbody > tr > td:first-child, -.c30 > tfoot > tr > td:first-child { +.c27 > thead > tr > th:first-child, +.c27 > tbody > tr > th:first-child, +.c27 > tfoot > tr > th:first-child, +.c27 > thead > tr > td:first-child, +.c27 > tbody > tr > td:first-child, +.c27 > tfoot > tr > td:first-child { padding-left: 24px; } -.c30 > thead > tr > th:last-child, -.c30 > tbody > tr > th:last-child, -.c30 > tfoot > tr > th:last-child, -.c30 > thead > tr > td:last-child, -.c30 > tbody > tr > td:last-child, -.c30 > tfoot > tr > td:last-child { +.c27 > thead > tr > th:last-child, +.c27 > tbody > tr > th:last-child, +.c27 > tfoot > tr > th:last-child, +.c27 > thead > tr > td:last-child, +.c27 > tbody > tr > td:last-child, +.c27 > tfoot > tr > td:last-child { padding-right: 24px; } -.c30 > tbody > tr > td { +.c27 > tbody > tr > td { vertical-align: middle; } -.c30 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c27 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c30 > thead > tr > th svg { +.c27 > thead > tr > th svg { height: 12px; } -.c30 > tbody > tr > td { +.c27 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; -} - -.c30 tbody tr { - border-bottom: 1px solid rgb(49,58,100); + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c30 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c27 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); } -.c8 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; - border-top-left-radius: 8px; - border-top-right-radius: 8px; +.c27 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c36 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; - border-top: 1px solid rgba(255,255,255,0.07); +.c27 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c7 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; +.c27 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); } -.c33 { +.c30 { cursor: pointer; } -.c33:hover { +.c30:hover { background-color: rgba(255,255,255,0.13); } -.c39 svg { - font-size: 20px; -} - -.c39 svg:before { - padding-left: 1px; -} - -.c18 { +.c13 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c17 { +.c12 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c15 { +.c10 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c14 { +.c9 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c16 { +.c11 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c16:hover, -.c16:focus, -.c16:active { color: #FFFFFF; background: rgba(255,255,255,0.07); -} - -.c16::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; + padding-right: 184px; + padding-left: 24px; } .c4 { @@ -571,531 +450,452 @@ exports[`render DocumentNodes 1`] = ` Clusters:
-
-
+
-
+ +
+ Advanced +
+ + -
-
-
-
-
+ + + + + +
-
-
- Showing - - 1 - - - - - 5 - - of - - - 5 - -
-
- - +
-
- - + + + + + + + + +
- + Showing + + 1 + + - + + 5 + + of + + + 5 + + + + + + + + - - + + + + + + + + + - - - - - - - - - - - - - + - - - - - + + + + + - - - - - + - + + + + + - + - - - - - + + + + + - - - -
+ + Hostname + - Hostname - - - - - - - - Address - + + + + + Address + + Labels + +
+ fujedu + + 172.10.1.20:3022 + +
- Labels - -
-
- fujedu - - 172.10.1.20:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- facuzguv - - 172.10.1.42:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ kernel: 4.15.0-51-generic
-
+ + -
- duzsevkig - + Connect - ← tunnel + + + - + +
+ facuzguv + + 172.10.1.42:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- kuhinur - + kernel: 4.15.0-51-generic + + + + + +
+ duzsevkig + + + ← tunnel + + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one +
+
+ kernel: 4.15.0-51-generic
-
+ + -
- zebpecda - - 172.10.1.24:3022 - + + + + +
+ kuhinur + + + ← tunnel + + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
-
- lortavma: one -
-
- lenisret: 4.15.0-51-generic -
-
- lofdevod: one -
-
- llhurlaz: 4.15.0-51-generic -
+ cluster: one
-
- -
-
+
+ zebpecda + + 172.10.1.24:3022 + +
+
+ cluster: one +
+
+ kernel: 4.15.0-51-generic +
+
+ lortavma: one +
+
+ lenisret: 4.15.0-51-generic +
+
+ lofdevod: one +
+
+ llhurlaz: 4.15.0-51-generic +
+
+
- - - - +
diff --git a/web/packages/teleport/src/LocksV2/NewLock/ResourceList/ServerSideSupportedList/ServerSideSupportedList.tsx b/web/packages/teleport/src/LocksV2/NewLock/ResourceList/ServerSideSupportedList/ServerSideSupportedList.tsx index 323504373a993..48c335b3d63e0 100644 --- a/web/packages/teleport/src/LocksV2/NewLock/ResourceList/ServerSideSupportedList/ServerSideSupportedList.tsx +++ b/web/packages/teleport/src/LocksV2/NewLock/ResourceList/ServerSideSupportedList/ServerSideSupportedList.tsx @@ -131,7 +131,6 @@ export function ServerSideSupportedList(props: CommonListProps) { css={` border-radius: 8px; overflow: hidden; - box-shadow: ${props => props.theme.boxShadow[0]}; `} > thead > tr > th, -.c31 > tbody > tr > th, -.c31 > tfoot > tr > th, -.c31 > thead > tr > td, -.c31 > tbody > tr > td, -.c31 > tfoot > tr > td { +.c29 > thead > tr > th, +.c29 > tbody > tr > th, +.c29 > tfoot > tr > th, +.c29 > thead > tr > td, +.c29 > tbody > tr > td, +.c29 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c31 > thead > tr > th:first-child, -.c31 > tbody > tr > th:first-child, -.c31 > tfoot > tr > th:first-child, -.c31 > thead > tr > td:first-child, -.c31 > tbody > tr > td:first-child, -.c31 > tfoot > tr > td:first-child { +.c29 > thead > tr > th:first-child, +.c29 > tbody > tr > th:first-child, +.c29 > tfoot > tr > th:first-child, +.c29 > thead > tr > td:first-child, +.c29 > tbody > tr > td:first-child, +.c29 > tfoot > tr > td:first-child { padding-left: 24px; } -.c31 > thead > tr > th:last-child, -.c31 > tbody > tr > th:last-child, -.c31 > tfoot > tr > th:last-child, -.c31 > thead > tr > td:last-child, -.c31 > tbody > tr > td:last-child, -.c31 > tfoot > tr > td:last-child { +.c29 > thead > tr > th:last-child, +.c29 > tbody > tr > th:last-child, +.c29 > tfoot > tr > th:last-child, +.c29 > thead > tr > td:last-child, +.c29 > tbody > tr > td:last-child, +.c29 > tfoot > tr > td:last-child { padding-right: 24px; } -.c31 > tbody > tr > td { +.c29 > tbody > tr > td { vertical-align: middle; } -.c31 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c29 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c31 > thead > tr > th svg { +.c29 > thead > tr > th svg { height: 12px; } -.c31 > tbody > tr > td { +.c29 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c31 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c29 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); } -.c31 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c29 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c10 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; - border-top-left-radius: 8px; - border-top-right-radius: 8px; +.c29 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c37 { - padding: 16px 24px; +.c29 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c35 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; - border-top: 1px solid rgba(255,255,255,0.07); -} - -.c9 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c34 { +.c32 { cursor: pointer; } -.c34:hover { +.c32:hover { background-color: rgba(255,255,255,0.13); } -.c40 svg { +.c38 svg { font-size: 20px; } -.c40 svg:before { +.c38 svg:before { padding-left: 1px; } -.c19 { +.c15 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c18 { +.c14 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c16 { +.c12 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c15 { +.c11 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c17 { +.c13 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c17:hover, -.c17:focus, -.c17:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c17::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c29 { +.c25 { height: 18px; width: 18px; color: inherit; } -.c27 { +.c23 { vertical-align: middle; display: inline-block; height: 18px; } -.c27:hover { +.c23:hover { cursor: pointer; } @@ -868,613 +855,594 @@ exports[`failed 1`] = ` some error message -
-
+
-
+ +
+ Advanced +
+ + -
-
-
-
-
+ + + + + +
-
-
- Showing - - 1 - - - - - 7 - - of - - - 7 - -
-
- - +
-
- - + + + + + + + + + + + + + + +
- + Showing + + 1 + + - + + 7 + + of + + + 7 + + + + + + + + - - + + + + + + + + + - - - - - - - - - - - - - + - - - - - + + + + + - - - - - - - + - - - - - + + + + + - - - - - + - + + + + + - - - - - + - + + + + + - - - -
+ + Hostname + - Hostname - - - - - - - - Address - + + + + + Address + + Labels + +
+ fujedu + + 172.10.1.20:3022 + +
- Labels - -
-
- fujedu - - 172.10.1.20:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- facuzguv - - 172.10.1.1:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ kernel: 4.15.0-51-generic
-
+ + -
- duzsevkig - - 172.10.1.1:3022 - + + + + +
+ facuzguv + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- kuhinur - - 172.10.1.1:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ kernel: 4.15.0-51-generic
-
+ + -
- zebpecda - - 172.10.1.1:3022 - + + + + +
+ duzsevkig + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- zebpecda - + kernel: 4.15.0-51-generic + + + + + +
+ kuhinur + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- zebpecda - + kernel: 4.15.0-51-generic + + + + + +
+ zebpecda + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
-
+
+ zebpecda + + + ← tunnel + + +
+
+ cluster: one +
+
+ kernel: 4.15.0-51-generic +
+
+
+ +
+ zebpecda + + + ← tunnel + + +
+
+ cluster: one +
+
+ kernel: 4.15.0-51-generic +
+
+
- +
+ -
+
+ `; @@ -1490,25 +1458,25 @@ exports[`loaded 1`] = ` margin-bottom: 24px; } -.c11 { +.c9 { box-sizing: border-box; - width: 100%; } -.c12 { +.c16 { box-sizing: border-box; + padding-left: 24px; + padding-right: 24px; } -.c14 { +.c26 { box-sizing: border-box; - margin-right: 16px; - width: 100%; + margin-bottom: 4px; + margin-right: 8px; } -.c20 { +.c36 { box-sizing: border-box; - padding-left: 24px; - padding-right: 24px; + width: 100%; } .c8 { @@ -1554,7 +1522,7 @@ exports[`loaded 1`] = ` cursor: auto; } -.c35 { +.c33 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1582,22 +1550,22 @@ exports[`loaded 1`] = ` height: 24px; } -.c35:hover, -.c35:focus { +.c33:hover, +.c33:focus { background: rgba(255,255,255,0.07); } -.c35:active { +.c33:active { background: rgba(255,255,255,0.13); } -.c35:disabled { +.c33:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c39 { +.c37 { align-items: center; border: none; cursor: pointer; @@ -1619,25 +1587,25 @@ exports[`loaded 1`] = ` margin-right: 0px; } -.c39:disabled { +.c37:disabled { color: rgba(255,255,255,0.36); } -.c39:disabled { +.c37:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c39:hover:enabled, -.c39:focus:enabled { +.c37:hover:enabled, +.c37:focus:enabled { background: rgba(255,255,255,0.13); } -.c39:active:enabled { +.c37:active:enabled { background: rgba(255,255,255,0.18); } -.c41 { +.c39 { align-items: center; border: none; cursor: pointer; @@ -1658,31 +1626,31 @@ exports[`loaded 1`] = ` margin-left: 0px; } -.c41:disabled { +.c39:disabled { color: rgba(255,255,255,0.36); } -.c41:disabled { +.c39:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c41:hover:enabled, -.c41:focus:enabled { +.c39:hover:enabled, +.c39:focus:enabled { background: rgba(255,255,255,0.13); } -.c41:active:enabled { +.c39:active:enabled { background: rgba(255,255,255,0.18); } -.c28 { +.c24 { display: inline-flex; align-items: center; justify-content: center; } -.c36 { +.c34 { display: inline-flex; align-items: center; justify-content: center; @@ -1700,7 +1668,7 @@ exports[`loaded 1`] = ` margin: 0px; } -.c26 { +.c22 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -1709,7 +1677,7 @@ exports[`loaded 1`] = ` margin: 0px; } -.c30 { +.c28 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -1717,10 +1685,10 @@ exports[`loaded 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } -.c33 { +.c31 { box-sizing: border-box; border-radius: 10px; display: inline-block; @@ -1745,39 +1713,39 @@ exports[`loaded 1`] = ` justify-content: space-between; } -.c13 { +.c10 { display: flex; - align-items: center; + flex-direction: column; } -.c21 { +.c17 { display: flex; align-items: center; gap: 8px; } -.c32 { +.c27 { display: flex; - flex-wrap: wrap; + justify-content: flex-end; } -.c38 { +.c30 { display: flex; - justify-content: flex-end; + flex-wrap: wrap; } -.c22 { +.c18 { position: relative; display: flex; align-items: center; cursor: pointer; } -.c22[disabled] { +.c18[disabled] { cursor: default; } -.c25 { +.c21 { width: 32px; height: 16px; border-radius: 10px; @@ -1787,15 +1755,15 @@ exports[`loaded 1`] = ` transition: background 0.15s ease-in-out; } -.c25:hover { +.c21:hover { background: rgba(255,255,255,0.13); } -.c25:active { +.c21:active { background: rgba(255,255,255,0.18); } -.c25:before { +.c21:before { content: ''; position: absolute; top: 50%; @@ -1808,39 +1776,39 @@ exports[`loaded 1`] = ` transition: transform 0.05s ease-in; } -.c23 { +.c19 { opacity: 0; position: absolute; cursor: inherit; z-index: -1; } -.c23:checked + .c24:before { +.c19:checked + .c20:before { transform: translate(18px,-50%); } -.c23:enabled:checked + .c24 { +.c19:enabled:checked + .c20 { background: #00BFA6; } -.c23:enabled:checked + .c24:hover { +.c19:enabled:checked + .c20:hover { background: #33CCB8; } -.c23:enabled:checked + .c24:active { +.c19:enabled:checked + .c20:active { background: #66D9CA; } -.c23:disabled + .c24 { +.c19:disabled + .c20 { background: rgba(255,255,255,0.07); } -.c23:disabled + .c24:before { +.c19:disabled + .c20:before { opacity: 0.36; box-shadow: none; } -.c23:disabled:checked + .c24 { +.c19:disabled:checked + .c20 { background: rgba(0,191,166,0.25); } @@ -1869,8 +1837,7 @@ exports[`loaded 1`] = ` padding-bottom: 24px; } -.c31 { - background: #222C59; +.c29 { border-collapse: collapse; border-spacing: 0; border-style: hidden; @@ -1878,193 +1845,181 @@ exports[`loaded 1`] = ` width: 100%; } -.c31 > thead > tr > th, -.c31 > tbody > tr > th, -.c31 > tfoot > tr > th, -.c31 > thead > tr > td, -.c31 > tbody > tr > td, -.c31 > tfoot > tr > td { +.c29 > thead > tr > th, +.c29 > tbody > tr > th, +.c29 > tfoot > tr > th, +.c29 > thead > tr > td, +.c29 > tbody > tr > td, +.c29 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c31 > thead > tr > th:first-child, -.c31 > tbody > tr > th:first-child, -.c31 > tfoot > tr > th:first-child, -.c31 > thead > tr > td:first-child, -.c31 > tbody > tr > td:first-child, -.c31 > tfoot > tr > td:first-child { +.c29 > thead > tr > th:first-child, +.c29 > tbody > tr > th:first-child, +.c29 > tfoot > tr > th:first-child, +.c29 > thead > tr > td:first-child, +.c29 > tbody > tr > td:first-child, +.c29 > tfoot > tr > td:first-child { padding-left: 24px; } -.c31 > thead > tr > th:last-child, -.c31 > tbody > tr > th:last-child, -.c31 > tfoot > tr > th:last-child, -.c31 > thead > tr > td:last-child, -.c31 > tbody > tr > td:last-child, -.c31 > tfoot > tr > td:last-child { +.c29 > thead > tr > th:last-child, +.c29 > tbody > tr > th:last-child, +.c29 > tfoot > tr > th:last-child, +.c29 > thead > tr > td:last-child, +.c29 > tbody > tr > td:last-child, +.c29 > tfoot > tr > td:last-child { padding-right: 24px; } -.c31 > tbody > tr > td { +.c29 > tbody > tr > td { vertical-align: middle; } -.c31 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c29 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c31 > thead > tr > th svg { +.c29 > thead > tr > th svg { height: 12px; } -.c31 > tbody > tr > td { +.c29 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c31 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c29 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); } -.c31 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c29 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c10 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; - border-top-left-radius: 8px; - border-top-right-radius: 8px; +.c29 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c37 { - padding: 16px 24px; +.c29 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c35 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; - border-top: 1px solid rgba(255,255,255,0.07); -} - -.c9 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c34 { +.c32 { cursor: pointer; } -.c34:hover { +.c32:hover { background-color: rgba(255,255,255,0.13); } -.c40 svg { +.c38 svg { font-size: 20px; } -.c40 svg:before { +.c38 svg:before { padding-left: 1px; } -.c19 { +.c15 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c18 { +.c14 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c16 { +.c12 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c15 { +.c11 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c17 { +.c13 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c17:hover, -.c17:focus, -.c17:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c17::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c29 { +.c25 { height: 18px; width: 18px; color: inherit; } -.c27 { +.c23 { vertical-align: middle; display: inline-block; height: 18px; } -.c27:hover { +.c23:hover { cursor: pointer; } @@ -2093,613 +2048,594 @@ exports[`loaded 1`] = ` -
-
+
-
+ +
+ Advanced +
+ + -
-
-
-
-
+ + + + + +
-
-
- Showing - - 1 - - - - - 7 - - of - - - 7 - -
-
- - +
-
- - + + + + + + + + +
- + Showing + + 1 + + - + + 7 + + of + + + 7 + + + + + + + + - - + + + + + + + + + - - - - - - - - - - - - - + - - - - - + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - - - - - + - + + + + + - - - - - + - + + + + + - - - -
+ + Hostname + - Hostname - - - - - - - - Address - + + + + + Address + + Labels + +
+ fujedu + + 172.10.1.20:3022 + +
- Labels - -
-
- fujedu - - 172.10.1.20:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- facuzguv - - 172.10.1.1:3022 -
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ kernel: 4.15.0-51-generic
-
+ + -
- duzsevkig - - 172.10.1.1:3022 - + + + + +
+ facuzguv + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one +
+
+ kernel: 4.15.0-51-generic
-
+ + -
- kuhinur - - 172.10.1.1:3022 - + + + + +
+ duzsevkig + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
+ kernel: 4.15.0-51-generic + + + + -
- zebpecda - - 172.10.1.1:3022 - + + + + +
+ kuhinur + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- zebpecda - + kernel: 4.15.0-51-generic + + + + + +
+ zebpecda + + 172.10.1.1:3022 + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
- zebpecda - + kernel: 4.15.0-51-generic + + + + + +
+ zebpecda + + + ← tunnel + + +
-
- cluster: one -
-
- kernel: 4.15.0-51-generic -
+ cluster: one
-
- -
-
+
+ zebpecda + + + ← tunnel + + +
+
+ cluster: one +
+
+ kernel: 4.15.0-51-generic +
+
+
- +
+ -
+
+ `; diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap index 133ad39eb4df8..ec2e7c4394c01 100644 --- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap +++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap @@ -18,21 +18,7 @@ exports[`rendering of Session Recordings 1`] = ` width: 210px; } -.c17 { - box-sizing: border-box; - width: 100%; -} - .c19 { - box-sizing: border-box; - margin-right: 8px; -} - -.c21 { - box-sizing: border-box; -} - -.c28 { line-height: 1.5; margin: 0; display: inline-flex; @@ -59,107 +45,28 @@ exports[`rendering of Session Recordings 1`] = ` width: 80px; } -.c28:hover, -.c28:focus { +.c19:hover, +.c19:focus { background: #B29DFF; } -.c28:active { +.c19:active { background: #C5B6FF; } -.c28:disabled { +.c19:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c22 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; - margin-right: 0px; -} - -.c22:disabled { - color: rgba(255,255,255,0.36); -} - -.c22:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c22:hover:enabled, -.c22:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c22:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c25 { - align-items: center; - border: none; - cursor: pointer; - display: flex; - outline: none; - border-radius: 50%; - overflow: visible; - justify-content: center; - text-align: center; - flex: 0 0 auto; - background: transparent; - color: inherit; - transition: all 0.3s; - -webkit-font-smoothing: antialiased; - font-size: 16px; - height: 32px; - width: 32px; - margin-left: 0px; -} - -.c25:disabled { - color: rgba(255,255,255,0.36); -} - -.c25:disabled { - color: rgba(255,255,255,0.36); - cursor: default; -} - -.c25:hover:enabled, -.c25:focus:enabled { - background: rgba(255,255,255,0.13); -} - -.c25:active:enabled { - background: rgba(255,255,255,0.18); -} - -.c24 { +.c17 { display: inline-flex; align-items: center; justify-content: center; } -.c27 { +.c18 { display: inline-flex; align-items: center; justify-content: center; @@ -177,17 +84,6 @@ exports[`rendering of Session Recordings 1`] = ` margin-right: 56px; } -.c20 { - overflow: hidden; - text-overflow: ellipsis; - font-weight: 400; - font-size: 12px; - line-height: 16px; - margin: 0px; - margin-right: 4px; - color: #FFFFFF; -} - .c1 { display: flex; } @@ -197,11 +93,6 @@ exports[`rendering of Session Recordings 1`] = ` align-items: center; } -.c18 { - display: flex; - justify-content: flex-end; -} - .c9 .react-select-container { box-sizing: border-box; display: block; @@ -387,170 +278,162 @@ exports[`rendering of Session Recordings 1`] = ` padding-bottom: 24px; } -.c26 { - background: #222C59; +.c16 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c26 > thead > tr > th, -.c26 > tbody > tr > th, -.c26 > tfoot > tr > th, -.c26 > thead > tr > td, -.c26 > tbody > tr > td, -.c26 > tfoot > tr > td { +.c16 > thead > tr > th, +.c16 > tbody > tr > th, +.c16 > tfoot > tr > th, +.c16 > thead > tr > td, +.c16 > tbody > tr > td, +.c16 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c26 > thead > tr > th:first-child, -.c26 > tbody > tr > th:first-child, -.c26 > tfoot > tr > th:first-child, -.c26 > thead > tr > td:first-child, -.c26 > tbody > tr > td:first-child, -.c26 > tfoot > tr > td:first-child { +.c16 > thead > tr > th:first-child, +.c16 > tbody > tr > th:first-child, +.c16 > tfoot > tr > th:first-child, +.c16 > thead > tr > td:first-child, +.c16 > tbody > tr > td:first-child, +.c16 > tfoot > tr > td:first-child { padding-left: 24px; } -.c26 > thead > tr > th:last-child, -.c26 > tbody > tr > th:last-child, -.c26 > tfoot > tr > th:last-child, -.c26 > thead > tr > td:last-child, -.c26 > tbody > tr > td:last-child, -.c26 > tfoot > tr > td:last-child { +.c16 > thead > tr > th:last-child, +.c16 > tbody > tr > th:last-child, +.c16 > tfoot > tr > th:last-child, +.c16 > thead > tr > td:last-child, +.c16 > tbody > tr > td:last-child, +.c16 > tfoot > tr > td:last-child { padding-right: 24px; } -.c26 > tbody > tr > td { +.c16 > tbody > tr > td { vertical-align: middle; } -.c26 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c16 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c26 > thead > tr > th svg { +.c16 > thead > tr > th svg { height: 12px; } -.c26 > tbody > tr > td { +.c16 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c26 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c16 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c26 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c16 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c11 { - padding: 16px 24px; - display: flex; - height: 24px; - flex-shrink: 0; - align-items: center; - justify-content: space-between; - background: #222C59; -} - -.c10 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; +.c16 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c23 svg { - font-size: 20px; +.c16 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); } -.c23 svg:before { - padding-left: 1px; +.c10 { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c16 { +.c15 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c15 { +.c14 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c13 { +.c12 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c12 { +.c11 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c14 { +.c13 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c14:hover, -.c14:focus, -.c14:active { color: #FFFFFF; background: rgba(255,255,255,0.07); -} - -.c14::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; + padding-right: 184px; + padding-left: 24px; }
@@ -627,69 +510,43 @@ exports[`rendering of Session Recordings 1`] = `
-
- + + + + + + + + + + + + + + + + + + + + + +
+ + Type - - + + Name - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - + + + - - - + + + + + + + + + - - + + + + + + + + + - - - - + + + + + + - - - + + + - - + + + + + + - - - - + + + - - -
- - Type - - - - - - - - - - Name - - - - - - - - - - User(s) - - - - - - - - - - Duration - - - - - - - - - - Created (UTC) - - - - - - - - Session ID - -
- - - - minikube/default/hello-node-6b89d599b9-lsfjm - - lisa2 - - 9 seconds - - 2022-07-11T14:39:33.373Z - - 8efccedd-9633-473f-bfb3-fcc07e2af345 - + + + - - Play - - -
+ User(s) - - - - WIN-JR2L4P7KN15-teleport-dev - - joe - - 2 seconds - - 2022-01-19T15:49:50.182Z - - fe41659b-a611-4b08-974b-69564f766403 - - recording disabled -
- - - - WIN-JR2L4P7KN15-teleport-dev - + + + - joe - - - 5 seconds - - 2022-01-19T15:19:46.992Z - - 3b8d6d4b-1096-43e8-a18c-1ce784911a8e - - recording disabled -
+ Duration + - - apple-node - + + + - one, two - - - 19 minutes - - 2019-04-22T00:00:51.543Z - - 426485-6491-11e9-80a1-427cfde50f5a - - - Play - -
+ Created (UTC) - - peach-node - + + + Session ID + +
+ + + + + + + minikube/default/hello-node-6b89d599b9-lsfjm + + lisa2 + + 9 seconds + + 2022-07-11T14:39:33.373Z + + 8efccedd-9633-473f-bfb3-fcc07e2af345 + + - one, two - - 21 seconds - - 2019-04-22T00:00:51.543Z - - 377875-6491-11e9-80a1-427cfde50f5a - +
+ - - Play - -
- + + + + WIN-JR2L4P7KN15-teleport-dev + + joe + + 2 seconds + + 2022-01-19T15:49:50.182Z + + fe41659b-a611-4b08-974b-69564f766403 + + recording disabled +
+ + - - - - - - im-a-nodename - + + + + WIN-JR2L4P7KN15-teleport-dev + + joe + + 5 seconds + + 2022-01-19T15:19:46.992Z + + 3b8d6d4b-1096-43e8-a18c-1ce784911a8e + + recording disabled +
+ - test - - 10 minutes - - 2021-07-27T23:20:05.346Z - - d183ca84-dd94-434a-afee5c2c5f38 - + + + + + apple-node + + one, two + + 19 minutes + + 2019-04-22T00:00:51.543Z + + 426485-6491-11e9-80a1-427cfde50f5a + + - recording disabled -
- +
+ + - - - - - - ip-172-31-30-254 - + + + + peach-node + + one, two + + 21 seconds + + 2019-04-22T00:00:51.543Z + + 377875-6491-11e9-80a1-427cfde50f5a + + - foo - - 32 seconds - - 2021-05-21T22:54:27.123Z - - 9d92ad96-a45c-4add-463cc7bc48b1 - +
+ - non-interactive -
- + + + + + +
+ im-a-nodename + + test + + 10 minutes + + 2021-07-27T23:20:05.346Z + + d183ca84-dd94-434a-afee5c2c5f38 + + recording disabled +
+ + + + + + + ip-172-31-30-254 + + foo + + 32 seconds + + 2021-05-21T22:54:27.123Z + + 9d92ad96-a45c-4add-463cc7bc48b1 + + non-interactive +
`; diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap index fe114fa8c1be5..69ab29864d973 100644 --- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap +++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap @@ -21,20 +21,21 @@ exports[`active sessions CTA 1`] = ` box-sizing: border-box; } -.c22 { +.c31 { box-sizing: border-box; - width: 100%; + width: 80px; + text-align: center; } -.c24 { +.c21 { box-sizing: border-box; - margin-right: 8px; + margin-bottom: 4px; + width: 100%; } -.c32 { +.c23 { box-sizing: border-box; - width: 80px; - text-align: center; + margin-right: 8px; } .c10 { @@ -82,7 +83,7 @@ exports[`active sessions CTA 1`] = ` cursor: auto; } -.c33 { +.c32 { line-height: 1.5; margin: 0; display: inline-flex; @@ -109,22 +110,22 @@ exports[`active sessions CTA 1`] = ` padding: 0px 16px; } -.c33:hover, -.c33:focus { +.c32:hover, +.c32:focus { background: rgba(255,255,255,0.07); } -.c33:active { +.c32:active { background: rgba(255,255,255,0.13); } -.c33:disabled { +.c32:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c26 { +.c25 { align-items: center; border: none; cursor: pointer; @@ -146,25 +147,25 @@ exports[`active sessions CTA 1`] = ` margin-right: 0px; } -.c26:disabled { +.c25:disabled { color: rgba(255,255,255,0.36); } -.c26:disabled { +.c25:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c26:hover:enabled, -.c26:focus:enabled { +.c25:hover:enabled, +.c25:focus:enabled { background: rgba(255,255,255,0.13); } -.c26:active:enabled { +.c25:active:enabled { background: rgba(255,255,255,0.18); } -.c28 { +.c27 { align-items: center; border: none; cursor: pointer; @@ -185,21 +186,21 @@ exports[`active sessions CTA 1`] = ` margin-left: 0px; } -.c28:disabled { +.c27:disabled { color: rgba(255,255,255,0.36); } -.c28:disabled { +.c27:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c28:hover:enabled, -.c28:focus:enabled { +.c27:hover:enabled, +.c27:focus:enabled { background: rgba(255,255,255,0.13); } -.c28:active:enabled { +.c27:active:enabled { background: rgba(255,255,255,0.18); } @@ -209,7 +210,7 @@ exports[`active sessions CTA 1`] = ` justify-content: center; } -.c31 { +.c30 { display: inline-flex; align-items: center; justify-content: center; @@ -217,7 +218,7 @@ exports[`active sessions CTA 1`] = ` padding: 4px; } -.c34 { +.c33 { display: inline-flex; align-items: center; justify-content: center; @@ -234,7 +235,7 @@ exports[`active sessions CTA 1`] = ` margin: 0px; } -.c25 { +.c24 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -242,7 +243,7 @@ exports[`active sessions CTA 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } .c1 { @@ -260,8 +261,9 @@ exports[`active sessions CTA 1`] = ` align-items: center; } -.c23 { +.c22 { display: flex; + align-items: center; justify-content: flex-end; } @@ -297,173 +299,173 @@ exports[`active sessions CTA 1`] = ` margin-right: 10px; } -.c29 { - background: #222C59; +.c28 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c29 > thead > tr > th, -.c29 > tbody > tr > th, -.c29 > tfoot > tr > th, -.c29 > thead > tr > td, -.c29 > tbody > tr > td, -.c29 > tfoot > tr > td { +.c28 > thead > tr > th, +.c28 > tbody > tr > th, +.c28 > tfoot > tr > th, +.c28 > thead > tr > td, +.c28 > tbody > tr > td, +.c28 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c29 > thead > tr > th:first-child, -.c29 > tbody > tr > th:first-child, -.c29 > tfoot > tr > th:first-child, -.c29 > thead > tr > td:first-child, -.c29 > tbody > tr > td:first-child, -.c29 > tfoot > tr > td:first-child { +.c28 > thead > tr > th:first-child, +.c28 > tbody > tr > th:first-child, +.c28 > tfoot > tr > th:first-child, +.c28 > thead > tr > td:first-child, +.c28 > tbody > tr > td:first-child, +.c28 > tfoot > tr > td:first-child { padding-left: 24px; } -.c29 > thead > tr > th:last-child, -.c29 > tbody > tr > th:last-child, -.c29 > tfoot > tr > th:last-child, -.c29 > thead > tr > td:last-child, -.c29 > tbody > tr > td:last-child, -.c29 > tfoot > tr > td:last-child { +.c28 > thead > tr > th:last-child, +.c28 > tbody > tr > th:last-child, +.c28 > tfoot > tr > th:last-child, +.c28 > thead > tr > td:last-child, +.c28 > tbody > tr > td:last-child, +.c28 > tfoot > tr > td:last-child { padding-right: 24px; } -.c29 > tbody > tr > td { +.c28 > tbody > tr > td { vertical-align: middle; } -.c29 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c28 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c29 > thead > tr > th svg { +.c28 > thead > tr > th svg { height: 12px; } -.c29 > tbody > tr > td { +.c28 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c29 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c28 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c29 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c28 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c16 { - padding: 16px 24px; +.c28 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; +} + +.c28 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c15 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; -} - -.c15 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c27 svg { +.c26 svg { font-size: 20px; } -.c27 svg:before { +.c26 svg:before { padding-left: 1px; } -.c21 { +.c20 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c20 { +.c19 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c18 { +.c17 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c17 { +.c16 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c19 { +.c18 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c19:hover, -.c19:focus, -.c19:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c19::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c30 tbody > tr > td { +.c29 tbody > tr > td { vertical-align: middle; } @@ -531,69 +533,122 @@ exports[`active sessions CTA 1`] = `
-
- +
+
-
+ 1 + + - + + 7 + + of + + + 7 + +
+
+
+
-
+ + + + + +
+
+ + + + + + + + + + + + + + + +
+ + Type + + + + + + Name + + + + - - + Session ID + + Users + + Command + + + Duration - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + - - - - - + + + - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- + +
+ + + + + + + minikube + + 7174aded-340a-4863-b661-7ba52aeb22c8 + + lisa2 + + kubectl get pods + + 59 minutes + +
+ + + + + + + im-a-nodename + + c7befbb4-3885-4d08-a466-de832a73c3d4 + + lisa2 + + ls -la + + 5 seconds + +
+
- + + +
+ + - Name + + + + + im-a-nodename-2 + + b204924e-6b74-5d92-89ea-d95043a969f1 + + lisa3 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+
- Session ID - + + +
+ - Users - - + + + + + + im-a-nodename-3 + + 8830cfe5-369e-5485-9c3d-19cc50e6f548 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
- Command - -
- - Duration + Join - - -
- + +
+ + - - - - - - minikube - - 7174aded-340a-4863-b661-7ba52aeb22c8 - - lisa2 - - kubectl get pods - - 59 minutes - -
- + + + + desktop-2 + + acacfbb4-3885-4d08-a466-de832a73ffac + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+ + - - - - - - im-a-nodename - - c7befbb4-3885-4d08-a466-de832a73c3d4 - - lisa2 - - ls -la - - 5 seconds - -
- -
-
- - - - - - - im-a-nodename-2 - - b204924e-6b74-5d92-89ea-d95043a969f1 - - lisa3 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - -
- -
-
- - - - - - - im-a-nodename-3 - - 8830cfe5-369e-5485-9c3d-19cc50e6f548 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - + + + + databse-32 + + 2314fbb4-3885-4d08-a466-de832a731222 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 3 minutes + +
+ -
- -
-
- - - - - - - desktop-2 - - acacfbb4-3885-4d08-a466-de832a73ffac - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - -
- - - - - - - databse-32 - - 2314fbb4-3885-4d08-a466-de832a731222 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 3 minutes - -
- - - - - - - - - grafana - - cafefbb4-3885-4d08-a466-de832a7313131 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 13 minutes - -
- + + + + + + +
+ grafana + + cafefbb4-3885-4d08-a466-de832a7313131 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 13 minutes + +
`; @@ -1121,27 +1119,28 @@ exports[`loaded 1`] = ` margin-bottom: 24px; } -.c16 { +.c27 { box-sizing: border-box; - width: 100%; + width: 80px; + text-align: center; } -.c18 { +.c15 { box-sizing: border-box; - margin-right: 8px; + margin-bottom: 4px; + width: 100%; } -.c21 { +.c17 { box-sizing: border-box; + margin-right: 8px; } -.c29 { +.c19 { box-sizing: border-box; - width: 80px; - text-align: center; } -.c30 { +.c28 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1168,22 +1167,22 @@ exports[`loaded 1`] = ` padding: 0px 16px; } -.c30:hover, -.c30:focus { +.c28:hover, +.c28:focus { background: rgba(255,255,255,0.07); } -.c30:active { +.c28:active { background: rgba(255,255,255,0.13); } -.c30:disabled { +.c28:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c22 { +.c20 { align-items: center; border: none; cursor: pointer; @@ -1205,25 +1204,25 @@ exports[`loaded 1`] = ` margin-right: 0px; } -.c22:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); } -.c22:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c22:hover:enabled, -.c22:focus:enabled { +.c20:hover:enabled, +.c20:focus:enabled { background: rgba(255,255,255,0.13); } -.c22:active:enabled { +.c20:active:enabled { background: rgba(255,255,255,0.18); } -.c25 { +.c23 { align-items: center; border: none; cursor: pointer; @@ -1244,31 +1243,31 @@ exports[`loaded 1`] = ` margin-left: 0px; } -.c25:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); } -.c25:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c25:hover:enabled, -.c25:focus:enabled { +.c23:hover:enabled, +.c23:focus:enabled { background: rgba(255,255,255,0.13); } -.c25:active:enabled { +.c23:active:enabled { background: rgba(255,255,255,0.18); } -.c24 { +.c22 { display: inline-flex; align-items: center; justify-content: center; } -.c28 { +.c26 { display: inline-flex; align-items: center; justify-content: center; @@ -1276,7 +1275,7 @@ exports[`loaded 1`] = ` padding: 4px; } -.c31 { +.c29 { display: inline-flex; align-items: center; justify-content: center; @@ -1293,7 +1292,7 @@ exports[`loaded 1`] = ` margin: 0px; } -.c20 { +.c18 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -1301,7 +1300,7 @@ exports[`loaded 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } .c1 { @@ -1314,14 +1313,10 @@ exports[`loaded 1`] = ` justify-content: space-between; } -.c17 { - display: flex; - justify-content: flex-end; -} - -.c19 { +.c16 { display: flex; align-items: center; + justify-content: flex-end; } .c5 { @@ -1349,173 +1344,173 @@ exports[`loaded 1`] = ` padding-bottom: 24px; } -.c26 { - background: #222C59; +.c24 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c26 > thead > tr > th, -.c26 > tbody > tr > th, -.c26 > tfoot > tr > th, -.c26 > thead > tr > td, -.c26 > tbody > tr > td, -.c26 > tfoot > tr > td { +.c24 > thead > tr > th, +.c24 > tbody > tr > th, +.c24 > tfoot > tr > th, +.c24 > thead > tr > td, +.c24 > tbody > tr > td, +.c24 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c26 > thead > tr > th:first-child, -.c26 > tbody > tr > th:first-child, -.c26 > tfoot > tr > th:first-child, -.c26 > thead > tr > td:first-child, -.c26 > tbody > tr > td:first-child, -.c26 > tfoot > tr > td:first-child { +.c24 > thead > tr > th:first-child, +.c24 > tbody > tr > th:first-child, +.c24 > tfoot > tr > th:first-child, +.c24 > thead > tr > td:first-child, +.c24 > tbody > tr > td:first-child, +.c24 > tfoot > tr > td:first-child { padding-left: 24px; } -.c26 > thead > tr > th:last-child, -.c26 > tbody > tr > th:last-child, -.c26 > tfoot > tr > th:last-child, -.c26 > thead > tr > td:last-child, -.c26 > tbody > tr > td:last-child, -.c26 > tfoot > tr > td:last-child { +.c24 > thead > tr > th:last-child, +.c24 > tbody > tr > th:last-child, +.c24 > tfoot > tr > th:last-child, +.c24 > thead > tr > td:last-child, +.c24 > tbody > tr > td:last-child, +.c24 > tfoot > tr > td:last-child { padding-right: 24px; } -.c26 > tbody > tr > td { +.c24 > tbody > tr > td { vertical-align: middle; } -.c26 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c24 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c26 > thead > tr > th svg { +.c24 > thead > tr > th svg { height: 12px; } -.c26 > tbody > tr > td { +.c24 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; +} + +.c24 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c26 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c24 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c26 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c24 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; } -.c10 { - padding: 16px 24px; +.c24 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c9 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; -} - -.c9 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c23 svg { +.c21 svg { font-size: 20px; } -.c23 svg:before { +.c21 svg:before { padding-left: 1px; } -.c15 { +.c14 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c14 { +.c13 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c12 { +.c11 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c11 { +.c10 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c13 { +.c12 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c13:hover, -.c13:focus, -.c13:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c13::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c27 tbody > tr > td { +.c25 tbody > tr > td { vertical-align: middle; } @@ -1545,69 +1540,122 @@ exports[`loaded 1`] = `
-
- +
+
-
+ 1 + + - + + 7 + + of + + + 7 + +
+
+
+
-
+ + + + + +
+
+ + + + + + + + + + + + + + + +
+ + Type + + + + + + Name + + + + - - + Session ID + + Users + + Command + + + Duration - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - + + + + + + + + - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- + +
+ + + + + + + minikube + + 7174aded-340a-4863-b661-7ba52aeb22c8 + + lisa2 + + kubectl get pods + + 59 minutes + +
+ + - Type + + + + + im-a-nodename + + c7befbb4-3885-4d08-a466-de832a73c3d4 + + lisa2 + + ls -la + + 5 seconds + +
+
- + + +
+ + + + + + + im-a-nodename-2 + + b204924e-6b74-5d92-89ea-d95043a969f1 + + lisa3 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+
- Session ID - + + +
+ - Users - - + + + + + + im-a-nodename-3 + + 8830cfe5-369e-5485-9c3d-19cc50e6f548 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
- Command - -
- - Duration + Join - - -
- - - - - - - minikube - - 7174aded-340a-4863-b661-7ba52aeb22c8 - - lisa2 - - kubectl get pods - - 59 minutes - -
- - - - - - - im-a-nodename - - c7befbb4-3885-4d08-a466-de832a73c3d4 - - lisa2 - - ls -la - - 5 seconds - + +
+ -
- -
-
- - - - - - - im-a-nodename-2 - - b204924e-6b74-5d92-89ea-d95043a969f1 - - lisa3 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - + + + + desktop-2 + + acacfbb4-3885-4d08-a466-de832a73ffac + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+ -
- -
-
- - - - - - - im-a-nodename-3 - - 8830cfe5-369e-5485-9c3d-19cc50e6f548 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - + + + + databse-32 + + 2314fbb4-3885-4d08-a466-de832a731222 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 3 minutes + +
+ -
- -
-
- - - - - - - desktop-2 - - acacfbb4-3885-4d08-a466-de832a73ffac - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - -
- - - - - - - databse-32 - - 2314fbb4-3885-4d08-a466-de832a731222 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 3 minutes - -
- - - - - - - - - grafana - - cafefbb4-3885-4d08-a466-de832a7313131 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 13 minutes - -
- + + + + + + +
+ grafana + + cafefbb4-3885-4d08-a466-de832a7313131 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 13 minutes + +
`; @@ -2135,27 +2126,28 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` margin-bottom: 24px; } -.c16 { +.c27 { + box-sizing: border-box; + width: 80px; + text-align: center; +} + +.c15 { box-sizing: border-box; + margin-bottom: 4px; width: 100%; } -.c18 { +.c17 { box-sizing: border-box; margin-right: 8px; } -.c21 { - box-sizing: border-box; -} - -.c29 { +.c19 { box-sizing: border-box; - width: 80px; - text-align: center; } -.c30 { +.c28 { line-height: 1.5; margin: 0; display: inline-flex; @@ -2182,22 +2174,22 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` padding: 0px 16px; } -.c30:hover, -.c30:focus { +.c28:hover, +.c28:focus { background: rgba(255,255,255,0.07); } -.c30:active { +.c28:active { background: rgba(255,255,255,0.13); } -.c30:disabled { +.c28:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c22 { +.c20 { align-items: center; border: none; cursor: pointer; @@ -2219,25 +2211,25 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` margin-right: 0px; } -.c22:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); } -.c22:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c22:hover:enabled, -.c22:focus:enabled { +.c20:hover:enabled, +.c20:focus:enabled { background: rgba(255,255,255,0.13); } -.c22:active:enabled { +.c20:active:enabled { background: rgba(255,255,255,0.18); } -.c25 { +.c23 { align-items: center; border: none; cursor: pointer; @@ -2258,31 +2250,31 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` margin-left: 0px; } -.c25:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); } -.c25:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c25:hover:enabled, -.c25:focus:enabled { +.c23:hover:enabled, +.c23:focus:enabled { background: rgba(255,255,255,0.13); } -.c25:active:enabled { +.c23:active:enabled { background: rgba(255,255,255,0.18); } -.c24 { +.c22 { display: inline-flex; align-items: center; justify-content: center; } -.c28 { +.c26 { display: inline-flex; align-items: center; justify-content: center; @@ -2290,7 +2282,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` padding: 4px; } -.c31 { +.c29 { display: inline-flex; align-items: center; justify-content: center; @@ -2307,7 +2299,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` margin: 0px; } -.c20 { +.c18 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -2315,7 +2307,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } .c1 { @@ -2328,14 +2320,10 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` justify-content: space-between; } -.c17 { - display: flex; - justify-content: flex-end; -} - -.c19 { +.c16 { display: flex; align-items: center; + justify-content: flex-end; } .c5 { @@ -2363,173 +2351,173 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` padding-bottom: 24px; } -.c26 { - background: #222C59; +.c24 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c26 > thead > tr > th, -.c26 > tbody > tr > th, -.c26 > tfoot > tr > th, -.c26 > thead > tr > td, -.c26 > tbody > tr > td, -.c26 > tfoot > tr > td { +.c24 > thead > tr > th, +.c24 > tbody > tr > th, +.c24 > tfoot > tr > th, +.c24 > thead > tr > td, +.c24 > tbody > tr > td, +.c24 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c26 > thead > tr > th:first-child, -.c26 > tbody > tr > th:first-child, -.c26 > tfoot > tr > th:first-child, -.c26 > thead > tr > td:first-child, -.c26 > tbody > tr > td:first-child, -.c26 > tfoot > tr > td:first-child { +.c24 > thead > tr > th:first-child, +.c24 > tbody > tr > th:first-child, +.c24 > tfoot > tr > th:first-child, +.c24 > thead > tr > td:first-child, +.c24 > tbody > tr > td:first-child, +.c24 > tfoot > tr > td:first-child { padding-left: 24px; } -.c26 > thead > tr > th:last-child, -.c26 > tbody > tr > th:last-child, -.c26 > tfoot > tr > th:last-child, -.c26 > thead > tr > td:last-child, -.c26 > tbody > tr > td:last-child, -.c26 > tfoot > tr > td:last-child { +.c24 > thead > tr > th:last-child, +.c24 > tbody > tr > th:last-child, +.c24 > tfoot > tr > th:last-child, +.c24 > thead > tr > td:last-child, +.c24 > tbody > tr > td:last-child, +.c24 > tfoot > tr > td:last-child { padding-right: 24px; } -.c26 > tbody > tr > td { +.c24 > tbody > tr > td { vertical-align: middle; } -.c26 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c24 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c26 > thead > tr > th svg { +.c24 > thead > tr > th svg { height: 12px; } -.c26 > tbody > tr > td { +.c24 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c26 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c24 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c26 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c24 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c10 { - padding: 16px 24px; +.c24 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; +} + +.c24 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c9 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c9 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; -} - -.c23 svg { +.c21 svg { font-size: 20px; } -.c23 svg:before { +.c21 svg:before { padding-left: 1px; } -.c15 { +.c14 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c14 { +.c13 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c12 { +.c11 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c11 { +.c10 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c13 { +.c12 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c13:hover, -.c13:focus, -.c13:active { color: #FFFFFF; background: rgba(255,255,255,0.07); + padding-right: 184px; + padding-left: 24px; } -.c13::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; -} - -.c27 tbody > tr > td { +.c25 tbody > tr > td { vertical-align: middle; } @@ -2559,69 +2547,122 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
-
- +
+
-
+ 1 + + - + + 7 + + of + + + 7 + +
+
+
+
-
+ + + + + +
+
+ + + + + + + + + + + + + + + +
+ + Type - - + + Name + + + + + + + + Session ID + + Users + + Command + + + Duration + - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - + + + + + + + + - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- + +
+ + + + + + + minikube + + 7174aded-340a-4863-b661-7ba52aeb22c8 + + lisa2 + + kubectl get pods + + 59 minutes + +
+ + - Type + + + + + im-a-nodename + + c7befbb4-3885-4d08-a466-de832a73c3d4 + + lisa2 + + ls -la + + 5 seconds + +
+
- + + +
+ + + + + + + im-a-nodename-2 + + b204924e-6b74-5d92-89ea-d95043a969f1 + + lisa3 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+
- Session ID - + + +
+ - Users - - + + + + + + im-a-nodename-3 + + 8830cfe5-369e-5485-9c3d-19cc50e6f548 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
- Command - -
- - Duration + Join - - -
- - - - - - - minikube - - 7174aded-340a-4863-b661-7ba52aeb22c8 - - lisa2 - - kubectl get pods - - 59 minutes - -
- - - - - - - im-a-nodename - - c7befbb4-3885-4d08-a466-de832a73c3d4 - - lisa2 - - ls -la - - 5 seconds - + +
+ -
- -
-
- - - - - - - im-a-nodename-2 - - b204924e-6b74-5d92-89ea-d95043a969f1 - - lisa3 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - + + + + desktop-2 + + acacfbb4-3885-4d08-a466-de832a73ffac + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 5 seconds + +
+ -
- -
-
- - - - - - - im-a-nodename-3 - - 8830cfe5-369e-5485-9c3d-19cc50e6f548 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - + + + + databse-32 + + 2314fbb4-3885-4d08-a466-de832a731222 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 3 minutes + +
+ -
- -
-
- - - - - - - desktop-2 - - acacfbb4-3885-4d08-a466-de832a73ffac - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 5 seconds - -
- - - - - - - databse-32 - - 2314fbb4-3885-4d08-a466-de832a731222 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 3 minutes - -
- - - - - - - - - grafana - - cafefbb4-3885-4d08-a466-de832a7313131 - - lisa2 - - top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid - - 13 minutes - -
- + + + + + + +
+ grafana + + cafefbb4-3885-4d08-a466-de832a7313131 + + lisa2 + + top -o command -o cpu -o boosts -o cycles -o cow -o user -o vsize -o csw -o threads -o ports -o ppid + + 13 minutes + +
`; diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap index 4d375f33e1a08..e3e6b48a829dc 100644 --- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap +++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap @@ -12,18 +12,19 @@ exports[`success state 1`] = ` margin-bottom: 24px; } -.c16 { +.c19 { box-sizing: border-box; - width: 100%; } -.c18 { +.c15 { box-sizing: border-box; - margin-right: 8px; + margin-bottom: 4px; + width: 100%; } -.c20 { +.c17 { box-sizing: border-box; + margin-right: 8px; } .c8 { @@ -69,7 +70,7 @@ exports[`success state 1`] = ` cursor: auto; } -.c28 { +.c27 { line-height: 1.5; margin: 0; display: inline-flex; @@ -97,22 +98,22 @@ exports[`success state 1`] = ` height: 24px; } -.c28:hover, -.c28:focus { +.c27:hover, +.c27:focus { background: rgba(255,255,255,0.07); } -.c28:active { +.c27:active { background: rgba(255,255,255,0.13); } -.c28:disabled { +.c27:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c21 { +.c20 { align-items: center; border: none; cursor: pointer; @@ -134,25 +135,25 @@ exports[`success state 1`] = ` margin-right: 0px; } -.c21:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); } -.c21:disabled { +.c20:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c21:hover:enabled, -.c21:focus:enabled { +.c20:hover:enabled, +.c20:focus:enabled { background: rgba(255,255,255,0.13); } -.c21:active:enabled { +.c20:active:enabled { background: rgba(255,255,255,0.18); } -.c24 { +.c23 { align-items: center; border: none; cursor: pointer; @@ -173,31 +174,31 @@ exports[`success state 1`] = ` margin-left: 0px; } -.c24:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); } -.c24:disabled { +.c23:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c24:hover:enabled, -.c24:focus:enabled { +.c23:hover:enabled, +.c23:focus:enabled { background: rgba(255,255,255,0.13); } -.c24:active:enabled { +.c23:active:enabled { background: rgba(255,255,255,0.18); } -.c23 { +.c22 { display: inline-flex; align-items: center; justify-content: center; } -.c29 { +.c28 { display: inline-flex; align-items: center; justify-content: center; @@ -215,7 +216,7 @@ exports[`success state 1`] = ` margin: 0px; } -.c19 { +.c18 { overflow: hidden; text-overflow: ellipsis; font-weight: 400; @@ -223,10 +224,10 @@ exports[`success state 1`] = ` line-height: 16px; margin: 0px; margin-right: 4px; - color: #FFFFFF; + font-weight: 500; } -.c27 { +.c26 { box-sizing: border-box; border-radius: 10px; display: inline-block; @@ -250,14 +251,15 @@ exports[`success state 1`] = ` align-items: center; } -.c17 { +.c25 { display: flex; - justify-content: flex-end; + flex-wrap: wrap; } -.c26 { +.c16 { display: flex; - flex-wrap: wrap; + align-items: center; + justify-content: flex-end; } .c5 { @@ -285,170 +287,170 @@ exports[`success state 1`] = ` padding-bottom: 24px; } -.c25 { - background: #222C59; +.c24 { border-collapse: collapse; border-spacing: 0; border-style: hidden; font-size: 12px; width: 100%; - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } -.c25 > thead > tr > th, -.c25 > tbody > tr > th, -.c25 > tfoot > tr > th, -.c25 > thead > tr > td, -.c25 > tbody > tr > td, -.c25 > tfoot > tr > td { +.c24 > thead > tr > th, +.c24 > tbody > tr > th, +.c24 > tfoot > tr > th, +.c24 > thead > tr > td, +.c24 > tbody > tr > td, +.c24 > tfoot > tr > td { padding: 8px 8px; vertical-align: middle; } -.c25 > thead > tr > th:first-child, -.c25 > tbody > tr > th:first-child, -.c25 > tfoot > tr > th:first-child, -.c25 > thead > tr > td:first-child, -.c25 > tbody > tr > td:first-child, -.c25 > tfoot > tr > td:first-child { +.c24 > thead > tr > th:first-child, +.c24 > tbody > tr > th:first-child, +.c24 > tfoot > tr > th:first-child, +.c24 > thead > tr > td:first-child, +.c24 > tbody > tr > td:first-child, +.c24 > tfoot > tr > td:first-child { padding-left: 24px; } -.c25 > thead > tr > th:last-child, -.c25 > tbody > tr > th:last-child, -.c25 > tfoot > tr > th:last-child, -.c25 > thead > tr > td:last-child, -.c25 > tbody > tr > td:last-child, -.c25 > tfoot > tr > td:last-child { +.c24 > thead > tr > th:last-child, +.c24 > tbody > tr > th:last-child, +.c24 > tfoot > tr > th:last-child, +.c24 > thead > tr > td:last-child, +.c24 > tbody > tr > td:last-child, +.c24 > tfoot > tr > td:last-child { padding-right: 24px; } -.c25 > tbody > tr > td { +.c24 > tbody > tr > td { vertical-align: middle; } -.c25 > thead > tr > th { - background: rgba(255,255,255,0.07); +.c24 > thead > tr > th { color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 24px; cursor: pointer; - font-size: 10px; - font-weight: 400; padding-bottom: 0; padding-top: 0; text-align: left; - opacity: 0.75; - text-transform: uppercase; white-space: nowrap; } -.c25 > thead > tr > th svg { +.c24 > thead > tr > th svg { height: 12px; } -.c25 > tbody > tr > td { +.c24 > tbody > tr > td { color: #FFFFFF; - line-height: 16px; + font-weight: 300; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.035px; } -.c25 tbody tr { - border-bottom: 1px solid rgb(49,58,100); +.c24 tbody tr { + transition: all 150ms; + position: relative; + border-top: 2px solid rgba(255,255,255,0.07); + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; } -.c25 tbody tr:hover { - background-color: rgba(255,255,255,0.07); +.c24 tbody tr:hover { + border-top: 2px solid rgba(0,0,0,0); + background-color: #222C59; } -.c10 { - padding: 16px 24px; +.c24 tbody tr:hover:after { + box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20); + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; +} + +.c24 tbody tr:hover + tr { + border-top: 2px solid rgba(0,0,0,0); +} + +.c9 { display: flex; - height: 24px; flex-shrink: 0; align-items: center; justify-content: space-between; - background: #222C59; -} - -.c9 { - box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12); - overflow: hidden; - border-radius: 8px; + padding: 16px 0; + max-height: 40px; + margin-bottom: 8px; } -.c22 svg { +.c21 svg { font-size: 20px; } -.c22 svg:before { +.c21 svg:before { padding-left: 1px; } -.c15 { +.c14 { position: relative; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.07); - border-radius: 200px; + border-radius: 0 200px 200px 0; } -.c14 { +.c13 { position: absolute; height: 100%; right: 0; display: flex; align-items: center; justify-content: center; - background: #222C59; - border-radius: 200px; + border-left: 1px solid rgba(255,255,255,0.07); + border-radius: 0 200px 200px 0; } -.c12 { +.c11 { position: relative; display: flex; overflow: hidden; - width: 100%; border-radius: 200px; - height: 32px; + height: 100%; background: transparent; + max-width: 725px; } -.c11 { +.c10 { background: #0C143D; border-radius: 200px; width: 100%; - height: 32px; + height: 56px; + margin-bottom: 12px; } -.c13 { +.c12 { border: none; outline: none; box-sizing: border-box; - height: 100%; - font-size: 12px; + font-size: 16px; width: 100%; transition: all 0.2s; padding-left: 16px; padding-right: 16px; - color: #FFFFFF; - background: #0C143D; - padding-right: 184px; -} - -.c13:hover, -.c13:focus, -.c13:active { color: #FFFFFF; background: rgba(255,255,255,0.07); -} - -.c13::placeholder { - color: rgba(255,255,255,0.54); - font-size: 12px; + padding-right: 184px; + padding-left: 24px; }
@@ -471,69 +473,122 @@ exports[`success state 1`] = ` Create New User
- `; diff --git a/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx b/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx index 554d39222799f..0c672123f63b3 100644 --- a/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx +++ b/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx @@ -17,18 +17,17 @@ */ import React from 'react'; -import { PageIndicatorText } from 'shared/components/Search'; -import { Box, Flex } from 'design'; -import { StyledPanel } from 'design/DataTable'; +import { Flex } from 'design'; import InputSearch from 'design/DataTable/InputSearch'; +import { PageIndicatorText } from 'design/DataTable/Pager/PageIndicatorText'; import { AdvancedSearchToggle } from 'shared/components/AdvancedSearchToggle'; import { PageIndicators } from 'teleport/components/hooks/useServersidePagination'; import useServersideSearchPanel, { - SearchPanelState, HookProps, + SearchPanelState, } from './useServerSideSearchPanel'; interface ComponentProps { @@ -66,36 +65,26 @@ export function ServersideSearchPanel({ } return ( - - - - - - - - - - - - + + + + + - + ); }