1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
lens/src/renderer/components/+workloads-replicasets/replicaset-details.tsx
Roman d656a9e289
Upgrade to webpack@5 (#4725)
* attempt to upgrade webpack@5 and all relevant packages to latest version -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* debugging webpack@5 usage -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* - attempt to use "react-refresh-typescript" with webpack@5 thingy
- extending getTSLoader() to accept more options from ts-loader

Signed-off-by: Roman <ixrock@gmail.com>

* more fixes, updating webpack loaders

Signed-off-by: Roman <ixrock@gmail.com>

* merge-fixes, using internal webpack@5 asset handlers (type: "asset/*")

Signed-off-by: Roman <ixrock@gmail.com>

* fix: raw-loader / <Icon svg="./*">, updated mocked types for importing resources via webpack

Signed-off-by: Roman <ixrock@gmail.com>

* removing webpack-dev-server, clean up

Signed-off-by: Roman <ixrock@gmail.com>

* fix master-merge conflict

Signed-off-by: Roman <ixrock@gmail.com>

* fix/reverted: use sourceMap for styles

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* fix: loading svg icons inline as data-url (workaround for "?raw" as it fails in tests and "!!raw-loader!" seems doesn't work at all in webpack@5)

Signed-off-by: Roman <ixrock@gmail.com>

* attempt to use webpack-dev-server via node-api -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* attempt to use webpack-dev-server via node-api -- part 2

Signed-off-by: Roman <ixrock@gmail.com>

* fix: incorrect parsing svg-icon xml-content by <HotbarEntityIcon/>

Signed-off-by: Roman <ixrock@gmail.com>

* fix: more random fixes related to incorrect parsing svg-icon content, added static Icon.isSvg(content: string)

Signed-off-by: Roman <ixrock@gmail.com>

* attempt to fix: "Uncaught (in promise) DOMException: A network error occurred." when loading cluster frame -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* fix: loading cluster frame + error in loading terminal default font (which was causing network exception error and hidden cluster-view)
fix: proxying websockets (e.g. terminal)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: wait lensProxy.listen() to obtain lensProxy.port for webpack-dev-server

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* fix unit tests

Signed-off-by: Roman <ixrock@gmail.com>

* reverted auto-formatted imports with 2 lines (.idea/webstorm)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: handle warnings in main-process compilation files

Signed-off-by: Roman <ixrock@gmail.com>

* fix: handle warnings in "renderer" compilation

Signed-off-by: Roman <ixrock@gmail.com>

* fix: move app fonts preloading into html/css files, clean up

Signed-off-by: Roman <ixrock@gmail.com>

* update "webpack@5", "typescript@4.5" in bundled extensions / attempt to fix weird errors in build pipeline:

ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/common/catalog/catalog-category-registry.d.ts
6:27-35
[tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/common/catalog/catalog-category-registry.d.ts(6,28)
      TS1005: ',' expected.

ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/components/select/select.d.ts
8:14-28
[tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/components/select/select.d.ts(8,15)
      TS1005: ',' expected.

ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/api/catalog-entity-registry.d.ts
8:14-22
[tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/api/catalog-entity-registry.d.ts(8,15)
      TS1005: ',' expected.

Signed-off-by: Roman <ixrock@gmail.com>

* fix: handle errors in bundled extensions compilation process

Signed-off-by: Roman <ixrock@gmail.com>

* fix: "webpack" not found in production

Signed-off-by: Roman <ixrock@gmail.com>

* fix: removed preloading fonts in template via <link preload> since it's not bundled with HtmlWebpackPlugin() anyway anda all fonts loaded via css @font-face rule

Signed-off-by: Roman <ixrock@gmail.com>

* apply HMR at least for css/styles and use manual page reload on app/scripts change

Signed-off-by: Roman <ixrock@gmail.com>

* use `react-refresh-typescript` and `@pmmmwh/react-refresh-webpack-plugin` to support HMR in most cases

Signed-off-by: Roman <ixrock@gmail.com>

* responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

* revered extension version in package-lock.json (autoupdated on `make dev`)

Signed-off-by: Roman <ixrock@gmail.com>
2022-02-15 17:04:12 +02:00

147 lines
4.9 KiB
TypeScript

/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import "./replicaset-details.scss";
import React from "react";
import { makeObservable, observable, reaction } from "mobx";
import { DrawerItem } from "../drawer";
import { Badge } from "../badge";
import { replicaSetStore } from "./replicasets.store";
import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
import { disposeOnUnmount, observer } from "mobx-react";
import { podsStore } from "../+workloads-pods/pods.store";
import type { KubeObjectDetailsProps } from "../kube-object-details";
import { getMetricsForReplicaSets, type IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { KubeObjectMeta } from "../kube-object-meta";
import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
import { boundMethod, Disposer } from "../../utils";
import logger from "../../../common/logger";
import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
import type { KubeObject } from "../../../common/k8s-api/kube-object";
import { withInjectables } from "@ogre-tools/injectable-react";
import kubeWatchApiInjectable
from "../../kube-watch-api/kube-watch-api.injectable";
interface Props extends KubeObjectDetailsProps<ReplicaSet> {
}
interface Dependencies {
subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer
}
@observer
class NonInjectedReplicaSetDetails extends React.Component<Props & Dependencies> {
@observable metrics: IPodMetrics = null;
constructor(props: Props & Dependencies) {
super(props);
makeObservable(this);
}
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => this.props.object, () => {
this.metrics = null;
}),
this.props.subscribeStores([
podsStore,
]),
]);
}
@boundMethod
async loadMetrics() {
const { object: replicaSet } = this.props;
this.metrics = await getMetricsForReplicaSets([replicaSet], replicaSet.getNs(), "");
}
render() {
const { object: replicaSet } = this.props;
if (!replicaSet) {
return null;
}
if (!(replicaSet instanceof ReplicaSet)) {
logger.error("[ReplicaSetDetails]: passed object that is not an instanceof ReplicaSet", replicaSet);
return null;
}
const { metrics } = this;
const { status } = replicaSet;
const { availableReplicas, replicas } = status;
const selectors = replicaSet.getSelectors();
const nodeSelector = replicaSet.getNodeSelectors();
const images = replicaSet.getImages();
const childPods = replicaSetStore.getChildPods(replicaSet);
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.ReplicaSet);
return (
<div className="ReplicaSetDetails">
{!isMetricHidden && podsStore.isLoaded && (
<ResourceMetrics
loader={this.loadMetrics}
tabs={podMetricTabs} object={replicaSet} params={{ metrics }}
>
<PodCharts/>
</ResourceMetrics>
)}
<KubeObjectMeta object={replicaSet}/>
{selectors.length > 0 &&
<DrawerItem name="Selector" labelsOnly>
{
selectors.map(label => <Badge key={label} label={label}/>)
}
</DrawerItem>
}
{nodeSelector.length > 0 &&
<DrawerItem name="Node Selector" labelsOnly>
{
nodeSelector.map(label => <Badge key={label} label={label}/>)
}
</DrawerItem>
}
{images.length > 0 &&
<DrawerItem name="Images">
{
images.map(image => <p key={image}>{image}</p>)
}
</DrawerItem>
}
<DrawerItem name="Replicas">
{`${availableReplicas || 0} current / ${replicas || 0} desired`}
</DrawerItem>
<PodDetailsTolerations workload={replicaSet}/>
<PodDetailsAffinities workload={replicaSet}/>
<DrawerItem name="Pod Status" className="pod-status">
<PodDetailsStatuses pods={childPods}/>
</DrawerItem>
<ResourceMetricsText metrics={metrics}/>
<PodDetailsList pods={childPods} owner={replicaSet}/>
</div>
);
}
}
export const ReplicaSetDetails = withInjectables<Dependencies, Props>(
NonInjectedReplicaSetDetails,
{
getProps: (di, props) => ({
subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
...props,
}),
},
);