mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Clean up pods component code
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
89bcd96a23
commit
2c58082b6b
@ -3,17 +3,13 @@
|
|||||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// import "./pods.scss";
|
|
||||||
|
|
||||||
import React, { Fragment } from "react";
|
import React, { Fragment } from "react";
|
||||||
import { disposeOnUnmount, observer } from "mobx-react";
|
import { disposeOnUnmount, observer } from "mobx-react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { KubeObjectListLayout } from "../kube-object-list-layout";
|
|
||||||
import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
|
import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
|
||||||
import { StatusBrick } from "../status-brick";
|
import { StatusBrick } from "../status-brick";
|
||||||
import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils";
|
import { cssNames, object, stopPropagation } from "../../utils";
|
||||||
import startCase from "lodash/startCase";
|
import startCase from "lodash/startCase";
|
||||||
import kebabCase from "lodash/kebabCase";
|
|
||||||
import type { ApiManager } from "../../../common/k8s-api/api-manager";
|
import type { ApiManager } from "../../../common/k8s-api/api-manager";
|
||||||
import { KubeObjectStatusIcon } from "../kube-object-status-icon";
|
import { KubeObjectStatusIcon } from "../kube-object-status-icon";
|
||||||
import { Badge } from "../badge";
|
import { Badge } from "../badge";
|
||||||
@ -35,18 +31,6 @@ import subscribeToStoresDisposersInjectable from "../../kube-watch-api/subscribe
|
|||||||
import { KubeObjectMenu } from "../kube-object-menu";
|
import { KubeObjectMenu } from "../kube-object-menu";
|
||||||
import toggleKubeDetailsPaneInjectable, { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";
|
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 {
|
interface Dependencies {
|
||||||
getDetailsUrl: GetDetailsUrl;
|
getDetailsUrl: GetDetailsUrl;
|
||||||
apiManager: ApiManager;
|
apiManager: ApiManager;
|
||||||
@ -158,32 +142,12 @@ class NonInjectedPods extends React.Component<Dependencies> {
|
|||||||
render() {
|
render() {
|
||||||
const { podStore } = this.props;
|
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 = [
|
const columns = [
|
||||||
columnHelper.accessor(row => row.getName(), {
|
columnHelper.accessor(row => row.getName(), {
|
||||||
id: "name",
|
id: "name",
|
||||||
header: "Name",
|
header: "Name",
|
||||||
cell: info => (
|
cell: info => (
|
||||||
|
// TODO: Multi-line table cells
|
||||||
// <span style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
// <span style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
||||||
// {info.getValue()}
|
// {info.getValue()}
|
||||||
// </span>
|
// </span>
|
||||||
@ -268,99 +232,6 @@ class NonInjectedPods extends React.Component<Dependencies> {
|
|||||||
</SiblingsInTabLayout>
|
</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, {
|
export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user