feat: Create new table view in Rollouts dashboard

docs/CONTRIBUTING.md

@@ -110,6 +110,22 @@ To run a subset of e2e tests, you need to specify the suite with `-run`, and the
 E2E_TEST_OPTIONS="-run 'TestCanarySuite' -testify.m 'TestCanaryScaleDownOnAbortNoTrafficRouting'" make test-e2e
 ```
 
+## Running the UI
+
+If you'd like to run the UI locally, you first need a running Rollouts controller. This can be a locally running controller with a k3d cluster, as described above, or a controller running in a remote Kubernetes cluster. 
+
+In order for the local React app to communicate with the controller and Kubernetes API, run the following to open a port forward to the dashboard:
+```bash
+kubectl argo rollouts dashboard
+```
+
+In another terminal, run the following to start the UI:
+```bash
+cd ui
+yarn install
+yarn start
+```
+
 ## Controller architecture
 
 Argo Rollouts is actually a collection of individual controllers

pkg/kubectl-argo-rollouts/info/rollout_info.go

@@ -29,6 +29,8 @@ func NewRolloutInfo(
 		ObjectMeta: &v1.ObjectMeta{
 			Name:              ro.Name,
 			Namespace:         ro.Namespace,
+			Labels:            ro.Labels,
+			Annotations:       ro.Annotations,
 			UID:               ro.UID,
 			CreationTimestamp: ro.CreationTimestamp,
 			ResourceVersion:   ro.ObjectMeta.ResourceVersion,

ui/package.json

@@ -4,6 +4,7 @@
     "private": true,
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "antd": "^5.4.2",

ui/src/app/App.tsx

@@ -7,7 +7,7 @@ import './App.scss';
 import {NamespaceContext, RolloutAPI} from './shared/context/api';
 import {Modal} from './components/modal/modal';
 import {Rollout} from './components/rollout/rollout';
-import {RolloutsList} from './components/rollouts-list/rollouts-list';
+import {RolloutsHome} from './components/rollouts-home/rollouts-home';
 import {Shortcut, Shortcuts} from './components/shortcuts/shortcuts';
 import {ConfigProvider} from 'antd';
 import {theme} from '../config/theme';
@@ -84,7 +84,7 @@ const App = () => {
                             <Page
                                 exact
                                 path='/:namespace?'
-                                component={<RolloutsList />}
+                                component={<RolloutsHome />}
                                 shortcuts={[
                                     {key: '/', description: 'Search'},
                                     {key: 'TAB', description: 'Search, navigate search items'},

ui/src/app/components/confirm-button/confirm-button.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {Button, Popconfirm, Tooltip} from 'antd';
 import {ButtonProps} from 'antd/es/button/button';
 import {useState} from 'react';
-import { TooltipPlacement } from 'antd/es/tooltip';
+import {TooltipPlacement} from 'antd/es/tooltip';
 
 interface ConfirmButtonProps extends ButtonProps {
     skipconfirm?: boolean;
@@ -51,7 +51,8 @@ export const ConfirmButton = (props: ConfirmButtonProps) => {
             onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-            }}>
+            }}
+        >
             <Popconfirm
                 title='Are you sure?'
                 open={open && !props.disabled}
@@ -60,7 +61,8 @@ export const ConfirmButton = (props: ConfirmButtonProps) => {
                 okText='Yes'
                 cancelText='No'
                 onOpenChange={handleOpenChange}
-                placement={props.placement || 'bottom'}>
+                placement={props.placement || 'bottom'}
+            >
                 <div>
                     <Tooltip title={props.tooltip}>
                         <Button {...buttonProps}>{props.children}</Button>

ui/src/app/components/info-item/info-item.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './info-item.scss';
-import { Tooltip } from 'antd';
+import {Tooltip} from 'antd';
 
 export enum InfoItemKind {
     Default = 'default',

ui/src/app/components/pods/pods.tsx

@@ -55,7 +55,7 @@ export const ReplicaSets = (props: {replicaSets: RolloutReplicaSetInfo[]; showRe
                         <div key={rsInfo.objectMeta.uid} style={{marginBottom: '1em'}}>
                             <ReplicaSet rs={rsInfo} showRevision={props.showRevisions} />
                         </div>
-                    )
+                    ),
             )}
         </div>
     );
@@ -84,7 +84,8 @@ export const ReplicaSet = (props: {rs: RolloutReplicaSetInfo; showRevision?: boo
                                                     <span>
                                                         Scaledown in <Duration durationMs={time} />
                                                     </span>
-                                                }>
+                                                }
+                                            >
                                                 <InfoItem content={(<Duration durationMs={time} />) as any} icon='fa fa-clock'></InfoItem>
                                             </Tooltip>
                                         );

ui/src/app/components/rollout-actions/rollout-actions.tsx

@@ -25,93 +25,95 @@ interface ActionData {
     shouldConfirm?: boolean;
 }
 
-export const RolloutActionButton = (props: {action: RolloutAction; rollout: RolloutInfo; callback?: Function; indicateLoading: boolean; disabled?: boolean}) => {
-    const api = React.useContext(RolloutAPIContext);
-    const namespaceCtx = React.useContext(NamespaceContext);
+export const RolloutActionButton = React.memo(
+    ({action, rollout, callback, indicateLoading, disabled}: {action: RolloutAction; rollout: RolloutInfo; callback?: Function; indicateLoading: boolean; disabled?: boolean}) => {
+        const [loading, setLoading] = React.useState(false);
+        const api = React.useContext(RolloutAPIContext);
+        const namespaceCtx = React.useContext(NamespaceContext);
 
-    const restartedAt = formatTimestamp(props.rollout.restartedAt || '');
-    const isDeploying = props.rollout.status === RolloutStatus.Progressing || props.rollout.status === RolloutStatus.Paused;
+        const restartedAt = formatTimestamp(rollout.restartedAt || '');
+        const isDeploying = rollout.status === RolloutStatus.Progressing || rollout.status === RolloutStatus.Paused;
 
-    const actionMap = new Map<RolloutAction, ActionData & {body?: any}>([
-        [
-            RolloutAction.Restart,
-            {
-                label: 'RESTART',
-                icon: faSync,
-                action: api.rolloutServiceRestartRollout,
-                tooltip: restartedAt === 'Never' ? 'Never restarted' : `Last restarted ${restartedAt}`,
-                shouldConfirm: true,
-            },
-        ],
-        [
-            RolloutAction.Retry,
-            {
-                label: 'RETRY',
-                icon: faRedoAlt,
-                action: api.rolloutServiceRetryRollout,
-                disabled: props.rollout.status !== RolloutStatus.Degraded,
-                shouldConfirm: true,
-            },
-        ],
-        [
-            RolloutAction.Abort,
-            {
-                label: 'ABORT',
-                icon: faExclamationCircle,
-                action: api.rolloutServiceAbortRollout,
-                disabled: !isDeploying,
-                shouldConfirm: true,
-            },
-        ],
-        [
-            RolloutAction.Promote,
-            {
-                label: 'PROMOTE',
-                icon: faChevronCircleUp,
-                action: api.rolloutServicePromoteRollout,
-                body: {full: false},
-                disabled: !isDeploying,
-                shouldConfirm: true,
-            },
-        ],
-        [
-            RolloutAction.PromoteFull,
-            {
-                label: 'PROMOTE-FULL',
-                icon: faArrowCircleUp,
-                action: api.rolloutServicePromoteRollout,
-                body: {full: true},
-                disabled: !isDeploying,
-                shouldConfirm: true,
-            },
-        ],
-    ]);
+        const actionMap = new Map<RolloutAction, ActionData & {body?: any}>([
+            [
+                RolloutAction.Restart,
+                {
+                    label: 'RESTART',
+                    icon: faSync,
+                    action: api.rolloutServiceRestartRollout,
+                    tooltip: restartedAt === 'Never' ? 'Never restarted' : `Last restarted ${restartedAt}`,
+                    shouldConfirm: true,
+                },
+            ],
+            [
+                RolloutAction.Retry,
+                {
+                    label: 'RETRY',
+                    icon: faRedoAlt,
+                    action: api.rolloutServiceRetryRollout,
+                    disabled: rollout.status !== RolloutStatus.Degraded,
+                    shouldConfirm: true,
+                },
+            ],
+            [
+                RolloutAction.Abort,
+                {
+                    label: 'ABORT',
+                    icon: faExclamationCircle,
+                    action: api.rolloutServiceAbortRollout,
+                    disabled: !isDeploying,
+                    shouldConfirm: true,
+                },
+            ],
+            [
+                RolloutAction.Promote,
+                {
+                    label: 'PROMOTE',
+                    icon: faChevronCircleUp,
+                    action: api.rolloutServicePromoteRollout,
+                    body: {full: false},
+                    disabled: !isDeploying,
+                    shouldConfirm: true,
+                },
+            ],
+            [
+                RolloutAction.PromoteFull,
+                {
+                    label: 'PROMOTE-FULL',
+                    icon: faArrowCircleUp,
+                    action: api.rolloutServicePromoteRollout,
+                    body: {full: true},
+                    disabled: !isDeploying,
+                    shouldConfirm: true,
+                },
+            ],
+        ]);
 
-    const ap = actionMap.get(props.action);
+        const ap = actionMap.get(action);
 
-    const [loading, setLoading] = React.useState(false);
-
-    return (
-        <ConfirmButton
-            style={{margin: '0 5px'}}
-            skipconfirm={!ap.shouldConfirm}
-            type='primary'
-            onClick={async (e) => {
-                setLoading(true);
-                await ap.action(ap.body || {}, namespaceCtx.namespace, props.rollout.objectMeta?.name || '');
-                if (props.callback) {
-                    await props.callback();
-                }
-                setLoading(false);
-            }}
-            disabled={ap.disabled}
-            loading={loading}
-            tooltip={ap.tooltip}
-            icon={<FontAwesomeIcon icon={ap.icon} style={{marginRight: '5px'}} />}>
-            {props.action}
-        </ConfirmButton>
-    );
-};
+        return (
+            <ConfirmButton
+                style={{margin: '0 5px'}}
+                skipconfirm={ap.shouldConfirm ? undefined : true}
+                type='primary'
+                onClick={async (e) => {
+                    setLoading(true);
+                    await ap.action(ap.body || {}, namespaceCtx.namespace, rollout.objectMeta?.name || '');
+                    if (callback) {
+                        await callback();
+                    }
+                    setLoading(false);
+                }}
+                disabled={ap.disabled}
+                loading={loading}
+                tooltip={ap.tooltip}
+                icon={<FontAwesomeIcon icon={ap.icon} style={{marginRight: '5px'}} />}
+            >
+                {action}
+            </ConfirmButton>
+        );
+    },
+);
 
 export const RolloutActions = (props: {rollout: RolloutInfo}) => (
     <div style={{display: 'flex'}}>

ui/src/app/components/rollouts-list/rollouts-list.scss → ui/src/app/components/rollout-widget/rollout-widget.scss

@@ -171,6 +171,8 @@ $colWidth: ($WIDGET_WIDTH + (2 * $widgetPadding)) + $widgetMarginRight;
             align-items: center;
             margin-top: 1.5em;
             z-index: 10 !important;
+            color: $argo-color-gray-7;
+            font-size: 14px;
         }
     }
-}
+}