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

fix namespace selector performance issues on large clusters

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-12-15 13:39:43 +02:00
parent f6193718ff
commit e89a5e4f20
2 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/components/+namespaces/namespace-select-filter.tsx
View File

@ -35,6 +35,10 @@ import { isMac } from "../../../common/vars";
const Placeholder = observer((props: PlaceholderProps<any, boolean>) => {
const getPlaceholder = (): React.ReactNode => {
if (props.isFocused) {
return <>Search Namespaces ...</>;
}
const namespaces = namespaceStore.contextNamespaces;
if (namespaceStore.areAllSelectedImplicitly || !namespaces.length) {
@ -91,7 +95,11 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
disposeOnUnmount(this, [
reaction(() => this.isMenuOpen, newVal => {
if (newVal) { // rising edge of selection
if (namespaceStore.areAllSelectedImplicitly) {
this.selected.replace([""]);
} else {
this.selected.replace(namespaceStore.selectedNames);
}
this.didToggle = false;
}
}),
@ -99,21 +107,23 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
}
formatOptionLabel({ value: namespace, label }: SelectOption) {
let isSelected = false;
if (namespace) {
const isSelected = namespaceStore.hasContext(namespace);
isSelected = !namespaceStore.areAllSelectedImplicitly && namespaceStore.hasContext(namespace);
} else {
isSelected = namespaceStore.areAllSelectedImplicitly;
}
return (
<div className="flex gaps align-center">
<Icon small material="layers" />
<span>{namespace}</span>
<Icon small material={ namespace ? "layers" : "panorama_wide_angle" } />
<span>{label}</span>
{isSelected && <Icon small material="check" className="box right" />}
</div>
);
}
return label;
}
@action
onChange = ([{ value: namespace }]: SelectOption[]) => {
if (namespace) {

21
src/renderer/components/+namespaces/namespace-select.tsx
View File

@ -53,7 +53,7 @@ export class NamespaceSelect extends React.Component<Props> {
@computed.struct get options(): SelectOption[] {
const { customizeOptions, showAllNamespacesOption, sort } = this.props;
let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName(), label: ns.getName() }));
if (sort) {
options.sort(sort);
@ -82,6 +82,24 @@ export class NamespaceSelect extends React.Component<Props> {
);
};
filterOption = (option: SelectOption, rawInput: string) => {
if (option.value === "" || (!namespaceStore.areAllSelectedImplicitly && namespaceStore.selectedNames.has(option.value))) {
return true;
}
if (namespaceStore.items.length > 500 && rawInput.length < 3) {
return false;
}
if (rawInput && !option.value.includes(rawInput)) {
return false;
}
console.log("raw", rawInput);
return true;
};
render() {
const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
@ -92,6 +110,7 @@ export class NamespaceSelect extends React.Component<Props> {
formatOptionLabel={this.formatOptionLabel}
options={this.options}
components={components}
filterOption={this.filterOption}
{...selectProps}
/>
);