Improve performance for large dashboards

CHANGELOG.md

@@ -64,6 +64,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#147](https://github.com/kobsio/kobs/pull/147): Improve query performance for ClickHouse plugin and allow custom values for the maximum amount of documents, which should be returned (see [#133](https://github.com/kobsio/kobs/pull/133)).
 - [#148](https://github.com/kobsio/kobs/pull/148): Improve reliability of kobs, by do not checking the database connection for a configured ClickHouse instance.
 - [#150](https://github.com/kobsio/kobs/pull/150): :warning: *Breaking change:* :warning: The ClickHouse plugin can now only be used together with the [kobsio/fluent-bit-clickhouse](https://github.com/kobsio/fluent-bit-clickhouse) output plugin for [Fluent Bit](https://fluentbit.io). For raw SQL queries against a ClickHouse instance the SQL plugin added in [#149](https://github.com/kobsio/kobs/pull/149) can be used.
+- [#152](https://github.com/kobsio/kobs/pull/152): Improve performance for large dashboards and open Application page in gallery view.
 
 ## [v0.5.0](https://github.com/kobsio/kobs/releases/tag/v0.5.0) (2021-08-03)
 

plugins/applications/src/components/panel/ApplicationsGallery.tsx

@@ -11,15 +11,13 @@ interface IApplicationsGalleryProps {
   clusters: string[];
   namespaces: string[];
   team?: IReference;
-  showDetails?: (details: React.ReactNode) => void;
 }
 
 // ApplicationsGallery is the component to display all applications inside a gallery view.
 const ApplicationsGallery: React.FunctionComponent<IApplicationsGalleryProps> = ({
   clusters,
   namespaces,
   team,
-  showDetails,
 }: IApplicationsGalleryProps) => {
   const times: IPluginTimes = {
     time: 'last15Minutes',
@@ -99,7 +97,7 @@ const ApplicationsGallery: React.FunctionComponent<IApplicationsGalleryProps> =
     <Gallery hasGutter={true}>
       {data.map((application, index) => (
         <GalleryItem key={index}>
-          <ApplicationsGalleryItem times={times} application={application} showDetails={showDetails} />
+          <ApplicationsGalleryItem times={times} application={application} />
         </GalleryItem>
       ))}
     </Gallery>

plugins/applications/src/components/panel/ApplicationsGalleryItem.tsx

@@ -2,13 +2,11 @@ import { Card, CardBody, CardTitle } from '@patternfly/react-core';
 import React from 'react';
 
 import { IPluginTimes, LinkWrapper, PluginPreview } from '@kobsio/plugin-core';
-import Details from './details/Details';
 import { IApplication } from '../../utils/interfaces';
 
 interface IApplicationsGalleryItemProps {
   times: IPluginTimes;
   application: IApplication;
-  showDetails?: (details: React.ReactNode) => void;
 }
 
 // ApplicationsGalleryItem renders a single application in a Card component. With the title of the application and the
@@ -17,55 +15,35 @@ interface IApplicationsGalleryItemProps {
 const ApplicationsGalleryItem: React.FunctionComponent<IApplicationsGalleryItemProps> = ({
   times,
   application,
-  showDetails,
 }: IApplicationsGalleryItemProps) => {
-  const cardBody = (
-    <CardBody style={{ height: '150px', maxHeight: '150px', minHeight: '150px' }}>
-      {application.preview ? (
-        <div style={{ height: '124px', overflow: 'hidden' }}>
-          <PluginPreview
-            times={times}
-            title={application.preview.title}
-            name={application.preview.plugin.name}
-            options={application.preview.plugin.options}
-          />
-        </div>
-      ) : application.description ? (
-        <div style={{ height: '124px', overflow: 'scroll' }}>{application.description}</div>
-      ) : (
-        <div style={{ height: '124px', overflow: 'scroll' }}>
-          `${application.namespace} (${application.cluster})`
-        </div>
-      )}
-    </CardBody>
-  );
-
-  // If the component is used withour a selectApplication function we wrap the card inside our LinkWrapper component, so
-  // that the user is redirected to the application page, when he selects the card. This is done, so that we can use the
-  // same component for the applications gallery view, where the application should be shown in the drawer and the teams
-  // view, where the user should be redirected to the applications page.
-  if (!showDetails) {
-    return (
-      <LinkWrapper link={`/applications/${application.cluster}/${application.namespace}/${application.name}`}>
-        <Card isHoverable={true}>
-          <CardTitle>{application.name}</CardTitle>
-          {cardBody}
-        </Card>
-      </LinkWrapper>
-    );
-  }
-
   return (
-    <Card
-      style={{ cursor: 'pointer' }}
-      isHoverable={true}
-      onClick={(): void =>
-        showDetails(<Details application={application} close={(): void => showDetails(undefined)} />)
-      }
-    >
-      <CardTitle>{application.name}</CardTitle>
-      {cardBody}
-    </Card>
+    <LinkWrapper link={`/applications/${application.cluster}/${application.namespace}/${application.name}`}>
+      <Card isHoverable={true}>
+        <CardTitle className="pf-u-text-truncate">
+          {application.name}
+          <br />
+          <span className="pf-u-font-size-sm pf-u-color-400">
+            {application.namespace} ({application.cluster})
+          </span>
+        </CardTitle>
+        <CardBody style={{ height: '150px', maxHeight: '150px', minHeight: '150px' }}>
+          {application.preview ? (
+            <div style={{ height: '124px', overflow: 'hidden' }}>
+              <PluginPreview
+                times={times}
+                title={application.preview.title}
+                name={application.preview.plugin.name}
+                options={application.preview.plugin.options}
+              />
+            </div>
+          ) : application.description ? (
+            <div style={{ height: '124px', overflow: 'scroll' }}>{application.description}</div>
+          ) : (
+            <div style={{ height: '124px', overflow: 'scroll' }}></div>
+          )}
+        </CardBody>
+      </Card>
+    </LinkWrapper>
   );
 };
 

plugins/applications/src/components/panel/Panel.tsx

@@ -75,7 +75,6 @@ export const Panel: React.FunctionComponent<IPanelProps> = ({
       clusters={options.clusters || [defaults.cluster]}
       namespaces={options.namespaces || [defaults.namespace]}
       team={options.team}
-      showDetails={showDetails}
     />
   );
 

plugins/dashboards/package.json

@@ -17,6 +17,7 @@
     "@types/react-router-dom": "^5.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-intersection-observer": "^8.32.1",
     "react-query": "^3.17.2",
     "react-router-dom": "^5.2.0",
     "typescript": "^4.3.4"

plugins/dashboards/src/components/dashboards/Dashboard.tsx

@@ -1,6 +1,7 @@
 import { Alert, AlertActionLink, AlertVariant, Grid, GridItem, Spinner, Title } from '@patternfly/react-core';
 import { QueryObserverResult, useQuery } from 'react-query';
 import React, { memo, useContext, useState } from 'react';
+import { InView } from 'react-intersection-observer';
 
 import {
   ClustersContext,
@@ -197,23 +198,39 @@ const Dashboard: React.FunctionComponent<IDashboardProps> = ({
                 span={toGridSpans(12, forceDefaultSpan, panel.colSpan)}
                 rowSpan={toGridSpans(1, forceDefaultSpan, panel.rowSpan)}
               >
-                <div
-                  style={
-                    row.size !== undefined && row.size === -1
-                      ? undefined
-                      : { height: rowHeight(row.size, panel.rowSpan), overflow: 'scroll' }
-                  }
-                >
-                  <PluginPanel
-                    defaults={defaults}
-                    times={times}
-                    title={panel.title}
-                    description={panel.description}
-                    name={panel.plugin.name}
-                    options={panel.plugin.options}
-                    showDetails={showDetails}
-                  />
-                </div>
+                <InView>
+                  {({ inView, ref }): React.ReactNode => (
+                    <div ref={ref}>
+                      {inView ? (
+                        <div
+                          style={
+                            row.size !== undefined && row.size === -1
+                              ? undefined
+                              : { height: rowHeight(row.size, panel.rowSpan), overflow: 'scroll' }
+                          }
+                        >
+                          <PluginPanel
+                            defaults={defaults}
+                            times={times}
+                            title={panel.title}
+                            description={panel.description}
+                            name={panel.plugin.name}
+                            options={panel.plugin.options}
+                            showDetails={showDetails}
+                          />
+                        </div>
+                      ) : (
+                        <div
+                          style={
+                            row.size !== undefined && row.size === -1
+                              ? undefined
+                              : { height: rowHeight(row.size, panel.rowSpan), overflow: 'scroll' }
+                          }
+                        ></div>
+                      )}
+                    </div>
+                  )}
+                </InView>
               </GridItem>
             ))}
           </React.Fragment>

yarn.lock

@@ -12434,6 +12434,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-intersection-observer@^8.32.1:
+  version "8.32.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.1.tgz#9b949871eb35eb1fc730732bbf8fcfaaaf3f5b02"
+  integrity sha512-FOmMkMw7MeJ8FkuADpU8TRcvGuTvPB+DRkaikS1QXcWArYLCWC3mjRorq2XeRGBuqmaueOBd27PUazTu9AgInw==
+
 react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"