feat: show degraded resource list

Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com>
ashutosh16 · Sep 28, 2023 · 4b470e3 · 4b470e3
1 parent 4ae0cc3
commit 4b470e3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 19 deletions.
diff --git a/...c/app/applications/components/application-resources-overview/resource-state-overview.scss b/...c/app/applications/components/application-resources-overview/resource-state-overview.scss
@@ -1,23 +1,11 @@
 @import 'node_modules/argo-ui/src/styles/config';
-@import 'node_modules/foundation-sites/scss/util/util';
-@import 'node_modules/argo-ui/src/styles/theme';
 
 
 .resource-state-overview {
-    font-size: 0.95em;
-    @include themify($themes) {
-        background-color: themed('background-2');
-        color: themed('text-1');
-    }
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-    border-left: 5px solid $argo-color-gray-4;
-    flex-wrap: nowrap;
-    flex-shrink: 1;
-    &__lineitem {
-        display: flex;
-        margin: auto;
+    &__lineitem{
+        border-left: 5px solid $argo-color-gray-4;
         justify-content: center;
-        line-height: 1.5em;
+
         &--Gray {
             border-left-color: $argo-color-gray-5;
         }

diff --git a/...rc/app/applications/components/application-resources-overview/resource-state-overview.tsx b/...rc/app/applications/components/application-resources-overview/resource-state-overview.tsx
@@ -81,12 +81,12 @@ export const ResourceStateOverview = ({app, treeNodes}: {app: models.Application
                         treeNodes
                             .filter(rNode => rNode?.health?.status === 'Degraded' || rNode?.health?.status === 'Unknown')
                             .map(res => (
-                                <div key={res.uid} className={`argo-table-list__row resource-state-overview__state--${expandedResourceStatus === res.name ? 'Error' : 'Gray'}`}>
+                                <div key={res.uid} className={`argo-table-list__row resource-state-overview__lineitem resource-state-overview__lineitem--${expandedResourceStatus === res.name ? 'Error' : 'Gray'}`}>
                                     <div className='row'>
                                         <div className='columns small-2 xxlarge-2'>{res?.name}</div>
                                         <div className='columns small-1 xxlarge-1'>{res?.kind}</div>
                                         <div className='columns small-2 xxlarge-2'>{res?.health.status}</div>
-                                        <div className='columns small-2 xxlarge-2' style={{whiteSpace: 'normal', lineHeight: 'normal'}}>
+                                        <div className='columns small-2 xxlarge-2'>
                                             {res?.health?.message}
                                         </div>
                                         <div className='columns small-2 xxlarge-2'>
@@ -104,12 +104,12 @@ export const ResourceStateOverview = ({app, treeNodes}: {app: models.Application
                                                         <a
                                                             className='fa-solid fa-circle-dot fa-fade'
                                                             onClick={() =>
-                                                                ctx.apis.navigation.goto('.', {node: nodeKey(res), tab: 'events', resourceState: 'false'}, {replace: true})
+                                                                ctx.apis.navigation.goto('.', {node: nodeKey(res), resourceState: 'false', tab: 'events'}, {replace: true})
                                                             }></a>
                                                     </div>
                                                 </React.Fragment>
                                             ) : (
-                                                'No Events'
+                                                'No events available'
                                             )}
                                         </div>
                                     </div>