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

Clean up pods component code

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-26 16:54:12 +03:00
parent 89bcd96a23
commit 2c58082b6b
1 changed files with 2 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,17 +3,13 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
// import "./pods.scss";
import React, { Fragment } from "react";
import { disposeOnUnmount, observer } from "mobx-react";
import { Link } from "react-router-dom";
import { KubeObjectListLayout } from "../kube-object-list-layout";
import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
import { StatusBrick } from "../status-brick";
import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils";
import { cssNames, object, stopPropagation } from "../../utils";
import startCase from "lodash/startCase";
import kebabCase from "lodash/kebabCase";
import type { ApiManager } from "../../../common/k8s-api/api-manager";
import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { Badge } from "../badge";
@ -35,18 +31,6 @@ import subscribeToStoresDisposersInjectable from "../../kube-watch-api/subscribe
import { KubeObjectMenu } from "../kube-object-menu";
import toggleKubeDetailsPaneInjectable, { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";
enum columnId {
name = "name",
namespace = "namespace",
containers = "containers",
restarts = "restarts",
age = "age",
qos = "qos",
node = "node",
owners = "owners",
status = "status",
}
interface Dependencies {
getDetailsUrl: GetDetailsUrl;
apiManager: ApiManager;
@ -158,32 +142,12 @@ class NonInjectedPods extends React.Component<Dependencies> {
render() {
const { podStore } = this.props;
// const cols = React.useMemo<ColumnDef<Pod>[]>(() => ([
// {
// header: "Name",
// cell: (pod) => pod.getValue()
// },
// {
// id: "warning",
// cell: props => <KubeObjectStatusIcon key="icon" object={props.row.original} />,
// enableSorting: false,
// enableResizing: false,
// minSize: 30,
// size: 30
// },
// {
// header: "Namespace",
// cell: info => info.getValue(),
// minSize: 110
// },
// ]), []);
const columns = [
columnHelper.accessor(row => row.getName(), {
id: "name",
header: "Name",
cell: info => (
// TODO: Multi-line table cells
// <span style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
// {info.getValue()}
// </span>
@ -268,99 +232,6 @@ class NonInjectedPods extends React.Component<Dependencies> {
</SiblingsInTabLayout>
);
}
render1() {
const { apiManager, getDetailsUrl, podStore, eventStore, nodeApi } = this.props;
return (
<SiblingsInTabLayout>
<KubeObjectListLayout
className="Pods"
store={podStore}
dependentStores={[eventStore]} // status icon component uses event store
tableId = "workloads_pods"
isConfigurable
sortingCallbacks={{
[columnId.name]: pod => getConvertedParts(pod.getName()),
[columnId.namespace]: pod => pod.getNs(),
[columnId.containers]: pod => pod.getContainerStatuses().length,
[columnId.restarts]: pod => pod.getRestartsCount(),
[columnId.owners]: pod => pod.getOwnerRefs().map(ref => ref.kind),
[columnId.qos]: pod => pod.getQosClass(),
[columnId.node]: pod => pod.getNodeName(),
[columnId.age]: pod => -pod.getCreationTimestamp(),
[columnId.status]: pod => pod.getStatusMessage(),
}}
searchFilters={[
pod => pod.getSearchFields(),
pod => pod.getStatusMessage(),
pod => pod.status?.podIP,
pod => pod.getNodeName(),
]}
renderHeaderTitle="Pods"
renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: columnId.name },
{ title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
{ title: "Containers", className: "containers", sortBy: columnId.containers, id: columnId.containers },
{ title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts },
{ title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners },
{ title: "Node", className: "node", sortBy: columnId.node, id: columnId.node },
{ title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]}
renderTableContents={pod => [
<Badge
flat
key="name"
label={pod.getName()}
tooltip={pod.getName()}
expandable={false}
/>,
<KubeObjectStatusIcon key="icon" object={pod} />,
pod.getNs(),
this.renderContainersStatus(pod),
pod.getRestartsCount(),
pod.getOwnerRefs().map(ref => {
const { kind, name } = ref;
const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod));
return (
<Badge
flat
key={name}
className="owner"
tooltip={name}
>
<Link to={detailsLink} onClick={stopPropagation}>
{kind}
</Link>
</Badge>
);
}),
pod.getNodeName() ? (
<Badge
flat
key="node"
className="node"
tooltip={pod.getNodeName()}
expandable={false}
>
<Link to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
{pod.getNodeName()}
</Link>
</Badge>
)
: "",
pod.getQosClass(),
<KubeObjectAge key="age" object={pod} />,
{ title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) },
]}
/>
</SiblingsInTabLayout>
);
}
}
export const Pods = withInjectables<Dependencies>(NonInjectedPods, {