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

Make search work

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-24 11:09:33 +03:00
parent 9eaa8d52b6
commit 894e0435d9
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+workloads-pods/pods.tsx
View File

@ -242,7 +242,7 @@ class NonInjectedPods extends React.Component<Dependencies> {
data={podStore.contextItems} data={podStore.contextItems}
title="Pods" title="Pods"
filters={[ filters={[
// pod => pod.getSearchFields(), pod => pod.getSearchFields(),
pod => pod.getStatusMessage(), pod => pod.getStatusMessage(),
pod => pod.status?.podIP || "", pod => pod.status?.podIP || "",
pod => pod.getNodeName() || "", pod => pod.getNodeName() || "",

39
src/renderer/components/list/list.tsx
View File

@ -6,12 +6,16 @@
import styles from "./list.module.scss"; import styles from "./list.module.scss";
import themeStyles from "./table-theme.module.scss"; import themeStyles from "./table-theme.module.scss";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { SearchInput, SearchInputUrl } from "../input"; import { SearchInputUrl } from "../input";
import type { TableOptions } from '@tanstack/react-table' import type { TableOptions } from '@tanstack/react-table'
import { TableList } from "../table-list/table-list"; import { TableList } from "../table-list/table-list";
import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter"; import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
import { withInjectables } from "@ogre-tools/injectable-react";
import { FilterType, PageFiltersStore } from "../item-object-list/page-filters/store";
import pageFiltersStoreInjectable from "../item-object-list/page-filters/store.injectable";
import { observer } from "mobx-react";
export type SearchFilter<T> = (item: T) => string; export type SearchFilter<T> = (item: T) => string;
@ -20,12 +24,22 @@ export interface ListProps<T> extends TableOptions<T> {
title?: React.ReactNode; title?: React.ReactNode;
} }
export function List<T>({ columns, data, title, filters }: ListProps<T>) { interface Dependencies {
pageFiltersStore: PageFiltersStore;
}
export function NonInjectedList<T>({ columns, data, title, filters, pageFiltersStore }: ListProps<T> & Dependencies) {
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const query = search.toLowerCase();
useEffect(() => {
const searchFilter = pageFiltersStore.activeFilters.find(({ type }) => type === FilterType.SEARCH);
const searchValue = searchFilter?.value ?? "";
setSearch(searchValue);
}, [pageFiltersStore.activeFilters]);
const filteredData = data.filter((item, index) => ( const filteredData = data.filter((item, index) => (
filters.some(getText => String(getText(data[index])).toLowerCase().includes(query)) filters.some(getText => String(getText(data[index])).toLowerCase().includes(search.toLowerCase()))
)); ));
return ( return (
@ -40,13 +54,6 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
<div className={styles.controls}> <div className={styles.controls}>
<NamespaceSelectFilter id="object-list-layout-namespace-select-input" /> <NamespaceSelectFilter id="object-list-layout-namespace-select-input" />
<SearchInputUrl /> <SearchInputUrl />
{/*
<SearchInput
value={search}
theme="round-black"
onChange={setSearch}
className={styles.searchInput}
/> */}
</div> </div>
</div> </div>
<TableList <TableList
@ -60,3 +67,11 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
</div> </div>
); );
} }
export const List = withInjectables<Dependencies, ListProps<any>>(
observer(NonInjectedList), {
getProps: (di, props) => ({
...props,
pageFiltersStore: di.inject(pageFiltersStoreInjectable),
}),
})