feat: resource recommender using table

Author: Elessar1802

src/components/ResourceBrowser/Constants.ts

@@ -412,4 +412,5 @@ export const ResourceBrowserRouteToTabIdMap: Partial<
     '/resource-browser/:clusterId/overview': ResourceBrowserTabsId.cluster_overview,
     '/resource-browser/:clusterId/monitoring-dashboard': MONITORING_DASHBOARD_TAB_ID,
     '/resource-browser/:clusterId/terminal': ResourceBrowserTabsId.terminal,
+    '/resource-browser/:clusterId/resource-recommender': RESOURCE_RECOMMENDER_TAB_ID,
 }

src/components/ResourceBrowser/ResourceBrowser.scss

@@ -86,96 +86,6 @@
                 }
             }
         }
-
-        .scrollable-resource-list {
-            &__row {
-                width: max-content;
-                min-width: 100%;
-                display: grid;
-
-                & > :first-child {
-                    position: sticky;
-                    left: 0;
-                    z-index: 1;
-                    background-color: var(--bg-primary);
-                    border-right: 1px solid var(--border-primary);
-                    padding-left: 20px;
-                }
-
-                &:hover > :first-child {
-                    background-color: var(--bg-hover-opaque);
-                }
-
-                & > :last-child {
-                    padding-right: 20px;
-                }
-
-                &.no-hover-bg {
-                    &:hover > :first-child {
-                        background-color: var(--bg-primary);
-                    }
-                }
-            }
-        }
-
-        .scrollable-resource-list,
-        .scrollable-event-list {
-            .hover-class {
-                &:hover {
-                    background-color: var(--bg-hover);
-                    .sticky-column {
-                        background-color: var(--bg-hover);
-                    }
-
-                    .restart-icon path {
-                        stroke: var(--B500);
-                    }
-                }
-            }
-        }
-
-        .pagination-wrapper {
-            &.resource-browser-paginator {
-                .select__button {
-                    width: fit-content;
-                }
-            }
-        }
-
-        .sticky-column {
-            left: 0;
-            z-index: 1;
-            background-color: var(--bg-primary);
-        }
-
-        .event-list-row {
-            display: grid;
-            grid-template-columns: 80px minmax(200px, auto) 130px 200px 150px repeat(3, 70px);
-            column-gap: 16px;
-
-            &__explain {
-                display: grid;
-                grid-template-columns: 80px minmax(200px, auto) 130px 150px 150px repeat(4, 70px);
-                column-gap: 16px;
-
-                &:hover {
-                    .explain-ai-button {
-                        visibility: visible;
-                    }
-                }
-
-                .explain-ai-button {
-                    visibility: hidden;
-                }
-
-            }
-        }
-
-        .node-actions-menu-icon {
-            path:nth-child(2) {
-                fill: var(--N600);
-            }
-        }
     }
 }
 

src/components/ResourceBrowser/ResourceBrowser.service.tsx

@@ -97,6 +97,10 @@ export const getResourceData = async ({
 
         const response = k8sResponse.status === 'fulfilled' ? k8sResponse.value : null
 
+        if (k8sResponse.status === 'rejected') {
+            throw k8sResponse.reason
+        }
+
         if (isNamespaceList && namespaceListResponse?.status === 'fulfilled') {
             const { result } = namespaceListResponse.value
             const [{ environments }] = result

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableWrapper.tsx

@@ -1,6 +1,6 @@
-import { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, useEffect, useRef, useState } from 'react'
 
-import { SearchBar } from '@devtron-labs/devtron-fe-common-lib'
+import { SearchBar, useRegisterShortcut } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ShortcutKeyBadge } from '@Components/common/formFields/Widgets/Widgets'
 
@@ -14,6 +14,8 @@ const ClusterUpgradeCompatibilityInfoTableWrapper = ({
     const [isInputFocused, setIsInputFocused] = useState(false)
     const searchInputRef = useRef<HTMLInputElement>(null)
 
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
     const handleInputBlur = () => setIsInputFocused(false)
 
     const handleInputFocus = () => setIsInputFocused(true)
@@ -37,6 +39,15 @@ const ClusterUpgradeCompatibilityInfoTableWrapper = ({
         searchInputRef.current?.focus()
     }
 
+    useEffect(() => {
+        if (registerShortcut) {
+            registerShortcut({ keys: ['R'], callback: handleInputShortcut })
+        }
+        return (): void => {
+            unregisterShortcut(['R'])
+        }
+    }, [])
+
     return (
         <div className="resource-list-container flexbox-col flex-grow-1 border__primary--left dc__overflow-hidden">
             <div className="resource-filter-options-container flexbox w-100 px-20 py-16 dc__content-start">

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -73,6 +73,7 @@ const K8SResourceListViewWrapper = ({
     setVisibleColumns,
     updateSearchParams,
     eventType = 'warning',
+    filteredRows,
     ...restProps
 }: K8SResourceListViewWrapperProps) => (
     <div className="flexbox-col flex-grow-1 resource-list-container dc__overflow-hidden border__primary--left">
@@ -92,9 +93,9 @@ const K8SResourceListViewWrapper = ({
                 setSearchText={handleSearch}
                 isSearchInputDisabled={false}
                 renderRefreshBar={renderRefreshBar}
-                areFiltersHidden={false}
                 updateSearchParams={updateSearchParams}
                 eventType={eventType}
+                filteredRows={filteredRows}
             />
         )}
         {children}
@@ -256,7 +257,7 @@ export const K8SResourceList = ({
                               showBulkRestartOption:
                                   window._env_.FEATURE_BULK_RESTART_WORKLOADS_FROM_RB.split(',')
                                       .map((feat: string) => feat.trim().toUpperCase())
-                                      .indexOf(selectedResource.gvk.Kind.toUpperCase()) > -1,
+                                      .indexOf(selectedResource?.gvk.Kind.toUpperCase()) > -1,
                               showNodeListingOptions: isNodeListing,
                           },
                       },