Add some UI for the extension

Signed-off-by: Alexandre Gaudreault <[email protected]>
argoproj · May 2, 2024 · b1d0963 · b1d0963
1 parent ee5195b
commit b1d0963
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/ui/src/app/components/rollout/rollout.scss b/ui/src/app/components/rollout/rollout.scss
@@ -97,6 +97,10 @@
                 padding-bottom: 4px;
                 font-size: 14px;
             }
+
+            &-value {
+                white-space: pre-wrap;
+            }
         }
     }
 

diff --git a/ui/src/app/components/rollout/rollout.tsx b/ui/src/app/components/rollout/rollout.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
+import * as YAML from 'yaml';
 import {Helmet} from 'react-helmet';
 import {useParams} from 'react-router-dom';
 import {
     GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1CanaryStep,
     GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1HeaderRoutingMatch,
     GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1RolloutExperimentTemplate,
     GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1SetMirrorRoute,
+    GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1PluginStep,
     RolloutReplicaSetInfo,
     RolloutRolloutInfo,
     RolloutServiceApi,
@@ -316,6 +318,7 @@ const Step = (props: {step: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1
     const [openAnalysis, setOpenAnalysis] = React.useState(false);
     const [openHeader, setOpenHeader] = React.useState(false);
     const [openMirror, setOpenMirror] = React.useState(false);
+    const [openPlugin, setOpenPlugin] = React.useState(false);
 
     let icon: string;
     let content = '';
@@ -359,6 +362,11 @@ const Step = (props: {step: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1
         }
     }
 
+    if (props.step.plugin) {
+        content = `${props.step.plugin.name}`;
+        icon = 'fa-puzzle-piece';
+    }
+
     return (
         <React.Fragment>
             <div style={{zIndex: 1}} className={`steps__step ${props.complete ? 'steps__step--complete' : ''} ${props.current ? 'steps__step--current' : ''}`}>
@@ -368,7 +376,8 @@ const Step = (props: {step: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1
                         (props.step.setCanaryScale && openCanary) ||
                         (props.step.analysis && openAnalysis) ||
                         (props.step.setHeaderRoute && openHeader) ||
-                        (props.step.setMirrorRoute && openMirror)
+                        (props.step.setMirrorRoute && openMirror) ||
+                        (props.step.plugin && openPlugin)
                             ? 'steps__step-title--experiment'
                             : ''
                     }`}
@@ -395,6 +404,11 @@ const Step = (props: {step: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1
                             <i className={`fa ${openCanary ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'}`} />
                         </div>
                     )}
+                    {props.step.plugin && props.step.plugin.config && (
+                        <div style={{marginLeft: 'auto'}} onClick={() => setOpenPlugin(!openPlugin)}>
+                            <i className={`fa ${openPlugin ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'}`} />
+                        </div>
+                    )}
                 </div>
                 {props.step.experiment?.templates && (
                     <div className='steps__step__content'>
@@ -419,6 +433,7 @@ const Step = (props: {step: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1
                     </div>
                 )}
                 {props.step?.setCanaryScale && openCanary && <WidgetItem values={props.step.setCanaryScale} />}
+                {props.step?.plugin && openPlugin && <WidgetItemPlugin values={props.step.plugin} />}
                 {props.step?.setHeaderRoute && openHeader && <WidgetItemSetHeader values={props.step.setHeaderRoute.match} />}
                 {props.step?.setMirrorRoute && openMirror && <WidgetItemSetMirror value={props.step.setMirrorRoute} />}
             </div>
@@ -563,3 +578,13 @@ const WidgetItemSetHeader = ({values}: {values: GithubComArgoprojArgoRolloutsPkg
         </div>
     );
 };
+
+const WidgetItemPlugin = ({values}: {values: GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1PluginStep}) => {
+    if (!values.config) return null;
+    return (
+        <div>
+            <div className='steps__step__content-title'>CONFIG</div>
+            <div className='steps__step__content-value'>{YAML.stringify(values.config)}</div>
+        </div>
+    );
+};