Impl [Monitoring apps] add virtualization for tables

src/components/MonitoringApplicationsPage/MonitoringApplications/AllApplicationsTable.jsx

@@ -0,0 +1,144 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useMemo } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import ApplicationTableRow from '../../../elements/ApplicationTableRow/ApplicationTableRow'
+import NoData from '../../../common/NoData/NoData'
+import Table from '../../Table/Table'
+import { Loader } from 'igz-controls/components'
+
+import { MODEL_ENDPOINTS_TAB, MONITORING_APP_PAGE } from '../../../constants'
+import { createApplicationContent } from '../../../utils/createApplicationContent'
+import { saveAndTransformSearchParams } from 'igz-controls/utils/filter.util'
+import { MONITORING_APPLICATIONS_NO_DATA_MESSAGE } from '../MonitoringApplicationsPage.util'
+import { getScssVariableValue } from 'igz-controls/utils/common.util'
+import { isRowRendered, useVirtualization } from '../../../hooks/useVirtualization.hook'
+
+import PresentMetricsIcon from 'igz-controls/images/present-metrics-icon.svg?react'
+
+import '../monitoringApplicationsPage.scss'
+
+const AllApplicationsTable = ({ applications, loading, error = null }) => {
+  const params = useParams()
+  const navigate = useNavigate()
+
+  const applicationsRowHeight = useMemo(() => getScssVariableValue('--applicationRowHeight'), [])
+  const applicationRowHeightExtended = useMemo(
+    () => getScssVariableValue('--applicationRowHeightExtended'),
+    []
+  )
+  const applicationsHeaderRowHeight = useMemo(
+    () => getScssVariableValue('--applicationHeaderRowHeight'),
+    []
+  )
+
+  const applicationsTableContent = useMemo(() => {
+    return applications.map(contentItem =>
+      createApplicationContent(contentItem, params.projectName)
+    )
+  }, [applications, params.projectName])
+
+  const applicationsTableHeaders = useMemo(
+    () => applicationsTableContent[0]?.content ?? [],
+    [applicationsTableContent]
+  )
+
+  const applicationsTableActionsMenu = useMemo(
+    () => [
+      [],
+      [
+        {
+          id: 'open-metrics',
+          label: 'Open metrics',
+          icon: <PresentMetricsIcon />,
+          onClick: data =>
+            navigate(
+              `/projects/${params.projectName}/${MONITORING_APP_PAGE}/${data.name}/${MODEL_ENDPOINTS_TAB}${saveAndTransformSearchParams(
+                window.location.search,
+                true
+              )}`
+            )
+        }
+      ]
+    ],
+    [navigate, params.projectName]
+  )
+
+  const virtualizationConfig = useVirtualization({
+    rowsData: {
+      content: applicationsTableContent
+    },
+    heightData: {
+      headerRowHeight: applicationsHeaderRowHeight,
+      rowHeight: applicationsRowHeight,
+      rowHeightExtended: applicationRowHeightExtended
+    }
+  })
+
+  return (
+    <div className="monitoring-app__section-item all-applications-table">
+      <div className="section-item_title">
+        <span>All applications</span>
+      </div>
+      {applications.length === 0 && !loading ? (
+        <NoData
+          message={
+            error
+              ? 'Failed to fetch monitoring applications'
+              : MONITORING_APPLICATIONS_NO_DATA_MESSAGE
+          }
+        />
+      ) : loading ? (
+        <Loader section secondary />
+      ) : (
+        <Table
+          actionsMenu={applicationsTableActionsMenu}
+          pageData={{}}
+          tableClassName="applications-table"
+          tableHeaders={applicationsTableHeaders}
+          skipTableWrapper
+          virtualizationConfig={virtualizationConfig}
+        >
+          {applicationsTableContent.map(
+            (tableItem, index) =>
+              isRowRendered(virtualizationConfig, index) && (
+                <ApplicationTableRow
+                  actionsMenu={applicationsTableActionsMenu}
+                  key={index}
+                  rowIndex={index}
+                  rowItem={tableItem}
+                />
+              )
+          )}
+        </Table>
+      )}
+    </div>
+  )
+}
+
+AllApplicationsTable.propTypes = {
+  applications: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
+  error: PropTypes.object
+}
+
+export default AllApplicationsTable

src/components/MonitoringApplicationsPage/MonitoringApplications/MonitoringApplication/MonitoringApplication.jsx

@@ -40,7 +40,7 @@ import './monitoringApplication.scss'
 
 const MonitoringApplication = () => {
   const dispatch = useDispatch()
-  const { artifacts } = useSelector(store => store.artifactsStore)
+  const { artifacts, loading: loadingArtifacts } = useSelector(store => store.artifactsStore)
   const { monitoringApplication, loading } = useSelector(store => store.monitoringApplicationsStore)
   const params = useParams()
 
@@ -71,11 +71,17 @@ const MonitoringApplication = () => {
           <div className="section-item_title">
             <span>Artifacts</span>
           </div>
-          {artifacts.length === 0 && !loading ? (
+          {artifacts.length === 0 && !loadingArtifacts ? (
             <NoData message={MONITORING_APPLICATIONS_NO_DATA_MESSAGE} />
           ) : (
             <>
-              <SectionTable loading={loading} params={params} table={artifactsTable} />
+              <SectionTable
+                loading={loadingArtifacts}
+                params={params}
+                table={artifactsTable}
+                rowHeight={57}
+                maxTableHeight={385}
+              />
               <Link
                 className="link monitoring-app__see-all-link"
                 to={`/projects/${params.projectName}/${FILES_PAGE}?${LABELS_FILTER}=mlrun/app-name=${params.name}`}

src/components/MonitoringApplicationsPage/MonitoringApplications/MonitoringApplication/monitoringApplication.scss

@@ -1,9 +1,4 @@
-.section-table__table-body {
-  max-height: 360px;
-  overflow-y: auto;
-}
-
 .monitoring-app__see-all-link {
-  text-align: right;
   margin-top: 8px;
+  text-align: right;
 }

src/components/MonitoringApplicationsPage/MonitoringApplications/MonitoringApplications.jsx

@@ -19,71 +19,34 @@ such restriction.
 */
 import React, { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
-import ApplicationTableRow from '../../../elements/ApplicationTableRow/ApplicationTableRow'
 import MEPsWithDetections from './MEPsWithDetections'
 import NoData from '../../../common/NoData/NoData'
 import SectionTable from '../../../elements/SectionTable/SectionTable'
-import Table from '../../Table/Table'
-import { Loader, Tip } from 'igz-controls/components'
+import { Tip } from 'igz-controls/components'
+import AllApplicationsTable from './AllApplicationsTable'
 
-import { MODEL_ENDPOINTS_TAB, MONITORING_APP_PAGE } from '../../../constants'
 import { MONITORING_APPLICATIONS_NO_DATA_MESSAGE } from '../MonitoringApplicationsPage.util'
-import { createApplicationContent } from '../../../utils/createApplicationContent'
 import { generateOperatingFunctionsTable } from './monitoringApplications.util'
 import {
   removeMonitoringApplications,
   removeMEPWithDetections
 } from '../../../reducers/monitoringApplicationsReducer'
-import { saveAndTransformSearchParams } from 'igz-controls/utils/filter.util'
-
-import PresentMetricsIcon from 'igz-controls/images/present-metrics-icon.svg?react'
 
 const MonitoringApplications = () => {
   const dispatch = useDispatch()
   const params = useParams()
-  const navigate = useNavigate()
   const {
     monitoringApplications: { applications = [], operatingFunctions = [] },
     loading,
     error
   } = useSelector(store => store.monitoringApplicationsStore)
 
-  const applicationsTableActionsMenu = useMemo(
-    () => [
-      [],
-      [
-        {
-          id: 'open-metrics',
-          label: 'Open metrics',
-          icon: <PresentMetricsIcon />,
-          onClick: data =>
-            navigate(
-              `/projects/${params.projectName}/${MONITORING_APP_PAGE}/${data.name}/${MODEL_ENDPOINTS_TAB}${saveAndTransformSearchParams(
-                window.location.search,
-                true
-              )}`
-            )
-        }
-      ]
-    ],
-    [navigate, params.projectName]
-  )
   const operatingFunctionsTable = useMemo(
     () => generateOperatingFunctionsTable(operatingFunctions, params.projectName),
     [operatingFunctions, params.projectName]
   )
-  const applicationsTableContent = useMemo(() => {
-    return applications.map(contentItem =>
-      createApplicationContent(contentItem, params.projectName)
-    )
-  }, [applications, params.projectName])
-
-  const applicationsTableHeaders = useMemo(
-    () => applicationsTableContent[0]?.content ?? [],
-    [applicationsTableContent]
-  )
 
   useEffect(() => {
     return () => {
@@ -110,44 +73,17 @@ const MonitoringApplications = () => {
               }
             />
           ) : (
-            <SectionTable loading={loading} params={params} table={operatingFunctionsTable} />
+            <SectionTable
+              loading={loading}
+              params={params}
+              table={operatingFunctionsTable}
+              maxTableHeight={246}
+            />
           )}
         </div>
       </div>
       <div className="monitoring-app__section section_big">
-        <div className="monitoring-app__section-item">
-          <div className="section-item_title">
-            <span>All applications</span>
-          </div>
-          {applications.length === 0 && !loading ? (
-            <NoData
-              message={
-                error
-                  ? 'Failed to fetch monitoring applications'
-                  : MONITORING_APPLICATIONS_NO_DATA_MESSAGE
-              }
-            />
-          ) : loading ? (
-            <Loader section secondary />
-          ) : (
-            <Table
-              actionsMenu={applicationsTableActionsMenu}
-              pageData={{}}
-              tableClassName="applications-table"
-              tableHeaders={applicationsTableHeaders}
-              skipTableWrapper
-            >
-              {applicationsTableContent.map((tableItem, index) => (
-                <ApplicationTableRow
-                  actionsMenu={applicationsTableActionsMenu}
-                  key={index}
-                  rowIndex={index}
-                  rowItem={tableItem}
-                />
-              ))}
-            </Table>
-          )}
-        </div>
+        <AllApplicationsTable applications={applications} loading={loading} error={error} />
       </div>
     </div>
   )

src/components/MonitoringApplicationsPage/monitoringApplicationsPage.scss

@@ -7,6 +7,32 @@ $applicationRowHeight: variables.$rowHeight;
 $applicationHeaderRowHeight: variables.$headerRowHeight;
 $applicationRowHeightExtended: variables.$rowHeightExtended;
 
+:root {
+  --applicationRowHeight: #{$applicationRowHeight};
+  --applicationHeaderRowHeight: #{$applicationHeaderRowHeight};
+  --applicationRowHeightExtended: #{$applicationRowHeightExtended};
+}
+
+.all-applications-table {
+  max-height: 450px;
+
+  .table__flex {
+    max-height: calc(100% - 25px);
+
+    .table__content {
+      height: 100%;
+
+      & > div {
+        height: 100%;
+
+        table.applications-table {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
 .monitoring-app-content {
   .monitoring-apps-title {
     color: colors.$primary;
@@ -59,9 +85,9 @@ $applicationRowHeightExtended: variables.$rowHeightExtended;
 
       .applications-table {
         @include mixins.rowsHeight(
-                        $applicationHeaderRowHeight,
-                        $applicationRowHeight,
-                        $applicationRowHeightExtended
+          $applicationHeaderRowHeight,
+          $applicationRowHeight,
+          $applicationRowHeightExtended
         );
       }
 
@@ -92,8 +118,8 @@ $applicationRowHeightExtended: variables.$rowHeightExtended;
               left: 50%;
               font-weight: 500;
               font-size: 13px;
-            transform: translate(-50%, 0);
-          }
+              transform: translate(-50%, 0);
+            }
 
             &.loading {
               visibility: hidden;