fix: The UI crashes when trying to access some application with an em…

…pty commit message (argoproj#6756) Signed-off-by: Alexander Matyushentsev <[email protected]>
jstewart612 · Jul 19, 2021 · e251b14 · e251b14
1 parent 58ac345
commit e251b14
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 31 deletions.
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -5,5 +5,6 @@
   "singleQuote": true,
   "tabWidth": 4,
   "jsxBracketSameLine": true,
-  "quoteProps": "consistent"
+  "quoteProps": "consistent",
+  "arrowParens": "avoid"
 }
diff --git a/ui/package.json b/ui/package.json
@@ -70,7 +70,7 @@
     "superagent-promise": "^1.1.0",
     "ts-loader": "^6.0.4",
     "ts-node": "^4.1.0",
-    "tslint": "^5.16.0",
+    "tslint": "^6.1.3",
     "tslint-react": "^3.4.0",
     "typescript": "^4.0.3",
     "unidiff": "^1.0.2",
@@ -99,7 +99,7 @@
     "jest": "^24.9.0",
     "jest-transform-css": "^2.0.0",
     "postcss": "^8.2.10",
-    "prettier": "^1.18.2",
+    "prettier": "1.19",
     "react-test-renderer": "16.8.3",
     "ts-jest": "^24.1.0",
     "tslint-config-prettier": "^1.18.0",

diff --git a/ui/src/app/applications/components/application-deployment-history/revision-metadata-rows.tsx b/ui/src/app/applications/components/application-deployment-history/revision-metadata-rows.tsx
@@ -34,7 +34,7 @@ export const RevisionMetadataRows = (props: {applicationName: string; source: Ap
                     {m.message && (
                         <div className='row'>
                             <div className='columns small-3' />
-                            <div className='columns small-9'>{m.message.split('\n')[0].slice(0, 64)}</div>
+                            <div className='columns small-9'>{m.message?.split('\n')[0].slice(0, 64)}</div>
                         </div>
                     )}
                     <div className='row'>

diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.tsx b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
@@ -363,7 +363,10 @@ export class PodView extends React.Component<PodViewProps> {
                             kind: 'node',
                             name: 'Unschedulable',
                             pods: [p],
-                            info: [{name: 'Kernel Version', value: 'N/A'}, {name: 'OS/Arch', value: 'N/A'}],
+                            info: [
+                                {name: 'Kernel Version', value: 'N/A'},
+                                {name: 'OS/Arch', value: 'N/A'}
+                            ],
                             hostResourcesInfo: []
                         };
                     }

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -399,7 +399,11 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
             graph.setNode(EXTERNAL_TRAFFIC_NODE, {height: NODE_HEIGHT, width: 30, type: NODE_TYPES.externalTraffic});
             externalRoots.sort(compareNodes).forEach(root => {
                 const loadBalancers = root.networkingInfo.ingress.map(ingress => ingress.hostname || ingress.ip);
-                processNode(root, root, loadBalancers.map(lb => colorsBySource.get(lb)));
+                processNode(
+                    root,
+                    root,
+                    loadBalancers.map(lb => colorsBySource.get(lb))
+                );
                 loadBalancers.forEach(key => {
                     const loadBalancerNodeKey = `${EXTERNAL_TRAFFIC_NODE}:${key}`;
                     graph.setNode(loadBalancerNodeKey, {

diff --git a/ui/src/app/applications/components/application-status-panel/revision-metadata-panel.tsx b/ui/src/app/applications/components/application-status-panel/revision-metadata-panel.tsx
@@ -51,7 +51,7 @@ export const RevisionMetadataPanel = (props: {appName: string; type: string; rev
                         )}
                         <div className='application-status-panel__item__row'>
                             <div>Comment:</div>
-                            <div>{m.message.split('\n')[0].slice(0, 64)}</div>
+                            <div>{m.message?.split('\n')[0].slice(0, 64)}</div>
                         </div>
                     </div>
                 </Tooltip>

diff --git a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
@@ -114,7 +114,16 @@ export const ApplicationSyncPanel = ({application, selectedResource, hide}: {app
                                         </div>
                                         <label>Synchronize resources:</label>
                                         <div style={{float: 'right'}}>
-                                            <a onClick={() => formApi.setValue('resources', formApi.values.resources.map(() => true))}>all</a> /{' '}
+                                            <a
+                                                onClick={() =>
+                                                    formApi.setValue(
+                                                        'resources',
+                                                        formApi.values.resources.map(() => true)
+                                                    )
+                                                }>
+                                                all
+                                            </a>{' '}
+                                            /{' '}
                                             <a
                                                 onClick={() =>
                                                     formApi.setValue(
@@ -126,7 +135,16 @@ export const ApplicationSyncPanel = ({application, selectedResource, hide}: {app
                                                 }>
                                                 out of sync
                                             </a>{' '}
-                                            / <a onClick={() => formApi.setValue('resources', formApi.values.resources.map(() => false))}>none</a>
+                                            /{' '}
+                                            <a
+                                                onClick={() =>
+                                                    formApi.setValue(
+                                                        'resources',
+                                                        formApi.values.resources.map(() => false)
+                                                    )
+                                                }>
+                                                none
+                                            </a>
                                         </div>
                                         {!formApi.values.resources.every((item: boolean) => item) && (
                                             <div className='application-details__warning'>WARNING: partial synchronization is not recorded in history</div>

diff --git a/ui/src/app/applications/components/applications-list/applications-filter.tsx b/ui/src/app/applications/components/applications-list/applications-filter.tsx
@@ -84,9 +84,15 @@ const SyncFilter = (props: AppFilterProps) => (
         label='SYNC STATUS'
         selected={props.pref.syncFilter}
         setSelected={s => props.onChange({...props.pref, syncFilter: s})}
-        options={getOptions(props.apps, 'sync', app => app.status.sync.status, Object.keys(SyncStatuses), s => (
-            <ComparisonStatusIcon status={s as SyncStatusCode} noSpin={true} />
-        ))}
+        options={getOptions(
+            props.apps,
+            'sync',
+            app => app.status.sync.status,
+            Object.keys(SyncStatuses),
+            s => (
+                <ComparisonStatusIcon status={s as SyncStatusCode} noSpin={true} />
+            )
+        )}
     />
 );
 
@@ -95,9 +101,15 @@ const HealthFilter = (props: AppFilterProps) => (
         label='HEALTH STATUS'
         selected={props.pref.healthFilter}
         setSelected={s => props.onChange({...props.pref, healthFilter: s})}
-        options={getOptions(props.apps, 'health', app => app.status.health.status, Object.keys(HealthStatuses), s => (
-            <HealthStatusIcon state={{status: s as HealthStatusCode, message: ''}} noSpin={true} />
-        ))}
+        options={getOptions(
+            props.apps,
+            'health',
+            app => app.status.health.status,
+            Object.keys(HealthStatuses),
+            s => (
+                <HealthStatusIcon state={{status: s as HealthStatusCode, message: ''}} noSpin={true} />
+            )
+        )}
     />
 );
 
@@ -128,7 +140,11 @@ const LabelsFilter = (props: AppFilterProps) => {
 };
 
 const ProjectFilter = (props: AppFilterProps) => {
-    const [projects, loading, error] = useData(() => services.projects.list('items.metadata.name'), null, () => null);
+    const [projects, loading, error] = useData(
+        () => services.projects.list('items.metadata.name'),
+        null,
+        () => null
+    );
     const projectOptions = (projects || []).map(proj => {
         return {label: proj.metadata.name};
     });

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -860,7 +860,11 @@ export function handlePageVisibility<T>(src: () => Observable<T>): Observable<T>
         };
         const start = () => {
             ensureUnsubscribed();
-            subscription = src().subscribe((item: T) => observer.next(item), err => observer.error(err), () => observer.complete());
+            subscription = src().subscribe(
+                (item: T) => observer.next(item),
+                err => observer.error(err),
+                () => observer.complete()
+            );
         };
 
         if (!document.hidden) {

diff --git a/ui/tslint.json b/ui/tslint.json
@@ -14,7 +14,8 @@
         "max-line-length": [true, 200],
         "jsx-no-lambda": false,
         "array-type": false,
-        "max-classes-per-file": false
+        "max-classes-per-file": false,
+        "newline-per-chained-call": false
     },
     "rulesDirectory": []
 }
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -3130,11 +3130,16 @@ diff@^2.2.2:
   resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
   integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=
 
-diff@^3.1.0, diff@^3.2.0:
+diff@^3.1.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -6972,10 +6977,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
-  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
+prettier@1.19:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-error@^2.0.2:
   version "2.1.2"
@@ -9042,7 +9047,12 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.13.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
@@ -9073,23 +9083,23 @@ tslint-react@^3.4.0:
   dependencies:
     tsutils "^2.13.1"
 
-tslint@^5.16.0:
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.18.0.tgz#f61a6ddcf372344ac5e41708095bbf043a147ac6"
-  integrity sha512-Q3kXkuDEijQ37nXZZLKErssQVnwCV/+23gFEMROi8IlbaBG6tXqLPQJ5Wjcyt/yHPKBC+hD5SzuGaMora+ZS6w==
+tslint@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-6.1.3.tgz#5c23b2eccc32487d5523bd3a470e9aa31789d904"
+  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     builtin-modules "^1.1.1"
     chalk "^2.3.0"
     commander "^2.12.1"
-    diff "^3.2.0"
+    diff "^4.0.1"
     glob "^7.1.1"
     js-yaml "^3.13.1"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
+    mkdirp "^0.5.3"
     resolve "^1.3.2"
     semver "^5.3.0"
-    tslib "^1.8.0"
+    tslib "^1.13.0"
     tsutils "^2.29.0"
 
 tsutils@^2.13.1, tsutils@^2.29.0: