PD - Flagger generated objects (#1132)

* move customDataTable styled out of main render fn

* move Flagger objects to new tab

Author: TheGostKasper

ui-cra/src/components/ProgressiveDelivery/CanaryDetails/CanaryDetailsSection.tsx

@@ -41,7 +41,9 @@ function CanaryDetailsSection({
   const [open, setOpen] = useState(true);
 
   const { conditions, ...restStatus } = canary?.status || { conditions: [] };
-  const { lastTransitionTime, ...restConditionObj } = conditions![0] || { lastTransitionTime: '' };
+  const { lastTransitionTime, ...restConditionObj } = conditions![0] || {
+    lastTransitionTime: '',
+  };
 
   const toggleCollapse = () => {
     setOpen(!open);
@@ -75,7 +77,11 @@ function CanaryDetailsSection({
             />
             <CanaryRowHeader
               rowkey="Application"
-              value={automation?.kind && automation?.name ? `${automation?.kind}/${automation?.name}` : '--'}
+              value={
+                automation?.kind && automation?.name
+                  ? `${automation?.kind}/${automation?.name}`
+                  : '--'
+              }
             />
             <CanaryRowHeader
               rowkey="Deployment Strategy"
@@ -87,7 +93,9 @@ function CanaryDetailsSection({
             </CanaryRowHeader>
             <CanaryRowHeader rowkey="Provider" value={canary.provider} />
 
-            <div className={`${classes.sectionHeaderWrapper} ${classes.cardTitle}`}>
+            <div
+              className={`${classes.sectionHeaderWrapper} ${classes.cardTitle}`}
+            >
               Status
             </div>
 
@@ -116,7 +124,11 @@ function CanaryDetailsSection({
                 ))}
               </TableBody>
             </Table>
+          </CanaryDetailsWrapper>
+        </RouterTab>
 
+        <RouterTab name="Objects" path={`${path}/objects`}>
+          <CanaryDetailsWrapper>
             <ListManagedObjects
               clusterName={canary.clusterName || ''}
               name={canary.name || ''}

ui-cra/src/components/ProgressiveDelivery/CanaryDetails/ManagedObjectsTable.tsx

@@ -3,47 +3,46 @@ import styled, { ThemeProvider } from 'styled-components';
 import { usePolicyStyle } from '../../Policies/PolicyStyles';
 import { TableWrapper } from '../CanaryStyles';
 
-export const ManagedObjectsTable = ({ objects }: { objects: any[] }) => {
-  const classes = usePolicyStyle();
-
-  const CustomDataTable = styled(DataTable)`
+const CustomDataTable = styled(DataTable)`
   thead > tr {
     background: ${theme.colors.neutral10};
   }
 `;
 
+export const ManagedObjectsTable = ({ objects }: { objects: any[] }) => {
+  const classes = usePolicyStyle();
+
   return (
     <div className={classes.root}>
       <ThemeProvider theme={theme}>
-          <TableWrapper id="objects-list">
-            <CustomDataTable
-              rows={objects}
-              fields={[
-                {
-                  label: 'Name',
-                  value: 'name',
-                },
-                {
-                  label: 'Type',
-                  value: (object) => (
-                    `${object.groupVersionKind.version}/${object.groupVersionKind.kind}`
-                  ),
-                },
-                {
-                  label: 'Namespace',
-                  value: 'namespace',
-                },
-                {
-                  label: 'Status',
-                  value: 'status',
-                },
-                {
-                  label: 'Images',
-                  value: 'images',
-                },
-              ]}
-            />
-          </TableWrapper>
+        <TableWrapper id="objects-list">
+          <CustomDataTable
+            rows={objects}
+            fields={[
+              {
+                label: 'Name',
+                value: 'name',
+              },
+              {
+                label: 'Type',
+                value: object =>
+                  `${object.groupVersionKind.version}/${object.groupVersionKind.kind}`,
+              },
+              {
+                label: 'Namespace',
+                value: 'namespace',
+              },
+              {
+                label: 'Status',
+                value: 'status',
+              },
+              {
+                label: 'Images',
+                value: 'images',
+              },
+            ]}
+          />
+        </TableWrapper>
       </ThemeProvider>
     </div>
   );

ui-cra/src/components/ProgressiveDelivery/Events/EventsTable.tsx

@@ -15,40 +15,36 @@ export const EventsTable = ({ events }: { events: Event[] }) => {
   return (
     <div className={classes.root}>
       <ThemeProvider theme={theme}>
-        {events.length > 0 ? (
-          <TableWrapper id="events-list">
-            <FilterableTable
-              key={events?.length}
-              filters={initialFilterState}
-              rows={events}
-              fields={[
-                {
-                  label: 'Reason',
-                  value: 'reason',
-                  textSearchable: true,
-                },
-                {
-                  label: 'Message',
-                  value: (e: Event) => (
-                    <span className={classes.messageWrape}>{e.message}</span>
-                  ),
-                  maxWidth: 600,
-                },
-                {
-                  label: 'From',
-                  value: 'component',
-                },
-                {
-                  label: 'Last Updated',
-                  value: (e: Event) => moment(e.timestamp).fromNow() || '--',
-                  sortValue: (e: Event) => e.timestamp,
-                },
-              ]}
-            />
-          </TableWrapper>
-        ) : (
-          <p>No data to display</p>
-        )}
+        <TableWrapper id="events-list">
+          <FilterableTable
+            key={events?.length}
+            filters={initialFilterState}
+            rows={events}
+            fields={[
+              {
+                label: 'Reason',
+                value: 'reason',
+                textSearchable: true,
+              },
+              {
+                label: 'Message',
+                value: (e: Event) => (
+                  <span className={classes.messageWrape}>{e.message}</span>
+                ),
+                maxWidth: 600,
+              },
+              {
+                label: 'From',
+                value: 'component',
+              },
+              {
+                label: 'Last Updated',
+                value: (e: Event) => moment(e.timestamp).fromNow() || '--',
+                sortValue: (e: Event) => e.timestamp,
+              },
+            ]}
+          />
+        </TableWrapper>
       </ThemeProvider>
     </div>
   );