From d21af6a8e0c257e9d6d1fa2f4a34477d04839c4c Mon Sep 17 00:00:00 2001 From: Lisa Kim Date: Wed, 15 Jul 2020 12:17:08 -0700 Subject: [PATCH 1/4] Make scrollbar appear on content overflow --- packages/teleport/src/dashboard/components/Layout/Layout.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/teleport/src/dashboard/components/Layout/Layout.jsx b/packages/teleport/src/dashboard/components/Layout/Layout.jsx index f7a938818..bb50d4db6 100644 --- a/packages/teleport/src/dashboard/components/Layout/Layout.jsx +++ b/packages/teleport/src/dashboard/components/Layout/Layout.jsx @@ -29,6 +29,7 @@ FeatureHeader.defaultProps = { const FeatureHeaderTitle = props => ; const FeatureBox = styled(Flex)` + overflow: auto; width: 100%; height: 100%; ::after { From 9f27caac04cc9944ad0c001388173e89b954d643 Mon Sep 17 00:00:00 2001 From: Lisa Kim Date: Wed, 15 Jul 2020 12:17:34 -0700 Subject: [PATCH 2/4] Correct event grammar and update snapshot --- .../Audit/AuditEvents/AuditEvents.story.tsx | 19 ++ .../AuditEvents.story.test.tsx.snap | 214 ++++++++++++++---- .../Clusters.story.test.tsx.snap | 1 + .../teleport/src/services/audit/makeEvent.ts | 4 +- 4 files changed, 195 insertions(+), 43 deletions(-) diff --git a/packages/teleport/src/cluster/components/Audit/AuditEvents/AuditEvents.story.tsx b/packages/teleport/src/cluster/components/Audit/AuditEvents/AuditEvents.story.tsx index 835001fc1..c757d4091 100644 --- a/packages/teleport/src/cluster/components/Audit/AuditEvents/AuditEvents.story.tsx +++ b/packages/teleport/src/cluster/components/Audit/AuditEvents/AuditEvents.story.tsx @@ -298,6 +298,25 @@ const events = [ time: '2019-04-22T00:00:51.543Z', uid: '6bf836ee-197c-453e-98e5-31511935f22a', user: 'admin@example.com', + server_hostname: 'node-hostname', + }, + { + code: 'T2004I', + ei: 29, + enhanced_recording: false, + event: 'session.end', + interactive: true, + namespace: 'default', + participants: ['root'], + server_addr: '192.168.86.47:3022', + server_hostname: 'im-a-nodename', + server_id: 'e1826ad2-4b7d-464b-8891-54cf7fedb7fb', + session_start: '2020-07-15T19:01:24.660230257Z', + session_stop: '2020-07-15T19:03:05.193252488Z', + sid: '941a4c65-c6cd-11ea-9bef-482ae3513733', + time: '2020-07-15T19:03:05.193Z', + uid: '0ca9c34b-f13b-458d-9bdf-c5b5cd1660d3', + user: 'root', }, { code: 'T1000I', diff --git a/packages/teleport/src/cluster/components/Audit/AuditEvents/__snapshots__/AuditEvents.story.test.tsx.snap b/packages/teleport/src/cluster/components/Audit/AuditEvents/__snapshots__/AuditEvents.story.test.tsx.snap index d1af2592a..2826cc83e 100644 --- a/packages/teleport/src/cluster/components/Audit/AuditEvents/__snapshots__/AuditEvents.story.test.tsx.snap +++ b/packages/teleport/src/cluster/components/Audit/AuditEvents/__snapshots__/AuditEvents.story.test.tsx.snap @@ -33,6 +33,15 @@ exports[`rendering of Events 1`] = ` font-size: 16px; } +.c13 { + display: inline-block; + transition: color .3s; + margin-left: 8px; + margin-right: -8px; + color: rgba(255,255,255,0.56); + font-size: 14px; +} + .c7 { background: #222C59; box-shadow: 0 4px 16px rgba(0,0,0,0.24); @@ -96,7 +105,56 @@ exports[`rendering of Events 1`] = ` line-height: 16px; } -.c11 { +.c12 { + line-height: 1.5; + margin: 0; + display: inline-flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border: none; + border-radius: 4px; + cursor: pointer; + font-family: inherit; + font-weight: 600; + outline: none; + position: relative; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: all 0.3s; + -webkit-font-smoothing: antialiased; + background: #2C3A73; + border: 1px solid #1C254D; + opacity: .87; + color: rgba(255,255,255,0.87); + font-size: 10px; + min-height: 24px; + padding: 0px 16px; + height: 24px; +} + +.c12:active { + opacity: 0.56; +} + +.c12:hover, +.c12:focus { + background: #2C3A73; + border: 1px solid rgba(255,255,255,0.1); + opacity: 1; +} + +.c12:active { + opacity: 0.24; +} + +.c12:disabled { + background: rgba(255,255,255,0.12); + color: rgba(255,255,255,0.3); +} + +.c14 { line-height: 1.5; margin: 0; display: inline-flex; @@ -125,22 +183,22 @@ exports[`rendering of Events 1`] = ` width: 87px; } -.c11:active { +.c14:active { opacity: 0.56; } -.c11:hover, -.c11:focus { +.c14:hover, +.c14:focus { background: #2C3A73; border: 1px solid rgba(255,255,255,0.1); opacity: 1; } -.c11:active { +.c14:active { opacity: 0.24; } -.c11:disabled { +.c14:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); } @@ -198,6 +256,33 @@ exports[`rendering of Events 1`] = ` border-top-right-radius: 8px; } +.c11 { + background: #000; + border: 2px solid #651FFF; + color: rgba(255,255,255,0.87); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0; + border-radius: 100px; + transition: all 0.3s; +} + +.c11:hover, +.c11:active, +.c11:focus { + box-shadow: 0 4px 16px rgba(0,0,0,0.24); + color: #FFFFFF; +} + +.c11:active { + box-shadow: none; + opacity: 0.56; +} + .c9 { display: flex; align-items: center; @@ -267,12 +352,12 @@ exports[`rendering of Events 1`] = ` - - 31 + 32 of - 31 + 32
+ + +
+ + + + Session Ended +
+ + + User [root] has ended an interactive session lasting 2 minutes [941a4c65-c6cd-11ea-9bef-482ae3513733] on node [im-a-nodename] + + + 2020-07-15 19:03:05 + + + + +