hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Catalog render optimizations (#3422)

Browse Source
This commit is contained in:
Alex Andreev 2021-07-21 15:51:46 +03:00 committed by GitHub
parent 86db8e5e2c
commit 4fe0a7d73e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 268 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
__mocks__/windowMock.ts Normal file
View File

@ -0,0 +1,32 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
Object.defineProperty(window, "requestIdleCallback", {
writable: true,
value: jest.fn().mockImplementation(callback => callback()),
});
Object.defineProperty(window, "cancelIdleCallback", {
writable: true,
value: jest.fn(),
});
export default {};

3
package.json
View File

@ -63,7 +63,8 @@
},
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
"\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts"
"\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts",
"src/(.*)": "<rootDir>/__mocks__/windowMock.ts"
},
"modulePathIgnorePatterns": [
"<rootDir>/dist",

6
src/common/user-store/user-store.ts
View File

@ -137,7 +137,11 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
* Toggles the hidden configuration of a table's column
*/
toggleTableColumnVisibility(tableId: string, columnId: string) {
this.hiddenTableColumns.get(tableId)?.toggle(columnId);
if (!this.hiddenTableColumns.get(tableId)) {
this.hiddenTableColumns.set(tableId, new ObservableToggleSet());
}
this.hiddenTableColumns.get(tableId).toggle(columnId);
}
@action

5
src/renderer/components/+catalog/catalog-tree.module.css
View File

@ -46,6 +46,11 @@
border-radius: 2px;
}
.content:active {
color: white;
background-color: var(--blue);
}
.group {
margin-left: 0px;
}

197
src/renderer/components/+catalog/catalog.tsx
View File

@ -42,6 +42,9 @@ import { CatalogEntityDetails } from "./catalog-entity-details";
import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
import { CatalogMenu } from "./catalog-menu";
import { HotbarIcon } from "../hotbar/hotbar-icon";
import { RenderDelay } from "../render-delay/render-delay";
import { CatalogTopbar } from "../cluster-manager/catalog-topbar";
import type { TableSortCallback } from "../table";
export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
@ -144,7 +147,9 @@ export class Catalog extends React.Component<Props> {
};
renderNavigation() {
return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
return (
<CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>
);
}
renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
@ -172,110 +177,73 @@ export class Catalog extends React.Component<Props> {
renderIcon(item: CatalogEntityItem<CatalogEntity>) {
return (
<HotbarIcon
uid={`catalog-icon-${item.getId()}`}
title={item.getName()}
source={item.source}
src={item.entity.spec.icon?.src}
material={item.entity.spec.icon?.material}
background={item.entity.spec.icon?.background}
size={24}
/>
<RenderDelay>
<HotbarIcon
uid={`catalog-icon-${item.getId()}`}
title={item.getName()}
source={item.source}
src={item.entity.spec.icon?.src}
material={item.entity.spec.icon?.material}
background={item.entity.spec.icon?.background}
size={24}
/>
</RenderDelay>
);
}
renderSingleCategoryList() {
return (
<ItemListLayout
key={this.catalogEntityStore.activeCategory.getId()}
tableId={`catalog-items-${this.catalogEntityStore.activeCategory?.metadata.name.replace(" ", "")}`}
renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name}
isSelectable={false}
isConfigurable={true}
className="CatalogItemList"
store={this.catalogEntityStore}
sortingCallbacks={{
[sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
[sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
[sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
}}
searchFilters={[
(entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
]}
renderTableHeader={[
{ title: "", className: css.iconCell, id: "icon" },
{ title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
{ title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
{ title: "Labels", className: css.labelsCell, id: "labels" },
{ title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
]}
customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
disabled: !item.enabled,
})}
renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
this.renderIcon(item),
item.name,
item.source,
item.getLabelBadges(),
{ title: item.phase, className: cssNames(css[item.phase]) }
]}
onDetails={this.onDetails}
renderItemMenu={this.renderItemMenu}
/>
);
}
renderList() {
const { activeCategory } = this.catalogEntityStore;
const tableId = activeCategory ? `catalog-items-${activeCategory.metadata.name.replace(" ", "")}` : "catalog-items";
let sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
[sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
[sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
[sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
};
renderAllCategoriesList() {
return (
<ItemListLayout
key="all"
renderHeaderTitle={"Browse All"}
isSelectable={false}
isConfigurable={true}
className="CatalogItemList"
store={this.catalogEntityStore}
tableId="catalog-items"
sortingCallbacks={{
[sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
[sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
[sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
[sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
}}
searchFilters={[
(entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
]}
renderTableHeader={[
{ title: "", className: css.iconCell, id: "icon" },
{ title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
{ title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
{ title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
{ title: "Labels", className: css.labelsCell, id: "labels" },
{ title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
]}
customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
disabled: !item.enabled,
})}
renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
this.renderIcon(item),
item.name,
item.kind,
item.source,
item.getLabelBadges(),
{ title: item.phase, className: cssNames(css[item.phase]) }
]}
detailsItem={this.catalogEntityStore.selectedItem}
onDetails={this.onDetails}
renderItemMenu={this.renderItemMenu}
/>
);
}
sortingCallbacks = activeCategory ? sortingCallbacks : {
...sortingCallbacks,
[sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
};
renderCategoryList() {
if (this.activeTab === undefined) {
return null;
}
return this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList();
return (
<ItemListLayout
tableId={tableId}
renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
isSelectable={false}
isConfigurable={true}
className="CatalogItemList"
store={this.catalogEntityStore}
sortingCallbacks={sortingCallbacks}
searchFilters={[
(entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
]}
renderTableHeader={[
{ title: "", className: css.iconCell, id: "icon" },
{ title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
!activeCategory && { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
{ title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
{ title: "Labels", className: css.labelsCell, id: "labels" },
{ title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
].filter(Boolean)}
customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
disabled: !item.enabled,
})}
renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
this.renderIcon(item),
item.name,
!activeCategory && item.kind,
item.source,
item.getLabelBadges(),
{ title: item.phase, className: cssNames(css[item.phase]) }
].filter(Boolean)}
onDetails={this.onDetails}
renderItemMenu={this.renderItemMenu}
/>
);
}
render() {
@ -284,21 +252,28 @@ export class Catalog extends React.Component<Props> {
}
return (
<MainLayout sidebar={this.renderNavigation()}>
<div className="p-6 h-full">
{ this.renderCategoryList() }
</div>
{
this.catalogEntityStore.selectedItem
? <CatalogEntityDetails
item={this.catalogEntityStore.selectedItem}
hideDetails={() => this.catalogEntityStore.selectedItemId = null}
/>
: <CatalogAddButton
category={this.catalogEntityStore.activeCategory}
/>
}
</MainLayout>
<>
<CatalogTopbar/>
<MainLayout sidebar={this.renderNavigation()}>
<div className="p-6 h-full">
{ this.renderList() }
</div>
{
this.catalogEntityStore.selectedItem
? <CatalogEntityDetails
item={this.catalogEntityStore.selectedItem}
hideDetails={() => this.catalogEntityStore.selectedItemId = null}
/>
: (
<RenderDelay>
<CatalogAddButton
category={this.catalogEntityStore.activeCategory}
/>
</RenderDelay>
)
}
</MainLayout>
</>
);
}
}

6
src/renderer/components/cluster-manager/cluster-manager.scss
View File

@ -35,10 +35,6 @@
position: relative;
display: flex;
flex-direction: column;
> * {
z-index: 1;
}
}
.HotbarMenu {
@ -52,7 +48,7 @@
#lens-views {
position: absolute;
left: 0;
top: 0;
top: 40px; // Move below top bar
right: 0;
bottom: 0;
display: flex;

4
src/renderer/components/cluster-manager/cluster-manager.tsx
View File

@ -34,8 +34,6 @@ import { Extensions } from "../+extensions";
import { HotbarMenu } from "../hotbar/hotbar-menu";
import { EntitySettings } from "../+entity-settings";
import { Welcome } from "../+welcome";
import { ClusterTopbar } from "./cluster-topbar";
import { CatalogTopbar } from "./catalog-topbar";
import * as routes from "../../../common/routes";
@observer
@ -43,8 +41,6 @@ export class ClusterManager extends React.Component {
render() {
return (
<div className="ClusterManager">
<Route component={CatalogTopbar} {...routes.catalogRoute} />
<Route component={ClusterTopbar} {...routes.clusterViewRoute} />
<main>
<div id="lens-views"/>
<Switch>

2
src/renderer/components/cluster-manager/cluster-view.tsx
View File

@ -34,6 +34,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { navigate } from "../../navigation";
import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
import { previousActiveTab } from "../+catalog";
import { ClusterTopbar } from "./cluster-topbar";
interface Props extends RouteComponentProps<ClusterViewRouteParams> {
}
@ -104,6 +105,7 @@ export class ClusterView extends React.Component<Props> {
render() {
return (
<div className="ClusterView flex column align-center">
<ClusterTopbar {...this.props}/>
{this.renderStatus()}
</div>
);

1
src/renderer/components/input/input.scss
View File

@ -61,7 +61,6 @@
width: 0;
height: 2px;
background: $primary;
transition: width 250ms;
}
}

51
src/renderer/components/menu/menu-actions.tsx
View File

@ -30,6 +30,7 @@ import { Icon, IconProps } from "../icon";
import { Menu, MenuItem, MenuProps } from "../menu";
import uniqueId from "lodash/uniqueId";
import isString from "lodash/isString";
import { RenderDelay } from "../render-delay/render-delay";
export interface MenuActionsProps extends Partial<MenuProps> {
className?: string;
@ -124,30 +125,32 @@ export class MenuActions extends React.Component<MenuActionsProps> {
return (
<>
{this.renderTriggerIcon()}
<Menu
htmlFor={this.id}
isOpen={this.isOpen} open={this.toggle} close={this.toggle}
className={menuClassName}
usePortal={autoClose}
closeOnScroll={autoClose}
closeOnClickItem={autoCloseOnSelect ?? autoClose }
closeOnClickOutside={autoClose}
{...menuProps}
>
{children}
{updateAction && (
<MenuItem onClick={updateAction}>
<Icon material="edit" interactive={toolbar} tooltip="Edit"/>
<span className="title">Edit</span>
</MenuItem>
)}
{removeAction && (
<MenuItem onClick={this.remove}>
<Icon material="delete" interactive={toolbar} tooltip="Delete"/>
<span className="title">Remove</span>
</MenuItem>
)}
</Menu>
<RenderDelay>
<Menu
htmlFor={this.id}
isOpen={this.isOpen} open={this.toggle} close={this.toggle}
className={menuClassName}
usePortal={autoClose}
closeOnScroll={autoClose}
closeOnClickItem={autoCloseOnSelect ?? autoClose }
closeOnClickOutside={autoClose}
{...menuProps}
>
{children}
{updateAction && (
<MenuItem onClick={updateAction}>
<Icon material="edit" interactive={toolbar} tooltip="Edit"/>
<span className="title">Edit</span>
</MenuItem>
)}
{removeAction && (
<MenuItem onClick={this.remove}>
<Icon material="delete" interactive={toolbar} tooltip="Delete"/>
<span className="title">Remove</span>
</MenuItem>
)}
</Menu>
</RenderDelay>
</>
);
}

2
src/renderer/components/menu/menu.tsx
View File

@ -260,6 +260,8 @@ export class Menu extends React.Component<MenuProps, State> {
}
onBlur() {
if (!this.isOpen) return; // Prevents triggering document.activeElement for each <Menu/> instance
if (document.activeElement?.tagName == "IFRAME") {
this.close();
}

38
src/renderer/components/render-delay/__tests__/render-delay.test.tsx Normal file
View File

@ -0,0 +1,38 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import { RenderDelay } from "../render-delay";
describe("<RenderDelay/>", () => {
it("renders w/o errors", () => {
const { container } = render(<RenderDelay><button>My button</button></RenderDelay>);
expect(container).toBeInstanceOf(HTMLElement);
});
it("renders it's child", () => {
const { getByText } = render(<RenderDelay><button>My button</button></RenderDelay>);
expect(getByText("My button")).toBeInTheDocument();
});
});

63
src/renderer/components/render-delay/render-delay.tsx Normal file
View File

@ -0,0 +1,63 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import { makeObservable, observable } from "mobx";
import { observer } from "mobx-react";
import { boundMethod } from "../../utils";
interface Props {
placeholder?: React.ReactNode;
children: unknown;
}
@observer
export class RenderDelay extends React.Component<Props> {
@observable isVisible = false;
constructor(props: Props) {
super(props);
makeObservable(this);
}
componentDidMount() {
const guaranteedFireTime = 1000;
window.requestIdleCallback(this.showContents, { timeout: guaranteedFireTime });
}
componentWillUnmount() {
window.cancelIdleCallback(this.showContents);
}
@boundMethod
showContents() {
this.isVisible = true;
}
render() {
if (!this.isVisible) {
return this.props.placeholder || null;
}
return this.props.children;
}
}

5
types/dom.d.ts vendored
View File

@ -24,4 +24,9 @@ declare global {
interface Element {
scrollIntoViewIfNeeded(opt_center?: boolean): void;
}
interface Window {
requestIdleCallback(callback: () => void, options: { timeout: number });
cancelIdleCallback(callback: () => void);
}
}