gravitational · mcbattirola · Jul 27, 2022 · Jun 29, 2022 · Jul 4, 2022 · Jul 4, 2022
diff --git a/packages/design/src/Icon/Icon.jsx b/packages/design/src/Icon/Icon.jsx
@@ -111,6 +111,7 @@ export const ClipboardUser = makeFontIcon(
   'ClipboardUser',
   'icon-clipboard-user'
 );
+export const Clock = makeFontIcon('Clock', 'icon-clock3');
 export const Close = makeFontIcon('Close', 'icon-close');
 export const Cloud = makeFontIcon('Cloud', 'icon-cloud');
 export const CloudSync = makeFontIcon('CloudSync', 'icon-cloud-sync');

diff --git a/packages/design/src/Icon/Icon.story.js b/packages/design/src/Icon/Icon.story.js
@@ -73,6 +73,7 @@ export const ListOfIcons = () => (
     <IconBox IconCmpt={Icon.Question} text="Question" />
     <IconBox IconCmpt={Icon.Info} text="Info" />
     <IconBox IconCmpt={Icon.ClipboardUser} text="ClipboardUser" />
+    <IconBox IconCmpt={Icon.Clock} text="Clock" />
     <IconBox IconCmpt={Icon.Close} text="Close" />
     <IconBox IconCmpt={Icon.Cloud} text="Cloud" />
     <IconBox IconCmpt={Icon.CloudSync} text="CloudSync" />

diff --git a/packages/teleport/src/Audit/EventList/EventTypeCell.tsx b/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
@@ -129,6 +129,7 @@ const EventIconMap: Record<EventCode, React.FC> = {
   [eventCodes.X11_FORWARD]: Icons.Info,
   [eventCodes.X11_FORWARD_FAILURE]: Icons.Info,
   [eventCodes.CERTIFICATE_CREATED]: Icons.Keypair,
+  [eventCodes.UPGRADE_WINDOW_UPDATED]: Icons.Info,
   [eventCodes.UNKNOWN]: Icons.Question,
 };
 

diff --git a/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -358,12 +358,12 @@ exports[`list of all events 1`] = `
           </strong>
            - 
           <strong>
-            85
+            86
           </strong>
            of
 
           <strong>
-            85
+            86
           </strong>
         </div>
         <button
@@ -841,6 +841,43 @@ exports[`list of all events 1`] = `
           </button>
         </td>
       </tr>
+      <tr>
+        <td
+          style="vertical-align: inherit;"
+        >
+          <div
+            class="c14"
+          >
+            <span
+              class="c10 c15 icon icon-info_outline c10 c15"
+              color="light"
+              font-size="3"
+            />
+            Upgrade Window Start Updated
+          </div>
+        </td>
+        <td
+          style="word-break: break-word;"
+        >
+          Upgrade Window Start updated to [23:00] by user [alice@example.com]
+        </td>
+        <td
+          style="min-width: 120px;"
+        >
+          2022-04-13T20:00:04.000Z
+        </td>
+        <td
+          align="right"
+        >
+          <button
+            class="c16"
+            kind="border"
+            width="87px"
+          >
+            Details
+          </button>
+        </td>
+      </tr>
       <tr>
         <td
           style="vertical-align: inherit;"

diff --git a/packages/teleport/src/Audit/fixtures/index.ts b/packages/teleport/src/Audit/fixtures/index.ts
@@ -1204,6 +1204,13 @@ export const events = [
     time: '2022-05-23T08:29:14.126Z',
     uid: '6fa08495-170a-4de9-884f-9931fbdb5982',
   },
+  {
+    code: 'TUW01I',
+    time: '2022-04-13T20:00:04.000Z',
+    user: 'alice@example.com',
+    event: 'upgradewindowstart.update',
+    upgrade_window_start: '23:00',
+  },
 ].map(makeEvent);
 
 export const eventsSample = [

diff --git a/packages/teleport/src/Support/Support.story.tsx b/packages/teleport/src/Support/Support.story.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { Support } from './Support';
+import { Props, Support } from './Support';
 
 export default {
   title: 'Teleport/Support',
@@ -34,10 +34,11 @@ export const SupportWithTunnelAddress = () => (
   <Support {...props} tunnelPublicAddress="localhost:11005"></Support>
 );
 
-const props = {
+const props: Props = {
   clusterId: 'test',
   authVersion: '4.4.0-dev',
   publicURL: 'localhost:3080',
   isEnterprise: false,
   isCloud: false,
+  tunnelPublicAddress: null,
 };
diff --git a/packages/teleport/src/Support/Support.tsx b/packages/teleport/src/Support/Support.tsx
@@ -15,16 +15,20 @@
  */
 
 import React from 'react';
-import * as Icons from 'design/Icon';
 import { Card, Box, Text, Flex } from 'design';
+import * as Icons from 'design/Icon';
 
 import styled from 'styled-components';
 
 import { FeatureBox } from 'teleport/components/Layout';
 import useTeleport from 'teleport/useTeleport';
 import cfg from 'teleport/config';
 
-export default function Container() {
+export default function Container({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const ctx = useTeleport();
   const cluster = ctx.storeUser.state.cluster;
 
@@ -34,6 +38,7 @@ export default function Container() {
       isEnterprise={cfg.isEnterprise}
       tunnelPublicAddress={cfg.tunnelPublicAddress}
       isCloud={cfg.isCloud}
+      children={children}
     />
   );
 }
@@ -45,6 +50,7 @@ export const Support = ({
   isEnterprise,
   tunnelPublicAddress,
   isCloud,
+  children,
 }: Props) => {
   const docs = getDocUrls(authVersion, isEnterprise);
 
@@ -104,29 +110,38 @@ export const Support = ({
           </Box>
         </Flex>
       </Card>
-      <Box
-        border="1px solid"
-        borderColor="primary.light"
-        mt={4}
-        mb={10}
-        borderRadius={3}
-        px={5}
-        py={4}
-      >
-        <Text as="h5" mb={4} fontWeight="bold" caps>
-          Cluster Information
-        </Text>
-        <ClusterData title="Cluster Name" data={clusterId} />
-        <ClusterData title="Teleport Version" data={authVersion} />
-        <ClusterData title="Public Address" data={publicURL} />
+      <DataContainer title="Cluster Information">
+        <DataItem title="Cluster Name" data={clusterId} />
+        <DataItem title="Teleport Version" data={authVersion} />
+        <DataItem title="Public Address" data={publicURL} />
         {tunnelPublicAddress && (
-          <ClusterData title="Public SSH Tunnel" data={tunnelPublicAddress} />
+          <DataItem title="Public SSH Tunnel" data={tunnelPublicAddress} />
         )}
-      </Box>
+      </DataContainer>
+
+      {children}
     </FeatureBox>
   );
 };
 
+export const DataContainer: React.FC<{ title: string }> = ({
+  title,
+  children,
+}) => (
+  <Box
+    border="1px solid"
+    borderColor="primary.light"
+    mt={4}
+    borderRadius={3}
+    px={5}
+    py={4}
+  >
+    <Text as="h5" mb={4} fontWeight="bold" caps>
+      {title}
+    </Text>
+    {children}
+  </Box>
+);
 /**
  * getDocUrls returns an object of URL's appended with
  * UTM, version, and type of teleport.
@@ -189,7 +204,7 @@ const StyledSupportLink = styled.a.attrs({
   }
 `;
 
-const ClusterData = ({ title = '', data = null }) => (
+export const DataItem = ({ title = '', data = null }) => (
   <Flex mb={3}>
     <Text typography="body2" bold style={{ width: '130px' }}>
       {title}:
@@ -217,11 +232,12 @@ const Header = ({ title = '', icon = null }) => (
   </Flex>
 );
 
-type Props = {
+export type Props = {
   clusterId: string;
   authVersion: string;
   publicURL: string;
   isEnterprise: boolean;
   isCloud: boolean;
   tunnelPublicAddress?: string;
+  children?: React.ReactNode;
 };
diff --git a/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap b/packages/teleport/src/Support/__snapshots__/Support.story.test.tsx.snap
@@ -1,19 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`support Cloud 1`] = `
-.c6 {
-  display: inline-block;
-  transition: color 0.3s;
-  color: #FFFFFF;
-}
-
 .c3 {
   box-sizing: border-box;
 }
 
 .c9 {
   box-sizing: border-box;
-  margin-bottom: 72px;
   margin-top: 24px;
   padding-left: 32px;
   padding-right: 32px;
@@ -24,6 +17,12 @@ exports[`support Cloud 1`] = `
   border-color: #222C59;
 }
 
+.c6 {
+  display: inline-block;
+  transition: color 0.3s;
+  color: #FFFFFF;
+}
+
 .c1 {
   box-sizing: border-box;
   padding-bottom: 40px;
@@ -379,19 +378,12 @@ exports[`support Cloud 1`] = `
 `;
 
 exports[`support Enterprise 1`] = `
-.c6 {
-  display: inline-block;
-  transition: color 0.3s;
-  color: #FFFFFF;
-}
-
 .c3 {
   box-sizing: border-box;
 }
 
 .c9 {
   box-sizing: border-box;
-  margin-bottom: 72px;
   margin-top: 24px;
   padding-left: 32px;
   padding-right: 32px;
@@ -402,6 +394,12 @@ exports[`support Enterprise 1`] = `
   border-color: #222C59;
 }
 
+.c6 {
+  display: inline-block;
+  transition: color 0.3s;
+  color: #FFFFFF;
+}
+
 .c1 {
   box-sizing: border-box;
   padding-bottom: 40px;
@@ -764,19 +762,12 @@ exports[`support Enterprise 1`] = `
 `;
 
 exports[`support OSS 1`] = `
-.c6 {
-  display: inline-block;
-  transition: color 0.3s;
-  color: #FFFFFF;
-}
-
 .c3 {
   box-sizing: border-box;
 }
 
 .c9 {
   box-sizing: border-box;
-  margin-bottom: 72px;
   margin-top: 24px;
   padding-left: 32px;
   padding-right: 32px;
@@ -787,6 +778,12 @@ exports[`support OSS 1`] = `
   border-color: #222C59;
 }
 
+.c6 {
+  display: inline-block;
+  transition: color 0.3s;
+  color: #FFFFFF;
+}
+
 .c1 {
   box-sizing: border-box;
   padding-bottom: 40px;

diff --git a/packages/teleport/src/services/audit/makeEvent.ts b/packages/teleport/src/services/audit/makeEvent.ts
@@ -681,6 +681,13 @@ export const formatters: Formatters = {
       return `Certificate of type [${cert_type}] issued for [${user}]`;
     },
   },
+  [eventCodes.UPGRADE_WINDOW_UPDATED]: {
+    type: 'upgradewindow.update',
+    desc: 'Upgrade Window Start Updated',
+    format: ({ user, upgrade_window_start }) => {
+      return `Upgrade Window Start updated to [${upgrade_window_start}] by user [${user}]`;
+    },
+  },
   [eventCodes.UNKNOWN]: {
     type: 'unknown',
     desc: 'Unknown Event',

diff --git a/packages/teleport/src/services/audit/types.ts b/packages/teleport/src/services/audit/types.ts
@@ -146,6 +146,7 @@ export const eventCodes = {
   X11_FORWARD: 'T3008I',
   X11_FORWARD_FAILURE: 'T3008W',
   CERTIFICATE_CREATED: 'TC000I',
+  UPGRADE_WINDOW_UPDATED: 'TUW01I',
 } as const;
 
 /**
@@ -730,6 +731,12 @@ export type RawEvents = {
       identity: { user: string };
     }
   >;
+  [eventCodes.UPGRADE_WINDOW_UPDATED]: RawEvent<
+    typeof eventCodes.UPGRADE_WINDOW_UPDATED,
+    {
+      upgrade_window_start: string;
+    }
+  >;
 };
 
 /**