fix(ui): Fix editor. Fixes #5613 Fixes #5617 (#5620)

argoproj · Apr 8, 2021 · b76fac7 · b76fac7
1 parent 9d175cf
commit b76fac7
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 70 deletions.
diff --git a/docs/fields.md b/docs/fields.md
@@ -2018,8 +2018,6 @@ Outputs hold parameters, artifacts, and results from a step
 
 - [`dag-conditional-parameters.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/dag-conditional-parameters.yaml)
 
-- [`data-transformations.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/data-transformations.yaml)
-
 - [`expression-tag-template-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/expression-tag-template-workflow.yaml)
 
 - [`fibonacci-seq-conditional-param.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/fibonacci-seq-conditional-param.yaml)
@@ -3475,8 +3473,6 @@ ValueFrom describes a location in which to obtain the value to a parameter
 
 - [`dag-conditional-parameters.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/dag-conditional-parameters.yaml)
 
-- [`data-transformations.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/data-transformations.yaml)
-
 - [`expression-tag-template-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/expression-tag-template-workflow.yaml)
 
 - [`fibonacci-seq-conditional-param.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/fibonacci-seq-conditional-param.yaml)
@@ -3604,6 +3600,8 @@ MetricLabel is a single label for a prometheus metric
 
 - [`dag-conditional-parameters.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/dag-conditional-parameters.yaml)
 
+- [`data-transformations.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/data-transformations.yaml)
+
 - [`expression-tag-template-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/expression-tag-template-workflow.yaml)
 
 - [`hello-world.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/hello-world.yaml)
@@ -6084,8 +6082,6 @@ EnvVarSource represents a source for the value of an EnvVar.
 
 - [`dag-conditional-parameters.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/dag-conditional-parameters.yaml)
 
-- [`data-transformations.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/data-transformations.yaml)
-
 - [`expression-tag-template-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/expression-tag-template-workflow.yaml)
 
 - [`fibonacci-seq-conditional-param.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/fibonacci-seq-conditional-param.yaml)

diff --git a/examples/data-transformations.yaml b/examples/data-transformations.yaml
@@ -3,68 +3,59 @@ apiVersion: argoproj.io/v1alpha1
 kind: Workflow
 metadata:
   generateName: data-transformations-
+  labels:
+    workflows.argoproj.io/test: "true"
+  annotations:
+    workflows.argoproj.io/description: |
+      This workflow demonstrates using a data template to list in an S3 bucket
+      and then process those log files.
+    workflows.argoproj.io/version: ">= 3.1.0"
+    workflows.argoproj.io/verify.py: |
+      assert status["phase"] == "Succeeded"
 spec:
   entrypoint: data-transformations
   templates:
     - name: data-transformations
       steps:
-        - - name: generate-artifact
-            template: generate-artifacts
-        - - name: process-artifact
-            template: process-message
-            withParam: "{{steps.generate-artifact.outputs.result}}"
+        - - name: list-log-files
+            template: list-log-files
+        - - name: process-logs
+            template: process-logs
+            withParam: "{{steps.list-log-files.outputs.result}}"
             arguments:
               artifacts:
                 - name: file
                   s3:
-                    bucket: test
                     key: "{{item}}"
-                    endpoint: minio:9000
-                    insecure: true
-                    accessKeySecret:
-                      name: my-minio-cred
-                      key: accesskey
-                    secretKeySecret:
-                      name: my-minio-cred
-                      key: secretkey
 
               parameters:
                 - name: file-name
                   value: "{{item}}"
 
-    - name: generate-artifacts
+    - name: list-log-files
       data:
         source:
           artifactPaths:
             name: test-bucket
             s3:
-              bucket: test
-              endpoint: minio:9000
-              insecure: true
-              accessKeySecret:
-                name: my-minio-cred
-                key: accesskey
-              secretKeySecret:
-                name: my-minio-cred
-                key: secretkey
+              bucket: my-bucket
 
         transformation:
-          - expression: "filter(data, {# endsWith \".py\"})"
+          - expression: "filter(data, {# endsWith \"main.log\"})"
 
-    - name: process-message
+    - name: process-logs
       inputs:
         parameters:
           - name: file-name
         artifacts:
           - name: file
             path: /file
       container:
-        image: alpine:latest
-        command: [sh, -c]
-        args: ["cat /file && echo \"{{inputs.parameters.file-name}}.processed\" | tee /tmp/f.txt"]
-      outputs:
-        parameters:
-          - name: processed
-            valueFrom:
-              path: /tmp/f.txt
+        image:  argoproj/argosay:v2
+        command: [ sh, -c ]
+        args:
+          - |
+            echo {{inputs.parameters.file-name}}
+            head /file
+
 
diff --git a/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx b/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx
@@ -21,7 +21,7 @@ export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; o
                     icon='plus'
                     onClick={() => {
                         services.cronWorkflows
-                            .create(cronWorkflow, cronWorkflow.metadata.namespace)
+                            .create(cronWorkflow, Utils.getNamespace(cronWorkflow.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

diff --git a/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx b/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx
@@ -265,7 +265,7 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
                         nodeGenresTitle={'Type'}
                         nodeGenres={genres}
                         nodeClassNamesTitle={'Status'}
-                        nodeClassNames={{Pending: true, Ready: true, Running: true, Failed: true, Succeeded: true, Error: true}}
+                        nodeClassNames={{'': true, 'Pending': true, 'Ready': true, 'Running': true, 'Failed': true, 'Succeeded': true, 'Error': true}}
                         iconShapes={{workflow: 'circle', collapsed: 'circle', conditions: 'circle'}}
                         horizontal={true}
                         selectedNode={selectedNode}

diff --git a/ui/src/app/event-sources/components/event-source-creator.tsx b/ui/src/app/event-sources/components/event-source-creator.tsx
@@ -20,7 +20,7 @@ export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; on
                     icon='plus'
                     onClick={() => {
                         services.eventSource
-                            .create(eventSource, eventSource.metadata.namespace)
+                            .create(eventSource, Utils.getNamespace(eventSource.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

diff --git a/ui/src/app/sensors/components/sensor-creator.tsx b/ui/src/app/sensors/components/sensor-creator.tsx
@@ -20,7 +20,7 @@ export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreat
                     icon='plus'
                     onClick={() => {
                         services.sensor
-                            .create(sensor, sensor.metadata.namespace)
+                            .create(sensor, Utils.getNamespace(sensor.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

diff --git a/ui/src/app/shared/components/filter-drop-down.tsx b/ui/src/app/shared/components/filter-drop-down.tsx
@@ -28,13 +28,13 @@ export const FilterDropDown = (props: FilterDropDownProps) => {
                     .filter(item => item.values)
                     .map((item, i) => (
                         <div key={i}>
-                            <li className={classNames('top-bar__filter-item', {title: true})}>
+                            <li key={i} className={classNames('top-bar__filter-item', {title: true})}>
                                 <span>{item.title}</span>
                             </li>
                             {Object.entries(item.values)
                                 .sort()
                                 .map(([label, checked]) => (
-                                    <li className={classNames('top-bar__filter-item')}>
+                                    <li key={label} className={classNames('top-bar__filter-item')}>
                                         <React.Fragment>
                                             <Checkbox id={`filter__${label}`} checked={checked} onChange={v => item.onChange(label, v)} />
                                             <label htmlFor={`filter__${label}`}>{label}</label>

diff --git a/ui/src/app/shared/components/object-editor/object-editor.tsx b/ui/src/app/shared/components/object-editor/object-editor.tsx
@@ -9,7 +9,7 @@ import {PhaseIcon} from '../phase-icon';
 import {ToggleButton} from '../toggle-button';
 
 interface Props<T> {
-    type: string;
+    type?: string;
     value: T;
     buttons?: React.ReactNode;
     onChange?: (value: T) => void;
@@ -26,6 +26,13 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
     useEffect(() => storage.setItem('lang', lang, defaultLang), [lang]);
     useEffect(() => setText(stringify(value, lang)), [value]);
     useEffect(() => setText(stringify(parse(text), lang)), [lang]);
+    useEffect(() => {
+        // we ONLY want to change the text, if the normalized version has changed, this prevents white-space changes
+        // from resulting in a significant change
+        if (text !== stringify(parse(editor.current.editor.getValue()), lang)) {
+            editor.current.editor.setValue(text);
+        }
+    }, [text, lang]);
 
     useEffect(() => {
         if (type && lang === 'json') {
@@ -79,31 +86,29 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
                         scrollBeyondLastLine: true
                     }}
                     onChange={v => {
-                        try {
-                            onChange(parse(v));
-                            setError(null);
-                        } catch (e) {
-                            setError(e);
+                        if (onChange) {
+                            try {
+                                onChange(parse(v));
+                                setError(null);
+                            } catch (e) {
+                                setError(e);
+                            }
                         }
                     }}
                 />
             </div>
-            <div style={{paddingTop: '1em'}}>
-                {error && (
-                    <>
-                        <PhaseIcon value='Error' /> {error.message}
-                    </>
-                )}
-            </div>
-            <div>
-                {onChange && (
-                    <>
-                        <i className='fa fa-info-circle' />{' '}
-                        {lang === 'json' ? <>Full auto-completion enabled.</> : <>Basic completion for YAML. Switch to JSON for full auto-completion.</>}
-                    </>
-                )}{' '}
-                <a href='https://argoproj.github.io/argo-workflows/ide-setup/'>Learn how to get auto-completion in your IDE.</a>
-            </div>
+            {error && (
+                <div style={{paddingTop: '1em'}}>
+                    <PhaseIcon value='Error' /> {error.message}
+                </div>
+            )}
+            {onChange && (
+                <div>
+                    <i className='fa fa-info-circle' />{' '}
+                    {lang === 'json' ? <>Full auto-completion enabled.</> : <>Basic completion for YAML. Switch to JSON for full auto-completion.</>}{' '}
+                    <a href='https://argoproj.github.io/argo-workflows/ide-setup/'>Learn how to get auto-completion in your IDE.</a>
+                </div>
+            )}
         </>
     );
 };
diff --git a/ui/src/app/workflow-templates/components/workflow-template-creator.tsx b/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
@@ -21,7 +21,7 @@ export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: strin
                     icon='plus'
                     onClick={() => {
                         services.workflowTemplate
-                            .create(template, template.metadata.namespace)
+                            .create(template, Utils.getNamespace(template.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -106,7 +106,7 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
                             icon='plus'
                             onClick={() => {
                                 services.workflows
-                                    .create(workflow, workflow.metadata.namespace)
+                                    .create(workflow, Utils.getNamespace(workflow.metadata.namespace))
                                     .then(onCreate)
                                     .catch(setError);
                             }}>