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

Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)

Browse Source 
* Turn on strict mode in tsconfig.json

- Add route, clusterRoute, and payloadValidatedClusterRoute helper
  functions to improve types with backend routes

- Turn on the following new lints:
  - react/jsx-first-prop-new-line
  - react/jsx-wrap-multilines
  - react/jsx-one-expression-per-line
  - react/jsx-max-props-per-line
  - react/jsx-indent
  - react/jsx-indent-props

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix build

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Replace KubeObject scope strings with enum

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Revert package.json version changes

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* revert move hostedCluster(Id)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* change some type param names to be not single letters

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove copy-extension-themes

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* add new make clean action

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix build to not use webpack for generating types

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix kube-object-menu.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix select.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix catalog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* revert move fileNameMigration to index

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix ref logic error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix log-resource-selector.test.tsx tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix dock-store.test.ts test by overriding createStorage to not touch file system

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix cluster.test.ts tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix kube=api.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fixed hotbar-store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix kubeconfig-manager.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix cluster-role-bindings/__tests__/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix role-bindings/__tests__/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix pods.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix delete-cluster-dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix daemonset.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix replicaset.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix statefulsets/dialog/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix replicasets/scale-dialog/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix deployments.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix deployments/scale/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix cronjob.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix stateful-set.api.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix deployment.api.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix api-manager.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix statefulset.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix job.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix pods.store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix scroll-spy.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix hotbar-remove-command.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix catalog-entity-registry.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix welcome.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix verify-that-all-routes-have-route-component.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix pod-tolerations.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* better fix for previous 3 fixes, plus also select.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix kube-object-menu.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix app-paths.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix dock-tabs.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix isReactNode typing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix sub-title.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix drawer.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix list-layout.tsx and header.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix error-boundary.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix upgrade-chart/store.ts and dock-tab.store.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix install-chart/store.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix edit-resource/store.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix create-resource/store.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix namespace-select.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix namespace-select-filter.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix crd-list.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix wrong types for extensions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix circular dependency

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix circular dependency on catalogCategoryRegistry

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix api-kube

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix type errors, most <Select /> errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fixing more type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* some more fixing type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* convert all KubeApis to injectable with legacy global backups

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* factor out into a common file all the exports

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* convert all KubeObjectStores to injectable with legacy global backups

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix lint

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove unused legacy KubeApi globals

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix bad previous commit

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* more crash fixing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* try and fix behavioural tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix sidebar-and-tab-navigation-for-core.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix sidebar-and-tab-navigation-for-extensions.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-using-application-menu.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix catalog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* extensions.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix catalog-entity-registry.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-using-application-menu.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix log-resource-selector.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix dock-tabs.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix delete-cluster-dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-kubernetes-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-editor-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-proxy-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-using-application-menu.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-application-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix dock-store.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix select.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix role-bindings/__tests__/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix hotbar-remove-command.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix cluster-role-bindings/__tests__/dialog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-extension-specific-preferences.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-telemetry-preferences.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix closing-preferences.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-editor-preferences.test.ts

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix navigation-to-proxy-preferences.test.ts

- Fix other type errors too

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* final tweaks

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add more tsconfig files, fix bug in <Catalog>

- Make all of history, navigation injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Convert all of kube-details-params/ and navigate/ to injectable

- This fixes a runtime error that was encountered during testing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix runtime errors on renderer

- remove all static uses of `createPageParam` (and then removed the
  legacy global)
- Made LensRendererExtension and LensMainExtension just used
  dependencies and not the getLegacyDi
- Fixed circular dep in extension-loader

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Move registerStore calls to after injectMany

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* replace all the rest of the legacy uses of apiManager

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix stack overflow and cycles in DI

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix NamespaceSelectFilter not opening

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix WizardStep and AddNamespaceDialog

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix KubeApi's not being registered

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* cleanup WindowManager

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Proper fix for Wizard, fix NamespaceStore.subscribe

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Rewrite withTooltip to be more type correct

- Fixes mobx related "too many recursive actions" error

- Change all the uses of withTooltips to be functional components

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add e2e test to cover kube api registration

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* cleanup internal-commands

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove cast in <Animate>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix command-palette e2e test

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix type error after rebase

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix test name

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix lint

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix code to help CodeQL scanner

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* update intree extension lock files

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix build-extensions picking wrong @types/react

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix tests from rebase

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix type error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Make KubeconfigSyncManager more injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix crash in test mode for Dialog

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* make Select snapshots deterministic

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix new type error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix kube-object.store.test.ts typing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix merge build issues

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix snapshots after merge

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix lint after merge

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* reexport BaseKubeJsonApiObjectMetadata

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix typo in terminalSpawningPool

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove duplicate license header

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix typo to waitUntilDefined

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove iter use from getLegacyGlobalDiForExtensionApi

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove complex createStorage override

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* override logger with mocks only when needed for tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove specialized overrideStore flags for getDiForUnitTesting

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove unnecessary | undefined types from the exactOptionalFieldTypes experiment

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* use more descriptive name for local test mocks

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove unnecessary addition to 'make clean' target

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove oddity of KubeObjectStore.getById(undefined) being allowed

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* rename KubeObject.getDescriptor in favour of name without fundemental JS meaning

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Simplify legacyRegisterApi when working in behaviour unit tests

- Don't emit within main environment as there should be no auto
  registering there

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* change confusing variable name in ReactiveDuration

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* make visitor pattern more explicit for Entity contextMenuOpen

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* toggleDetails -> toggleKubeDetailsPane is more specific

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* remove outdated comment

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix bug where LensExtension dependencies are not set

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix tests from the revert of react 18

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix more tests from merge

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix typings with new is-compatible-extension tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* more type fixing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Revert in-tree extension versions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Improve name of guarding injectable for stores and apis

- New name better implies that it is just a guard state and does not do
  anything

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add helper for <Select>.isMulti for storing in a Set<Value>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix is-compatible-extension.test.ts types

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and GitHub committed 2022-05-16 07:17:57 -04:00
1 parent 381d77c633
commit dfcb7c3330
1062 files changed
+26512 -28689
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/renderer/components/+workloads-pods/__tests__/pod-tolerations.test.tsx
+12 -17
View File
@@ -6,7 +6,7 @@
import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { fireEvent } from "@testing-library/react";
import type { IToleration } from "../../../../common/k8s-api/workload-kube-object";
import type { Toleration } from "../../../../common/k8s-api/kube-object";
import { PodTolerations } from "../pod-tolerations";
import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
import type { DiRender } from "../../test-utils/renderFor";
@@ -19,7 +19,7 @@ jest.mock("electron", () => ({
},
}));
const tolerations: IToleration[] =[
const tolerations: Toleration[] =[
{
key: "CriticalAddonsOnly",
operator: "Exist",
@@ -40,12 +40,7 @@ describe("<PodTolerations />", () => {
beforeEach(async () => {
const di = getDiForUnitTesting({ doGeneralOverrides: true });
di.override(
directoryForLensLocalStorageInjectable,
() => "some-directory-for-lens-local-storage",
);
await di.runSetups();
di.override(directoryForLensLocalStorageInjectable, () => "some-directory-for-lens-local-storage" );
render = renderFor(di);
});
@@ -60,15 +55,15 @@ describe("<PodTolerations />", () => {
const { container } = render(<PodTolerations tolerations={tolerations} />);
const rows = container.querySelectorAll(".TableRow");
expect(rows[0].querySelector(".key").textContent).toBe("CriticalAddonsOnly");
expect(rows[0].querySelector(".operator").textContent).toBe("Exist");
expect(rows[0].querySelector(".effect").textContent).toBe("NoExecute");
expect(rows[0].querySelector(".seconds").textContent).toBe("3600");
expect(rows[0].querySelector(".key")?.textContent).toBe("CriticalAddonsOnly");
expect(rows[0].querySelector(".operator")?.textContent).toBe("Exist");
expect(rows[0].querySelector(".effect")?.textContent).toBe("NoExecute");
expect(rows[0].querySelector(".seconds")?.textContent).toBe("3600");
expect(rows[1].querySelector(".key").textContent).toBe("node.kubernetes.io/not-ready");
expect(rows[1].querySelector(".operator").textContent).toBe("NoExist");
expect(rows[1].querySelector(".effect").textContent).toBe("NoSchedule");
expect(rows[1].querySelector(".seconds").textContent).toBe("7200");
expect(rows[1].querySelector(".key")?.textContent).toBe("node.kubernetes.io/not-ready");
expect(rows[1].querySelector(".operator")?.textContent).toBe("NoExist");
expect(rows[1].querySelector(".effect")?.textContent).toBe("NoSchedule");
expect(rows[1].querySelector(".seconds")?.textContent).toBe("7200");
});
it("sorts table properly", () => {
@@ -80,6 +75,6 @@ describe("<PodTolerations />", () => {
const rows = container.querySelectorAll(".TableRow");
expect(rows[0].querySelector(".key").textContent).toBe("node.kubernetes.io/not-ready");
expect(rows[0].querySelector(".key")?.textContent).toBe("node.kubernetes.io/not-ready");
});
});
src/renderer/components/+workloads-pods/container-charts.tsx
+32 -22
View File
@@ -5,24 +5,32 @@
import React, { useContext } from "react";
import { observer } from "mobx-react";
import type { IPodMetrics } from "../../../common/k8s-api/endpoints";
import { BarChart, cpuOptions, memoryOptions } from "../chart";
import type { ChartDataSets } from "../chart";
import { BarChart } from "../chart";
import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
import { NoMetrics } from "../resource-metrics/no-metrics";
import type { IResourceMetricsValue } from "../resource-metrics";
import { ResourceMetricsContext } from "../resource-metrics";
import { ThemeStore } from "../../theme.store";
import type { ThemeStore } from "../../themes/store";
import { mapValues } from "lodash";
import { type MetricsTab, metricTabOptions } from "../chart/options";
import { withInjectables } from "@ogre-tools/injectable-react";
import themeStoreInjectable from "../../themes/store.injectable";
type IContext = IResourceMetricsValue<any, { metrics: IPodMetrics }>;
export interface ContainerChartsProps {}
export const ContainerCharts = observer(() => {
const { params: { metrics }, tabId } = useContext<IContext>(ResourceMetricsContext);
const { chartCapacityColor } = ThemeStore.getInstance().activeTheme.colors;
interface Dependencies {
themeStore: ThemeStore;
}
if (!metrics) return null;
const NonInjectedContainerCharts = observer(({
themeStore,
}: Dependencies & ContainerChartsProps) => {
const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {};
if (!metrics || !object || !tab) return null;
if (isMetricsEmpty(metrics)) return <NoMetrics/>;
const { chartCapacityColor } = themeStore.activeTheme.colors;
const {
cpuUsage,
cpuRequests,
@@ -35,9 +43,8 @@ export const ContainerCharts = observer(() => {
fsReads,
} = mapValues(metrics, metric => normalizeMetrics(metric).data.result[0].values);
const datasets = [
// CPU
[
const datasets: Partial<Record<MetricsTab, ChartDataSets[]>> = {
CPU: [
{
id: "cpuUsage",
label: `Usage`,
@@ -60,8 +67,7 @@ export const ContainerCharts = observer(() => {
data: cpuLimits.map(([x, y]) => ({ x, y })),
},
],
// Memory
[
Memory: [
{
id: "memoryUsage",
label: `Usage`,
@@ -84,8 +90,7 @@ export const ContainerCharts = observer(() => {
data: memoryLimits.map(([x, y]) => ({ x, y })),
},
],
// Filesystem
[
Filesystem: [
{
id: "fsUsage",
label: `Usage`,
@@ -108,15 +113,20 @@ export const ContainerCharts = observer(() => {
data: fsReads.map(([x, y]) => ({ x, y })),
},
],
];
const options = tabId == 0 ? cpuOptions : memoryOptions;
};
return (
<BarChart
name={`metrics-${tabId}`}
options={options}
data={{ datasets: datasets[tabId] }}
name={`metrics-${tab}`}
options={metricTabOptions[tab]}
data={{ datasets: datasets[tab] }}
/>
);
});
export const ContainerCharts = withInjectables<Dependencies, ContainerChartsProps>(NonInjectedContainerCharts, {
getProps: (di, props) => ({
...props,
themeStore: di.inject(themeStoreInjectable),
}),
});
src/renderer/components/+workloads-pods/details/volumes/variant-helpers.tsx
+7 -3
View File
@@ -5,8 +5,8 @@
import React from "react";
import { Link } from "react-router-dom";
import type { PodVolumeVariants, Pod, SecretReference } from "../../../../../common/k8s-api/endpoints";
import type { KubeApi } from "../../../../../common/k8s-api/kube-api";
import type { LocalObjectReference, KubeObject } from "../../../../../common/k8s-api/kube-object";
import type { KubeApiQueryParams, ResourceDescriptor } from "../../../../../common/k8s-api/kube-api";
import type { LocalObjectReference } from "../../../../../common/k8s-api/kube-object";
import { DrawerItem } from "../../../drawer";
import { getDetailsUrl } from "../../../kube-detail-params";
@@ -18,11 +18,15 @@ export interface PodVolumeVariantSpecificProps<Kind extends keyof PodVolumeVaria
export type VolumeVariantComponent<Kind extends keyof PodVolumeVariants> = React.FunctionComponent<PodVolumeVariantSpecificProps<Kind>>;
export interface LocalRefPropsApi {
getUrl(desc?: Partial<ResourceDescriptor>, query?: Partial<KubeApiQueryParams>): string;
}
export interface LocalRefProps {
pod: Pod;
title: string;
kubeRef: LocalObjectReference | SecretReference | undefined;
api: KubeApi<KubeObject>;
api: LocalRefPropsApi;
}
export const LocalRef = ({ pod, title, kubeRef: ref, api }: LocalRefProps) => {
src/renderer/components/+workloads-pods/details/volumes/variant.tsx
+152 -32
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import type { Pod, PodVolume, PodVolumeKind } from "../../../../../common/k8s-api/endpoints";
import type { Pod, PodSpecVolume, PodVolumeKind } from "../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../drawer";
import { Icon } from "../../../icon";
import { AwsElasticBlockStore } from "./variants/aws-elastic-block-store";
@@ -47,7 +47,7 @@ const deprecatedVolumeTypes = new Set<PodVolumeKind>([
interface VolumeVariantProps {
pod: Pod;
volume: PodVolume;
volume: PodSpecVolume;
}
interface VolumeVariantRender {
@@ -59,210 +59,330 @@ function renderVolumeVariant({ pod, volume }: VolumeVariantProps): VolumeVariant
if (volume.awsElasticBlockStore) {
return {
kind: "awsElasticBlockStore",
element: <AwsElasticBlockStore variant={volume.awsElasticBlockStore} pod={pod} volumeName={volume.name} />,
element: <AwsElasticBlockStore
variant={volume.awsElasticBlockStore}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.azureDisk) {
return {
kind: "azureDisk",
element: <AzureDisk variant={volume.azureDisk} pod={pod} volumeName={volume.name} />,
element: <AzureDisk
variant={volume.azureDisk}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.azureFile) {
return {
kind: "azureFile",
element: <AzureFile variant={volume.azureFile} pod={pod} volumeName={volume.name} />,
element: <AzureFile
variant={volume.azureFile}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.cephfs) {
return {
kind: "cephfs",
element: <CephFs variant={volume.cephfs} pod={pod} volumeName={volume.name} />,
element: <CephFs
variant={volume.cephfs}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.cinder) {
return {
kind: "cinder",
element: <Cinder variant={volume.cinder} pod={pod} volumeName={volume.name} />,
element: <Cinder
variant={volume.cinder}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.configMap) {
return {
kind: "configMap",
element: <ConfigMap variant={volume.configMap} pod={pod} volumeName={volume.name} />,
element: <ConfigMap
variant={volume.configMap}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.csi) {
return {
kind: "csi",
element: <ContainerStorageInterface variant={volume.csi} pod={pod} volumeName={volume.name} />,
element: <ContainerStorageInterface
variant={volume.csi}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.downwardAPI) {
return {
kind: "downwardAPI",
element: <DownwardAPI variant={volume.downwardAPI} pod={pod} volumeName={volume.name} />,
element: <DownwardAPI
variant={volume.downwardAPI}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.emptyDir) {
return {
kind: "emptyDir",
element: <EmptyDir variant={volume.emptyDir} pod={pod} volumeName={volume.name} />,
element: <EmptyDir
variant={volume.emptyDir}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.ephemeral) {
return {
kind: "ephemeral",
element: <Ephemeral variant={volume.ephemeral} pod={pod} volumeName={volume.name} />,
element: <Ephemeral
variant={volume.ephemeral}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.fc) {
return {
kind: "fc",
element: <FiberChannel variant={volume.fc} pod={pod} volumeName={volume.name} />,
element: <FiberChannel
variant={volume.fc}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.flexVolume) {
return {
kind: "flexVolume",
element: <FlexVolume variant={volume.flexVolume} pod={pod} volumeName={volume.name} />,
element: <FlexVolume
variant={volume.flexVolume}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.flocker) {
return {
kind: "flocker",
element: <Flocker variant={volume.flocker} pod={pod} volumeName={volume.name} />,
element: <Flocker
variant={volume.flocker}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.gcePersistentDisk) {
return {
kind: "gcePersistentDisk",
element: <GcePersistentDisk variant={volume.gcePersistentDisk} pod={pod} volumeName={volume.name} />,
element: <GcePersistentDisk
variant={volume.gcePersistentDisk}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.gitRepo) {
return {
kind: "gitRepo",
element: <GitRepo variant={volume.gitRepo} pod={pod} volumeName={volume.name} />,
element: <GitRepo
variant={volume.gitRepo}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.glusterfs) {
return {
kind: "glusterfs",
element: <GlusterFs variant={volume.glusterfs} pod={pod} volumeName={volume.name} />,
element: <GlusterFs
variant={volume.glusterfs}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.hostPath) {
return {
kind: "hostPath",
element: <HostPath variant={volume.hostPath} pod={pod} volumeName={volume.name} />,
element: <HostPath
variant={volume.hostPath}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.iscsi) {
return {
kind: "iscsi",
element: <IScsi variant={volume.iscsi} pod={pod} volumeName={volume.name} />,
element: <IScsi
variant={volume.iscsi}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.local) {
return {
kind: "local",
element: <Local variant={volume.local} pod={pod} volumeName={volume.name} />,
element: <Local
variant={volume.local}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.nfs) {
return {
kind: "nfs",
element: <NetworkFs variant={volume.nfs} pod={pod} volumeName={volume.name} />,
element: <NetworkFs
variant={volume.nfs}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.persistentVolumeClaim) {
return {
kind: "persistentVolumeClaim",
element: <PersistentVolumeClaim variant={volume.persistentVolumeClaim} pod={pod} volumeName={volume.name} />,
element: <PersistentVolumeClaim
variant={volume.persistentVolumeClaim}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.photonPersistentDisk) {
return {
kind: "photonPersistentDisk",
element: <PhotonPersistentDisk variant={volume.photonPersistentDisk} pod={pod} volumeName={volume.name} />,
element: <PhotonPersistentDisk
variant={volume.photonPersistentDisk}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.portworxVolume) {
return {
kind: "portworxVolume",
element: <PortworxVolume variant={volume.portworxVolume} pod={pod} volumeName={volume.name} />,
element: <PortworxVolume
variant={volume.portworxVolume}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.projected) {
return {
kind: "projected",
element: <Projected variant={volume.projected} pod={pod} volumeName={volume.name} />,
element: <Projected
variant={volume.projected}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.quobyte) {
return {
kind: "quobyte",
element: <Quobyte variant={volume.quobyte} pod={pod} volumeName={volume.name} />,
element: <Quobyte
variant={volume.quobyte}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.rbd) {
return {
kind: "rbd",
element: <RadosBlockDevice variant={volume.rbd} pod={pod} volumeName={volume.name} />,
element: <RadosBlockDevice
variant={volume.rbd}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.scaleIO) {
return {
kind: "scaleIO",
element: <ScaleIo variant={volume.scaleIO} pod={pod} volumeName={volume.name} />,
element: <ScaleIo
variant={volume.scaleIO}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.secret) {
return {
kind: "secret",
element: <Secret variant={volume.secret} pod={pod} volumeName={volume.name} />,
element: <Secret
variant={volume.secret}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.storageos) {
return {
kind: "storageos",
element: <StorageOs variant={volume.storageos} pod={pod} volumeName={volume.name} />,
element: <StorageOs
variant={volume.storageos}
pod={pod}
volumeName={volume.name}
/>,
};
}
if (volume.vsphereVolume) {
return {
kind: "vsphereVolume",
element: <VsphereVolume variant={volume.vsphereVolume} pod={pod} volumeName={volume.name} />,
element: <VsphereVolume
variant={volume.vsphereVolume}
pod={pod}
volumeName={volume.name}
/>,
};
}
src/renderer/components/+workloads-pods/details/volumes/variants/ceph-fs.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -30,7 +30,7 @@ export const CephFs: VolumeVariantComponent<"cephfs"> = (
pod={pod}
title="Secret"
kubeRef={secretRef}
api={secretsApi}
api={secretApi}
/>
)
: (
src/renderer/components/+workloads-pods/details/volumes/variants/container-storage-interface.tsx
+5 -5
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -36,25 +36,25 @@ export const ContainerStorageInterface: VolumeVariantComponent<"csi"> = ({
pod={pod}
title="Controller Publish Secret"
kubeRef={controllerPublishSecretRef}
api={secretsApi}
api={secretApi}
/>
<LocalRef
pod={pod}
title="Controller Expand Secret"
kubeRef={controllerExpandSecretRef}
api={secretsApi}
api={secretApi}
/>
<LocalRef
pod={pod}
title="Node Publish Secret"
kubeRef={nodePublishSecretRef}
api={secretsApi}
api={secretApi}
/>
<LocalRef
pod={pod}
title="Node Stage Secret"
kubeRef={nodeStageSecretRef}
api={secretsApi}
api={secretApi}
/>
{
Object.entries(volumeAttributes)
src/renderer/components/+workloads-pods/details/volumes/variants/ephemeral.tsx
+4 -4
View File
@@ -8,18 +8,18 @@ import { DrawerItem, DrawerItemLabels } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
export const Ephemeral: VolumeVariantComponent<"ephemeral"> = (
({ pod, volumeName, variant: { volumeClaimTemplate: { metadata, spec }}}) => (
({ pod, volumeName, variant: { volumeClaimTemplate: { metadata = {}, spec }}}) => (
<>
<DrawerItem name="PVC Template Name">
{pod.getName()}-{volumeName}
{`${pod.getName()}-${volumeName}`}
</DrawerItem>
<DrawerItemLabels
name="Template Labels"
labels={metadata.labels}
labels={metadata.labels ?? {}}
/>
<DrawerItemLabels
name="Template Annotations"
labels={metadata.annotations}
labels={metadata.annotations ?? {}}
/>
<DrawerItem name="Template PVC Spec">
{dump(spec)}
src/renderer/components/+workloads-pods/details/volumes/variants/flex-volume.tsx
+3 -3
View File
@@ -4,13 +4,13 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
export const FlexVolume: VolumeVariantComponent<"flexVolume"> = (
({ pod, variant: { driver, fsType, secretRef, readOnly = false, options }}) => (
({ pod, variant: { driver, fsType, secretRef, readOnly = false, options = {}}}) => (
<>
<DrawerItem name="Driver">
{driver}
@@ -22,7 +22,7 @@ export const FlexVolume: VolumeVariantComponent<"flexVolume"> = (
pod={pod}
title="Secret"
kubeRef={secretRef}
api={secretsApi}
api={secretApi}
/>
<DrawerItem name="Readonly">
{readOnly.toString()}
src/renderer/components/+workloads-pods/details/volumes/variants/persistent-volume-claim.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { pvcApi } from "../../../../../../common/k8s-api/endpoints";
import { persistentVolumeClaimApi } from "../../../../../../common/k8s-api/endpoints";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -14,7 +14,7 @@ export const PersistentVolumeClaim: VolumeVariantComponent<"persistentVolumeClai
pod={pod}
title="Name"
kubeRef={{ name: claimName }}
api={pvcApi}
api={persistentVolumeClaimApi}
/>
)
);
src/renderer/components/+workloads-pods/details/volumes/variants/projected.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ export const Projected: VolumeVariantComponent<"projected"> = (
({ variant: { sources, defaultMode }}) => (
<>
<DrawerItem name="Default Mount Mode">
0o{defaultMode.toString(8)}
{`0o${defaultMode.toString(8)}`}
</DrawerItem>
<DrawerItem name="Sources">
{
@@ -27,7 +27,7 @@ export const Projected: VolumeVariantComponent<"projected"> = (
<ul>
{secret.items?.map(({ key, path }) => (
<li key={key}>
{key} ⇢ {path}
{`${key}⇢${path}`}
</li>
))}
</ul>
@@ -58,7 +58,7 @@ export const Projected: VolumeVariantComponent<"projected"> = (
<ul>
{configMap.items?.map(({ key, path }) => (
<li key={key}>
{key} ⇢ {path}
{`${key}⇢${path}`}
</li>
))}
</ul>
@@ -72,7 +72,7 @@ export const Projected: VolumeVariantComponent<"projected"> = (
{serviceAccountToken.audience}
</DrawerItem>
<DrawerItem name="Expiration">
{String(serviceAccountToken.expirationSeconds || (60*60 /* an hour */))}s
{`${serviceAccountToken.expirationSeconds ?? 60*60 /* an hour */}s`}
</DrawerItem>
<DrawerItem name="Path">
{serviceAccountToken.path}
src/renderer/components/+workloads-pods/details/volumes/variants/rados-block-device.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -36,7 +36,7 @@ export const RadosBlockDevice: VolumeVariantComponent<"rbd"> = (
pod={pod}
title="Authentication Secret"
kubeRef={secretRef}
api={secretsApi}
api={secretApi}
/>
)
: (
src/renderer/components/+workloads-pods/details/volumes/variants/scale-io.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -22,7 +22,7 @@ export const ScaleIo: VolumeVariantComponent<"scaleIO"> = (
pod={pod}
title="Name"
kubeRef={secretRef}
api={secretsApi}
api={secretApi}
/>
<DrawerItem name="SSL Enabled">
{sslEnabled.toString()}
src/renderer/components/+workloads-pods/details/volumes/variants/secret.tsx
+3 -3
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -16,7 +16,7 @@ export const Secret: VolumeVariantComponent<"secret"> = (
pod={pod}
title="Name"
kubeRef={{ name: secretName }}
api={secretsApi}
api={secretApi}
/>
<DrawerItem name="Items" hidden={items.length === 0}>
<ul>
@@ -24,7 +24,7 @@ export const Secret: VolumeVariantComponent<"secret"> = (
</ul>
</DrawerItem>
<DrawerItem name="Default File Mode">
0o{defaultMode.toString(8)}
{`0o${defaultMode.toString(8)}`}
</DrawerItem>
<DrawerItem name="Optional">
{optional.toString()}
src/renderer/components/+workloads-pods/details/volumes/variants/storage-os.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
*/
import React from "react";
import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
import { secretApi } from "../../../../../../common/k8s-api/endpoints";
import { DrawerItem } from "../../../../drawer";
import type { VolumeVariantComponent } from "../variant-helpers";
import { LocalRef } from "../variant-helpers";
@@ -32,7 +32,7 @@ export const StorageOs: VolumeVariantComponent<"storageos"> = (
pod={pod}
title="Secret"
kubeRef={secretRef}
api={secretsApi}
api={secretApi}
/>
</>
)
src/renderer/components/+workloads-pods/get-pod-by-id.injectable.ts
+20
View File
@@ -0,0 +1,20 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import type { Pod } from "../../../common/k8s-api/endpoints";
import podStoreInjectable from "./store.injectable";
export type GetPodById = (id: string) => Pod | undefined;
const getPodByIdInjectable = getInjectable({
id: "get-pod-by-id",
instantiate: (di): GetPodById => {
const store = di.inject(podStoreInjectable);
return id => store.getById(id);
},
});
export default getPodByIdInjectable;
src/renderer/components/+workloads-pods/get-pods-by-owner-id.injectable.ts
+20
View File
@@ -0,0 +1,20 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import type { Pod } from "../../../common/k8s-api/endpoints";
import podStoreInjectable from "./store.injectable";
export type GetPodsByOwnerId = (ownerId: string) => Pod[];
const getPodsByOwnerIdInjectable = getInjectable({
id: "get-pods-by-owner-id",
instantiate: (di): GetPodsByOwnerId => {
const podStore = di.inject(podStoreInjectable);
return (ownerId) => podStore.getPodsByOwnerId(ownerId);
},
});
export default getPodsByOwnerIdInjectable;
src/renderer/components/+workloads-pods/legacy-store.ts
+12
View File
@@ -0,0 +1,12 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
import podStoreInjectable from "./store.injectable";
/**
* @deprecated use `di.inject(podStoreInjectable)` instead
*/
export const podStore = asLegacyGlobalForExtensionApi(podStoreInjectable);
src/renderer/components/+workloads-pods/pod-charts.tsx
+18 -25
View File
@@ -7,31 +7,28 @@ import { mapValues } from "lodash";
import { observer } from "mobx-react";
import React, { useContext } from "react";
import { isMetricsEmpty, normalizeMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
import { BarChart, cpuOptions, memoryOptions } from "../chart";
import type { IResourceMetricsValue } from "../resource-metrics";
import type { ChartDataSets } from "../chart";
import { BarChart } from "../chart";
import type { MetricsTab } from "../chart/options";
import { metricTabOptions } from "../chart/options";
import type { AtLeastOneMetricTab } from "../resource-metrics";
import { ResourceMetricsContext } from "../resource-metrics";
import { NoMetrics } from "../resource-metrics/no-metrics";
import type { WorkloadKubeObject } from "../../../common/k8s-api/workload-kube-object";
import type { IPodMetrics } from "../../../common/k8s-api/endpoints";
export const podMetricTabs = [
export const podMetricTabs: AtLeastOneMetricTab = [
"CPU",
"Memory",
"Network",
"Filesystem",
];
type IContext = IResourceMetricsValue<WorkloadKubeObject, { metrics: IPodMetrics }>;
export const PodCharts = observer(() => {
const { params: { metrics }, tabId, object } = useContext<IContext>(ResourceMetricsContext);
const id = object.getId();
const { metrics, tab, object } = useContext(ResourceMetricsContext) ?? {};
if (!metrics) return null;
if (!metrics || !object || !tab) return null;
if (isMetricsEmpty(metrics)) return <NoMetrics/>;
const options = tabId == 0 ? cpuOptions : memoryOptions;
const id = object.getId();
const {
cpuUsage,
memoryUsage,
@@ -42,9 +39,8 @@ export const PodCharts = observer(() => {
networkTransmit,
} = mapValues(metrics, metric => normalizeMetrics(metric).data.result[0].values);
const datasets = [
// CPU
[
const datasets: Partial<Record<MetricsTab, ChartDataSets[]>> = {
CPU: [
{
id: `${id}-cpuUsage`,
label: `Usage`,
@@ -53,8 +49,7 @@ export const PodCharts = observer(() => {
data: cpuUsage.map(([x, y]) => ({ x, y })),
},
],
// Memory
[
Memory: [
{
id: `${id}-memoryUsage`,
label: `Usage`,
@@ -63,8 +58,7 @@ export const PodCharts = observer(() => {
data: memoryUsage.map(([x, y]) => ({ x, y })),
},
],
// Network
[
Network: [
{
id: `${id}-networkReceive`,
label: `Receive`,
@@ -80,8 +74,7 @@ export const PodCharts = observer(() => {
data: networkTransmit.map(([x, y]) => ({ x, y })),
},
],
// Filesystem
[
Filesystem: [
{
id: `${id}-fsUsage`,
label: `Usage`,
@@ -104,13 +97,13 @@ export const PodCharts = observer(() => {
data: fsReads.map(([x, y]) => ({ x, y })),
},
],
];
};
return (
<BarChart
name={`${object.getName()}-metric-${tabId}`}
options={options}
data={{ datasets: datasets[tabId] }}
name={`${object.getName()}-metric-${tab}`}
options={metricTabOptions[tab]}
data={{ datasets: datasets[tab] }}
/>
);
});
src/renderer/components/+workloads-pods/pod-container-env.tsx
+27 -18
View File
@@ -7,37 +7,37 @@ import "./pod-container-env.scss";
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import type { IPodContainer, Secret } from "../../../common/k8s-api/endpoints";
import type { PodContainer, Secret } from "../../../common/k8s-api/endpoints";
import { DrawerItem } from "../drawer";
import { autorun } from "mobx";
import { secretsStore } from "../+config-secrets/secrets.store";
import { configMapsStore } from "../+config-maps/config-maps.store";
import { secretStore } from "../+config-secrets/legacy-store";
import { configMapStore } from "../+config-maps/legacy-store";
import { Icon } from "../icon";
import { base64, cssNames, iter } from "../../utils";
import _ from "lodash";
export interface ContainerEnvironmentProps {
container: IPodContainer;
container: PodContainer;
namespace: string;
}
export const ContainerEnvironment = observer((props: ContainerEnvironmentProps) => {
const { container: { env, envFrom }, namespace } = props;
const { container: { env, envFrom = [] }, namespace } = props;
useEffect( () => autorun(() => {
for (const { valueFrom } of env ?? []) {
if (valueFrom?.configMapKeyRef) {
configMapsStore.load({ name: valueFrom.configMapKeyRef.name, namespace });
configMapStore.load({ name: valueFrom.configMapKeyRef.name, namespace });
}
}
for (const { configMapRef, secretRef } of envFrom ?? []) {
if (secretRef?.name) {
secretsStore.load({ name: secretRef.name, namespace });
secretStore.load({ name: secretRef.name, namespace });
}
if (configMapRef?.name) {
configMapsStore.load({ name: configMapRef.name, namespace });
configMapStore.load({ name: configMapRef.name, namespace });
}
}
}), []);
@@ -73,7 +73,7 @@ export const ContainerEnvironment = observer((props: ContainerEnvironmentProps)
if (configMapKeyRef) {
const { name, key } = configMapKeyRef;
const configMap = configMapsStore.getByName(name, namespace);
const configMap = configMapStore.getByName(name, namespace);
secretValue = configMap ?
configMap.data[key] :
@@ -83,7 +83,9 @@ export const ContainerEnvironment = observer((props: ContainerEnvironmentProps)
return (
<div className="variable" key={name}>
<span className="var-name">{name}</span>: {secretValue}
<span className="var-name">{name}</span>
:
{secretValue}
</div>
);
});
@@ -104,19 +106,21 @@ export const ContainerEnvironment = observer((props: ContainerEnvironmentProps)
};
const renderEnvFromConfigMap = (configMapName: string) => {
const configMap = configMapsStore.getByName(configMapName, namespace);
const configMap = configMapStore.getByName(configMapName, namespace);
if (!configMap) return null;
return Object.entries(configMap.data).map(([name, value]) => (
<div className="variable" key={name}>
<span className="var-name">{name}</span>: {value}
<span className="var-name">{name}</span>
:
{value}
</div>
));
};
const renderEnvFromSecret = (secretName: string) => {
const secret = secretsStore.getByName(secretName, namespace);
const secret = secretStore.getByName(secretName, namespace);
if (!secret) return null;
@@ -135,7 +139,9 @@ export const ContainerEnvironment = observer((props: ContainerEnvironmentProps)
return (
<div className="variable" key={key}>
<span className="var-name">{key}</span>: {value}
<span className="var-name">{key}</span>
:
{value}
</div>
);
});
@@ -165,19 +171,22 @@ const SecretKey = (props: SecretKeyProps) => {
const showKey = async (evt: React.MouseEvent) => {
evt.preventDefault();
setLoading(true);
const secret = await secretsStore.load({ name, namespace });
const secret = await secretStore.load({ name, namespace });
setLoading(false);
setSecret(secret);
};
if (secret?.data?.[key]) {
return <>{base64.decode(secret.data[key])}</>;
const value = secret?.data?.[key];
if (value) {
return <>{base64.decode(value)}</>;
}
return (
<>
secretKeyRef({name}.{key})&nbsp;
{`secretKeyRef(${name}.${key})`}
&nbsp;
<Icon
className={cssNames("secret-button", { loading })}
material="visibility"
src/renderer/components/+workloads-pods/pod-container-port.tsx
+17 -15
View File
@@ -7,7 +7,7 @@ import "./pod-container-port.scss";
import React from "react";
import { disposeOnUnmount, observer } from "mobx-react";
import type { Pod } from "../../../common/k8s-api/endpoints";
import type { ContainerPort, Pod } from "../../../common/k8s-api/endpoints";
import { action, makeObservable, observable, reaction } from "mobx";
import { cssNames } from "../../utils";
import { Notifications } from "../notifications";
@@ -24,11 +24,7 @@ import notifyErrorPortForwardingInjectable from "../../port-forward/notify-error
export interface PodContainerPortProps {
pod: Pod;
port: {
name?: string;
containerPort: number;
protocol: string;
};
port: ContainerPort;
}
interface Dependencies {
@@ -64,20 +60,22 @@ class NonInjectedPodContainerPort extends React.Component<PodContainerPortProps
@action
async checkExistingPortForwarding() {
const { pod, port } = this.props;
let portForward: ForwardedPort = {
kind: "pod",
name: pod.getName(),
namespace: pod.getNs(),
port: port.containerPort,
forwardPort: this.forwardPort,
};
let portForward: ForwardedPort | undefined;
try {
portForward = await this.portForwardStore.getPortForward(portForward);
portForward = await this.portForwardStore.getPortForward({
kind: "pod",
name: pod.getName(),
namespace: pod.getNs(),
port: port.containerPort,
forwardPort: this.forwardPort,
});
} catch (error) {
this.isPortForwarded = false;
this.isActive = false;
}
if (!portForward) {
return;
}
@@ -180,7 +178,11 @@ class NonInjectedPodContainerPort extends React.Component<PodContainerPortProps
<span title="Open in a browser" onClick={() => this.portForward()}>
{text}
</span>
<Button primary onClick={portForwardAction}> {this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."} </Button>
<Button primary onClick={portForwardAction}>
{" "}
{this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."}
{" "}
</Button>
{this.waiting && (
<Spinner />
)}
src/renderer/components/+workloads-pods/pod-details-container.tsx
+139 -120
View File
@@ -6,32 +6,34 @@
import "./pod-details-container.scss";
import React from "react";
import type { IPodContainer, IPodContainerStatus, Pod } from "../../../common/k8s-api/endpoints";
import type { PodContainer, PodContainerStatus, Pod } from "../../../common/k8s-api/endpoints";
import { DrawerItem } from "../drawer";
import { cssNames } from "../../utils";
import { cssNames, isDefined } from "../../utils";
import { StatusBrick } from "../status-brick";
import { Badge } from "../badge";
import { ContainerEnvironment } from "./pod-container-env";
import { PodContainerPort } from "./pod-container-port";
import { ResourceMetrics } from "../resource-metrics";
import type { IMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
import type { MetricData } from "../../../common/k8s-api/endpoints/metrics.api";
import { ContainerCharts } from "./container-charts";
import { LocaleDate } from "../locale-date";
import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
import type { PortForwardStore } from "../../port-forward";
import { disposeOnUnmount, observer } from "mobx-react";
import { withInjectables } from "@ogre-tools/injectable-react";
import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
export interface PodDetailsContainerProps {
pod: Pod;
container: IPodContainer;
metrics?: { [key: string]: IMetrics };
container: PodContainer;
metrics?: Partial<Record<string, MetricData>>;
}
interface Dependencies {
portForwardStore: PortForwardStore;
getActiveClusterEntity: GetActiveClusterEntity;
}
@observer
@@ -43,25 +45,37 @@ class NonInjectedPodDetailsContainer extends React.Component<PodDetailsContainer
]);
}
renderStatus(state: string, status: IPodContainerStatus) {
const ready = status ? status.ready : "";
renderStatus(state: string, status: PodContainerStatus | null | undefined) {
const { ready = false, state: containerState = {}} = status ?? {};
const { terminated } = containerState;
return (
<span className={cssNames("status", state)}>
{state}{ready ? `, ready` : ""}
{state === "terminated" ? ` - ${status.state.terminated.reason} (exit code: ${status.state.terminated.exitCode})` : ""}
{state}
{ready ? ", ready" : ""}
{terminated ? ` - ${terminated.reason} (exit code: ${terminated.exitCode})` : ""}
</span>
);
}
renderLastState(lastState: string, status: IPodContainerStatus) {
if (lastState === "terminated") {
renderLastState(lastState: string, status: PodContainerStatus | null | undefined) {
const { lastState: lastContainerState = {}} = status ?? {};
const { terminated } = lastContainerState;
if (lastState === "terminated" && terminated) {
return (
<span>
{lastState}<br/>
Reason: {status.lastState.terminated.reason} - exit code: {status.lastState.terminated.exitCode}<br/>
Started at: {<LocaleDate date={status.lastState.terminated.startedAt} />}<br/>
Finished at: {<LocaleDate date={status.lastState.terminated.finishedAt} />}<br/>
{lastState}
<br/>
Reason:
{`Reason: ${terminated.reason} - exit code: ${terminated.exitCode}`}
<br/>
{"Started at: "}
{<LocaleDate date={terminated.startedAt} />}
<br/>
{"Finished at: "}
{<LocaleDate date={terminated.finishedAt} />}
<br/>
</span>
);
}
@@ -70,134 +84,139 @@ class NonInjectedPodDetailsContainer extends React.Component<PodDetailsContainer
}
render() {
const { pod, container, metrics } = this.props;
const { pod, container, metrics, getActiveClusterEntity } = this.props;
if (!pod || !container) return null;
const { name, image, imagePullPolicy, ports, volumeMounts, command, args } = container;
const status = pod.getContainerStatuses().find(status => status.name === container.name);
const state = status ? Object.keys(status.state)[0] : "";
const lastState = status ? Object.keys(status.lastState)[0] : "";
const state = status ? Object.keys(status?.state ?? {})[0] : "";
const lastState = status ? Object.keys(status?.lastState ?? {})[0] : "";
const ready = status ? status.ready : "";
const imageId = status? status.imageID : "";
const liveness = pod.getLivenessProbe(container);
const readiness = pod.getReadinessProbe(container);
const startup = pod.getStartupProbe(container);
const isInitContainer = !!pod.getInitContainers().find(c => c.name == name);
const metricTabs = [
"CPU",
"Memory",
"Filesystem",
];
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Container);
return (
<div className="PodDetailsContainer">
<div className="pod-container-title">
<StatusBrick className={cssNames(state, { ready })}/>{name}
<StatusBrick className={cssNames(state, { ready })}/>
{name}
</div>
{!isMetricHidden && !isInitContainer &&
<ResourceMetrics tabs={metricTabs} params={{ metrics }}>
<ContainerCharts/>
</ResourceMetrics>
}
{status &&
<DrawerItem name="Status">
{this.renderStatus(state, status)}
</DrawerItem>
}
{lastState &&
<DrawerItem name="Last Status">
{this.renderLastState(lastState, status)}
</DrawerItem>
}
{!isMetricHidden && !isInitContainer && (
<ResourceMetrics
object={pod}
tabs={[
"CPU",
"Memory",
"Filesystem",
]}
metrics={metrics}
>
<ContainerCharts/>
</ResourceMetrics>
)}
{status && (
<DrawerItem name="Status">
{this.renderStatus(state, status)}
</DrawerItem>
)}
{lastState && (
<DrawerItem name="Last Status">
{this.renderLastState(lastState, status)}
</DrawerItem>
)}
<DrawerItem name="Image">
<Badge label={image} tooltip={imageId}/>
</DrawerItem>
{imagePullPolicy && imagePullPolicy !== "IfNotPresent" &&
<DrawerItem name="ImagePullPolicy">
{imagePullPolicy}
</DrawerItem>
}
{ports && ports.length > 0 &&
<DrawerItem name="Ports">
{
ports.map((port) => {
const key = `${container.name}-port-${port.containerPort}-${port.protocol}`;
return (
<PodContainerPort pod={pod} port={port} key={key}/>
);
})
}
</DrawerItem>
}
{imagePullPolicy && imagePullPolicy !== "IfNotPresent" && (
<DrawerItem name="ImagePullPolicy">
{imagePullPolicy}
</DrawerItem>
)}
{ports && ports.length > 0 && (
<DrawerItem name="Ports">
{
ports
.filter(isDefined)
.map((port) => (
<PodContainerPort
pod={pod}
port={port}
key={`${container.name}-port-${port.containerPort}-${port.protocol}`}
/>
))
}
</DrawerItem>
)}
{<ContainerEnvironment container={container} namespace={pod.getNs()}/>}
{volumeMounts && volumeMounts.length > 0 &&
<DrawerItem name="Mounts">
{
volumeMounts.map(mount => {
const { name, mountPath, readOnly } = mount;
{volumeMounts && volumeMounts.length > 0 && (
<DrawerItem name="Mounts">
{
volumeMounts.map(mount => {
const { name, mountPath, readOnly } = mount;
return (
<React.Fragment key={name + mountPath}>
<span className="mount-path">{mountPath}</span>
<span className="mount-from">from {name} ({readOnly ? "ro" : "rw"})</span>
</React.Fragment>
);
})
}
</DrawerItem>
}
{liveness.length > 0 &&
<DrawerItem name="Liveness" labelsOnly>
{
liveness.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
}
{readiness.length > 0 &&
<DrawerItem name="Readiness" labelsOnly>
{
readiness.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
}
{startup.length > 0 &&
<DrawerItem name="Startup" labelsOnly>
{
startup.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
}
{command &&
<DrawerItem name="Command">
{command.join(" ")}
</DrawerItem>
}
return (
<React.Fragment key={name + mountPath}>
<span className="mount-path">{mountPath}</span>
<span className="mount-from">
{`from ${name} (${readOnly ? "ro" : "rw"})`}
</span>
</React.Fragment>
);
})
}
</DrawerItem>
)}
{liveness.length > 0 && (
<DrawerItem name="Liveness" labelsOnly>
{
liveness.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
)}
{readiness.length > 0 && (
<DrawerItem name="Readiness" labelsOnly>
{
readiness.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
)}
{startup.length > 0 && (
<DrawerItem name="Startup" labelsOnly>
{
startup.map((value, index) => (
<Badge key={index} label={value}/>
))
}
</DrawerItem>
)}
{command && (
<DrawerItem name="Command">
{command.join(" ")}
</DrawerItem>
)}
{args &&
<DrawerItem name="Arguments">
{args.join(" ")}
</DrawerItem>
}
{args && (
<DrawerItem name="Arguments">
{args.join(" ")}
</DrawerItem>
)}
</div>
);
}
}
export const PodDetailsContainer = withInjectables<Dependencies, PodDetailsContainerProps>(
NonInjectedPodDetailsContainer,
{
getProps: (di, props) => ({
portForwardStore: di.inject(portForwardStoreInjectable),
...props,
}),
},
);
export const PodDetailsContainer = withInjectables<Dependencies, PodDetailsContainerProps>(NonInjectedPodDetailsContainer, {
getProps: (di, props) => ({
...props,
portForwardStore: di.inject(portForwardStoreInjectable),
getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
}),
});
src/renderer/components/+workloads-pods/pod-details-list.tsx
+39 -16
View File
@@ -9,7 +9,7 @@ import React from "react";
import kebabCase from "lodash/kebabCase";
import { reaction } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { podsStore } from "./pods.store";
import { podStore } from "./legacy-store";
import type { Pod } from "../../../common/k8s-api/endpoints";
import { autoBind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
import { LineProgress } from "../line-progress";
@@ -42,7 +42,7 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
}
private metricsWatcher = interval(120, () => {
podsStore.loadKubeMetrics(this.props.owner.getNs());
podStore.loadKubeMetrics(this.props.owner.getNs());
});
componentDidMount() {
@@ -59,9 +59,6 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
renderCpuUsage(id: string, usage: number) {
const { maxCpu } = this.props;
const value = usage.toFixed(3);
const tooltip = (
<p>CPU: {Math.ceil(usage * 100) / maxCpu}%<br/>{usage.toFixed(3)}</p>
);
if (!maxCpu) {
if (parseFloat(value) === 0) return 0;
@@ -69,9 +66,18 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
return value;
}
const tooltip = (
<p>
{`CPU: ${Math.ceil(usage * 100 / maxCpu)}%`}
<br/>
{usage.toFixed(3)}
</p>
);
return (
<LineProgress
max={maxCpu} value={usage}
max={maxCpu}
value={usage}
tooltip={parseFloat(value) !== 0 ? tooltip : null}
/>
);
@@ -79,15 +85,21 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
renderMemoryUsage(id: string, usage: number) {
const { maxMemory } = this.props;
const tooltip = (
<p>Memory: {Math.ceil(usage * 100 / maxMemory)}%<br/>{bytesToUnits(usage, { precision: 3 })}</p>
);
if (!maxMemory) return usage ? bytesToUnits(usage) : 0;
const tooltip = (
<p>
{`Memory: ${Math.ceil(usage * 100 / maxMemory)}%`}
<br/>
{bytesToUnits(usage, { precision: 3 })}
</p>
);
return (
<LineProgress
max={maxMemory} value={usage}
max={maxMemory}
value={usage}
tooltip={usage != 0 ? tooltip : null}
/>
);
@@ -96,7 +108,12 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
getTableRow(uid: string) {
const { pods } = this.props;
const pod = pods.find(pod => pod.getId() == uid);
const metrics = podsStore.getPodKubeMetrics(pod);
if (!pod) {
return;
}
const metrics = podStore.getPodKubeMetrics(pod);
return (
<TableRow
@@ -108,7 +125,9 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
<TableCell className="name">{pod.getName()}</TableCell>
<TableCell className="warning"><KubeObjectStatusIcon key="icon" object={pod}/></TableCell>
<TableCell className="namespace">{pod.getNs()}</TableCell>
<TableCell className="ready">{pod.getRunningContainers().length}/{pod.getContainers().length}</TableCell>
<TableCell className="ready">
{`${pod.getRunningContainers().length} / ${pod.getContainers().length}`}
</TableCell>
<TableCell className="cpu">{this.renderCpuUsage(`cpu-${pod.getId()}`, metrics.cpu)}</TableCell>
<TableCell className="memory">{this.renderMemoryUsage(`memory-${pod.getId()}`, metrics.memory)}</TableCell>
<TableCell className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
@@ -119,7 +138,7 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
render() {
const { pods } = this.props;
if (!podsStore.isLoaded) {
if (!podStore.isLoaded) {
return (
<div className="PodDetailsList flex justify-center">
<Spinner />
@@ -147,13 +166,17 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
sortable={{
[sortBy.name]: pod => pod.getName(),
[sortBy.namespace]: pod => pod.getNs(),
[sortBy.cpu]: pod => podsStore.getPodKubeMetrics(pod).cpu,
[sortBy.memory]: pod => podsStore.getPodKubeMetrics(pod).memory,
[sortBy.cpu]: pod => podStore.getPodKubeMetrics(pod).cpu,
[sortBy.memory]: pod => podStore.getPodKubeMetrics(pod).memory,
}}
sortByDefault={{ sortBy: sortBy.cpu, orderBy: "desc" }}
sortSyncWithUrl={false}
getTableRow={this.getTableRow}
renderRow={!virtual && (pod => this.getTableRow(pod.getId()))}
renderRow={(
virtual
? undefined
: (pod => this.getTableRow(pod.getId()))
)}
className="box grow"
>
<TableHead>
src/renderer/components/+workloads-pods/pod-details-secrets.tsx
+7 -3
View File
@@ -10,7 +10,7 @@ import { Link } from "react-router-dom";
import { reaction } from "mobx";
import { observer } from "mobx-react";
import type { Pod, Secret } from "../../../common/k8s-api/endpoints";
import { secretsApi } from "../../../common/k8s-api/endpoints";
import { secretApi } from "../../../common/k8s-api/endpoints";
import { getDetailsUrl } from "../kube-detail-params";
export interface PodDetailsSecretsProps {
@@ -25,7 +25,7 @@ export const PodDetailsSecrets = observer(({ pod }: PodDetailsSecretsProps) => {
() => pod.getSecrets(),
async (secretNames) => {
const results = await Promise.allSettled(
secretNames.map(secretName => secretsApi.get({
secretNames.map(secretName => secretApi.get({
name: secretName,
namespace: pod.getNs(),
})),
@@ -47,7 +47,11 @@ export const PodDetailsSecrets = observer(({ pod }: PodDetailsSecretsProps) => {
const secret = secrets.get(name);
if (!secret) {
return <span key={name}>{name}</span>;
return (
<span key={name}>
{name}
</span>
);
}
return (
src/renderer/components/+workloads-pods/pod-details-statuses.tsx
+6 -5
View File
@@ -23,11 +23,12 @@ export class PodDetailsStatuses extends React.Component<PodDetailsStatusesProps>
return (
<div className="PodDetailsStatuses">
{
Object.keys(statuses).map(key => (
<span key={key} className={kebabCase(key)}>
{key}: {statuses[key]}
</span>
))
Object.entries(statuses)
.map(([phase, count]) => (
<span key={phase} className={kebabCase(phase)}>
{`${phase}: ${count}`}
</span>
))
}
</div>
);
src/renderer/components/+workloads-pods/pod-details-tolerations.tsx
+16 -15
View File
@@ -6,26 +6,27 @@
import "./pod-details-tolerations.scss";
import React from "react";
import { DrawerParamToggler, DrawerItem } from "../drawer";
import type { WorkloadKubeObject } from "../../../common/k8s-api/workload-kube-object";
import type { Toleration, KubeObject } from "../../../common/k8s-api/kube-object";
import { PodTolerations } from "./pod-tolerations";
export interface KubeObjectWithTolerations extends KubeObject {
getTolerations(): Toleration[];
}
export interface PodDetailsTolerationsProps {
workload: WorkloadKubeObject;
workload: KubeObjectWithTolerations;
}
export class PodDetailsTolerations extends React.Component<PodDetailsTolerationsProps> {
render() {
const { workload } = this.props;
const tolerations = workload.getTolerations();
export function PodDetailsTolerations({ workload }: PodDetailsTolerationsProps) {
const tolerations = workload.getTolerations();
if (!tolerations.length) return null;
if (!tolerations.length) return null;
return (
<DrawerItem name="Tolerations" className="PodDetailsTolerations">
<DrawerParamToggler label={tolerations.length}>
<PodTolerations tolerations={tolerations} />
</DrawerParamToggler>
</DrawerItem>
);
}
return (
<DrawerItem name="Tolerations" className="PodDetailsTolerations">
<DrawerParamToggler label={tolerations.length}>
<PodTolerations tolerations={tolerations} />
</DrawerParamToggler>
</DrawerItem>
);
}
src/renderer/components/+workloads-pods/pod-details.tsx
+28 -14
View File
@@ -10,7 +10,8 @@ import kebabCase from "lodash/kebabCase";
import { disposeOnUnmount, observer } from "mobx-react";
import { Link } from "react-router-dom";
import { observable, reaction, makeObservable } from "mobx";
import { type IPodMetrics, nodesApi, Pod, getMetricsForPods } from "../../../common/k8s-api/endpoints";
import type { PodMetricData } from "../../../common/k8s-api/endpoints";
import { nodeApi, Pod, getMetricsForPods } from "../../../common/k8s-api/endpoints";
import { DrawerItem, DrawerTitle } from "../drawer";
import { Badge } from "../badge";
import { cssNames, toJS } from "../../utils";
@@ -23,7 +24,7 @@ import type { KubeObjectDetailsProps } from "../kube-object-details";
import { getItemMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
import { PodCharts, podMetricTabs } from "./pod-charts";
import { KubeObjectMeta } from "../kube-object-meta";
import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
import { getActiveClusterEntity } from "../../api/catalog/entity/legacy-globals";
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
import { getDetailsUrl } from "../kube-detail-params";
import logger from "../../../common/logger";
@@ -34,8 +35,8 @@ export interface PodDetailsProps extends KubeObjectDetailsProps<Pod> {
@observer
export class PodDetails extends React.Component<PodDetailsProps> {
@observable metrics: IPodMetrics;
@observable containerMetrics: IPodMetrics;
@observable metrics: PodMetricData | null = null;
@observable containerMetrics: PodMetricData | null = null;
constructor(props: PodDetailsProps) {
super(props);
@@ -85,26 +86,34 @@ export class PodDetails extends React.Component<PodDetailsProps> {
{!isMetricHidden && (
<ResourceMetrics
loader={this.loadMetrics}
tabs={podMetricTabs} object={pod} params={{ metrics: this.metrics }}
tabs={podMetricTabs}
object={pod}
metrics={this.metrics}
>
<PodCharts/>
<PodCharts />
</ResourceMetrics>
)}
<KubeObjectMeta object={pod}/>
<KubeObjectMeta object={pod} />
<DrawerItem name="Status">
<span className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</span>
<span className={cssNames("status", kebabCase(pod.getStatusMessage()))}>
{pod.getStatusMessage()}
</span>
</DrawerItem>
<DrawerItem name="Node" hidden={!nodeName}>
<Link to={getDetailsUrl(nodesApi.getUrl({ name: nodeName }))}>
<Link to={getDetailsUrl(nodeApi.getUrl({ name: nodeName }))}>
{nodeName}
</Link>
</DrawerItem>
<DrawerItem name="Pod IP">
{podIP}
</DrawerItem>
<DrawerItem name="Pod IPs" hidden={podIPs.length === 0} labelsOnly>
<DrawerItem
name="Pod IPs"
hidden={podIPs.length === 0}
labelsOnly
>
{podIPs.map(label => <Badge key={label} label={label} />)}
</DrawerItem>
<DrawerItem name="Priority Class">
@@ -114,7 +123,12 @@ export class PodDetails extends React.Component<PodDetailsProps> {
{pod.getQosClass()}
</DrawerItem>
<DrawerItem name="Conditions" className="conditions" hidden={conditions.length === 0} labelsOnly>
<DrawerItem
name="Conditions"
className="conditions"
hidden={conditions.length === 0}
labelsOnly
>
{
conditions.map(({ type, status, lastTransitionTime }) => (
<Badge
@@ -131,11 +145,11 @@ export class PodDetails extends React.Component<PodDetailsProps> {
{nodeSelector.map(label => <Badge key={label} label={label} />)}
</DrawerItem>
<PodDetailsTolerations workload={pod}/>
<PodDetailsAffinities workload={pod}/>
<PodDetailsTolerations workload={pod} />
<PodDetailsAffinities workload={pod} />
<DrawerItem name="Secrets" hidden={pod.getSecrets().length === 0}>
<PodDetailsSecrets pod={pod}/>
<PodDetailsSecrets pod={pod} />
</DrawerItem>
{initContainers.length > 0 && (
src/renderer/components/+workloads-pods/pod-tolerations.tsx
+3 -3
View File
@@ -7,11 +7,11 @@ import "./pod-tolerations.scss";
import React from "react";
import uniqueId from "lodash/uniqueId";
import type { IToleration } from "../../../common/k8s-api/workload-kube-object";
import type { Toleration } from "../../../common/k8s-api/kube-object";
import { Table, TableCell, TableHead, TableRow } from "../table";
export interface PodTolerationsProps {
tolerations: IToleration[];
tolerations: Toleration[];
}
enum sortBy {
@@ -22,7 +22,7 @@ enum sortBy {
Value = "value",
}
const getTableRow = (toleration: IToleration) => {
const getTableRow = (toleration: Toleration) => {
const { key, operator, effect, tolerationSeconds, value } = toleration;
return (
src/renderer/components/+workloads-pods/pods-sidebar-items.injectable.tsx → src/renderer/components/+workloads-pods/pods-sidebar-items.injectable.ts
View File
File renamed without changes.
src/renderer/components/+workloads-pods/pods-store.injectable.ts
-14
View File
@@ -1,14 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import { podsStore } from "./pods.store";
const podsStoreInjectable = getInjectable({
id: "pods-store",
instantiate: () => podsStore,
causesSideEffects: true,
});
export default podsStoreInjectable;
src/renderer/components/+workloads-pods/pods.tsx
+95 -36
View File
@@ -8,22 +8,26 @@ import "./pods.scss";
import React, { Fragment } from "react";
import { observer } from "mobx-react";
import { Link } from "react-router-dom";
import { podsStore } from "./pods.store";
import { eventStore } from "../+events/event.store";
import { KubeObjectListLayout } from "../kube-object-list-layout";
import type { Pod } from "../../../common/k8s-api/endpoints";
import { nodesApi } from "../../../common/k8s-api/endpoints";
import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
import { StatusBrick } from "../status-brick";
import { cssNames, getConvertedParts, stopPropagation } from "../../utils";
import toPairs from "lodash/toPairs";
import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils";
import startCase from "lodash/startCase";
import kebabCase from "lodash/kebabCase";
import { apiManager } from "../../../common/k8s-api/api-manager";
import type { ApiManager } from "../../../common/k8s-api/api-manager";
import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { Badge } from "../badge";
import { getDetailsUrl } from "../kube-detail-params";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
import type { EventStore } from "../+events/store";
import type { PodStore } from "./store";
import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable";
import eventStoreInjectable from "../+events/store.injectable";
import podStoreInjectable from "./store.injectable";
enum columnId {
name = "name",
@@ -37,13 +41,44 @@ enum columnId {
status = "status",
}
@observer
export class Pods extends React.Component {
renderContainersStatus(pod: Pod) {
return pod.getContainerStatuses().map(containerStatus => {
const { name, state, ready } = containerStatus;
interface Dependencies {
getDetailsUrl: GetDetailsUrl;
apiManager: ApiManager;
eventStore: EventStore;
podStore: PodStore;
nodeApi: NodeApi;
}
return (
@observer
class NonInjectedPods extends React.Component<Dependencies> {
renderState<T extends string>(name: string, ready: boolean, key: string, data: Partial<Record<T, string | number>> | undefined) {
return data && (
<>
<div className="title">
{name}
{" "}
<span className="text-secondary">
{key}
{ready ? ", ready" : ""}
</span>
</div>
{object.entries(data).map(([name, value]) => (
<div key={name} className="flex gaps align-center">
<div className="name">
{startCase(name)}
</div>
<div className="value">
{value}
</div>
</div>
))}
</>
);
}
renderContainersStatus(pod: Pod) {
return pod.getContainerStatuses()
.map(({ name, state = {}, ready }) => (
<Fragment key={name}>
<StatusBrick
className={cssNames(state, { ready })}
@@ -51,32 +86,27 @@ export class Pods extends React.Component {
formatters: {
tableView: true,
},
children: Object.keys(state).map((status: keyof typeof state) => (
<Fragment key={status}>
<div className="title">
{name} <span className="text-secondary">({status}{ready ? ", ready" : ""})</span>
</div>
{toPairs(state[status]).map(([name, value]) => (
<div key={name} className="flex gaps align-center">
<div className="name">{startCase(name)}</div>
<div className="value">{value}</div>
</div>
))}
</Fragment>
)),
children: (
<>
{this.renderState(name, ready, "running", state.running)}
{this.renderState(name, ready, "waiting", state.waiting)}
{this.renderState(name, ready, "terminated", state.terminated)}
</>
),
}}
/>
</Fragment>
);
});
));
}
render() {
const { apiManager, getDetailsUrl, podStore, eventStore, nodeApi } = this.props;
return (
<SiblingsInTabLayout>
<KubeObjectListLayout
className="Pods"
store={podsStore}
store={podStore}
dependentStores={[eventStore]} // status icon component uses event store
tableId = "workloads_pods"
isConfigurable
@@ -94,7 +124,7 @@ export class Pods extends React.Component {
searchFilters={[
pod => pod.getSearchFields(),
pod => pod.getStatusMessage(),
pod => pod.status.podIP,
pod => pod.status?.podIP,
pod => pod.getNodeName(),
]}
renderHeaderTitle="Pods"
@@ -111,7 +141,13 @@ export class Pods extends React.Component {
{ title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]}
renderTableContents={pod => [
<Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
<Badge
flat
key="name"
label={pod.getName()}
tooltip={pod.getName()}
expandable={false}
/>,
<KubeObjectStatusIcon key="icon" object={pod} />,
pod.getNs(),
this.renderContainersStatus(pod),
@@ -121,19 +157,31 @@ export class Pods extends React.Component {
const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod));
return (
<Badge flat key={name} className="owner" tooltip={name}>
<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(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
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} />,
@@ -144,3 +192,14 @@ export class Pods extends React.Component {
);
}
}
export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
getProps: (di, props) => ({
...props,
apiManager: di.inject(apiManagerInjectable),
getDetailsUrl: di.inject(getDetailsUrlInjectable),
nodeApi: di.inject(nodeApiInjectable),
eventStore: di.inject(eventStoreInjectable),
podStore: di.inject(podStoreInjectable),
}),
});
src/renderer/components/+workloads-pods/store.injectable.ts
+27
View File
@@ -0,0 +1,27 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import assert from "assert";
import podApiInjectable from "../../../common/k8s-api/endpoints/pod.api.injectable";
import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
import { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/manager.injectable";
import { PodStore } from "./store";
import podMetricsApiInjectable from "../../../common/k8s-api/endpoints/pod-metrics.api.injectable";
const podStoreInjectable = getInjectable({
id: "pod-store",
instantiate: (di) => {
assert(di.inject(storesAndApisCanBeCreatedInjectable), "podStore is only available in certain environements");
const api = di.inject(podApiInjectable);
return new PodStore({
podMetricsApi: di.inject(podMetricsApiInjectable),
}, api);
},
injectionToken: kubeObjectStoreInjectionToken,
});
export default podStoreInjectable;
src/renderer/components/+workloads-pods/pods.store.ts → src/renderer/components/+workloads-pods/store.ts
+25 -27
View File
@@ -4,42 +4,43 @@
*/
import countBy from "lodash/countBy";
import { observable, makeObservable } from "mobx";
import { observable } from "mobx";
import type { KubeObjectStoreOptions } from "../../../common/k8s-api/kube-object.store";
import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
import { autoBind, cpuUnitsToNumber, unitsToBytes } from "../../utils";
import type { Pod, PodMetrics } from "../../../common/k8s-api/endpoints";
import { podMetricsApi, podsApi } from "../../../common/k8s-api/endpoints";
import { apiManager } from "../../../common/k8s-api/api-manager";
import type { WorkloadKubeObject } from "../../../common/k8s-api/workload-kube-object";
import { cpuUnitsToNumber, unitsToBytes } from "../../utils";
import type { Pod, PodMetrics, PodApi, PodMetricsApi } from "../../../common/k8s-api/endpoints";
import type { KubeObject, KubeObjectScope } from "../../../common/k8s-api/kube-object";
export class PodsStore extends KubeObjectStore<Pod> {
api = podsApi;
export interface PodStoreDependencies {
readonly podMetricsApi: PodMetricsApi;
}
@observable kubeMetrics = observable.array<PodMetrics>([]);
constructor() {
super();
makeObservable(this);
autoBind(this);
export class PodStore extends KubeObjectStore<Pod, PodApi> {
constructor(
protected readonly dependencies: PodStoreDependencies,
api: PodApi,
opts?: KubeObjectStoreOptions,
) {
super(api, opts);
}
readonly kubeMetrics = observable.array<PodMetrics>([]);
async loadKubeMetrics(namespace?: string) {
try {
this.kubeMetrics.replace(await podMetricsApi.list({ namespace }));
const metrics = await this.dependencies.podMetricsApi.list({ namespace });
this.kubeMetrics.replace(metrics ?? []);
} catch (error) {
console.warn("loadKubeMetrics failed", error);
}
}
getPodsByOwner(workload: WorkloadKubeObject): Pod[] {
if (!workload) return [];
return this.items.filter(pod => {
const owners = pod.getOwnerRefs();
return owners.find(owner => owner.uid === workload.getId());
});
getPodsByOwner(workload: KubeObject<unknown, unknown, KubeObjectScope.Namespace>): Pod[] {
return this.items.filter(pod => (
pod.getOwnerRefs()
.find(owner => owner.uid === workload.getId())
));
}
getPodsByOwnerId(workloadId: string): Pod[] {
@@ -87,6 +88,3 @@ export class PodsStore extends KubeObjectStore<Pod> {
}, empty);
}
}
export const podsStore = new PodsStore();
apiManager.registerStore(podsStore);