- {i.name}:
+ .filter(i => {
+ //filter out 0 values for CPU and mem on pod info
+ return i.name !== 'Node' && !((i.name === podRequests.CPU || i.name === podRequests.MEMORY) && parseInt(i.value, 10) === 0);
+ })
+ .map(i => {
+ //formatted the values for cpu and mem
+ const formattedValue = formatPodMetric(i.name, i.value);
+ return (
+
+
+ {i.name}:
+
+
{formattedValue}
-
{i.value}
-
- ))}
+ );
+ })}
{pod.createdAt && (
@@ -49,3 +57,17 @@ export const PodTooltip = (props: {pod: Pod}) => {
);
};
+
+function formatPodMetric(name: string, value: string) {
+ const numericValue = parseInt(value, 10);
+
+ switch (name) {
+ case podRequests.CPU:
+ return `${numericValue}m`;
+ case podRequests.MEMORY: {
+ return formatSize(numericValue / 1000); // divide by 1000 to convert "milli bytes" to bytes
+ }
+ default:
+ return value;
+ }
+}
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.scss b/ui/src/app/applications/components/application-pod-view/pod-view.scss
index 372bf1b0fa6ca..af479bb94b4bf 100644
--- a/ui/src/app/applications/components/application-pod-view/pod-view.scss
+++ b/ui/src/app/applications/components/application-pod-view/pod-view.scss
@@ -59,7 +59,7 @@ $pod-age-icon-clr: #ffce25;
}
}
&__info {
- margin-top: 1em;
+ margin-top: 3em;
display: flex;
justify-content: end;
div {
@@ -69,6 +69,22 @@ $pod-age-icon-clr: #ffce25;
margin-right: 5px;
padding: 3px 5px;
}
+ #cost {
+ background-color: $argo-color-gray-7;
+ color: whitesmoke;
+ padding: 5px 8px;
+ font-weight: bold;
+ margin-right: auto;
+ transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border: 1px solid lighten($argo-color-gray-7, 10%);
+
+
+ &:hover {
+ background-color: darken($argo-color-gray-7, 10%);
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+ }
+ }
}
&__info--large {
margin: 1em 0;
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.tsx b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
index caba162b82eba..7c0ea520c5348 100644
--- a/ui/src/app/applications/components/application-pod-view/pod-view.tsx
+++ b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
@@ -11,7 +11,7 @@ import {PodViewPreferences, services, ViewPreferences} from '../../../shared/ser
import {ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
import {ResourceIcon} from '../resource-icon';
import {ResourceLabel} from '../resource-label';
-import {ComparisonStatusIcon, isYoungerThanXMinutes, HealthStatusIcon, nodeKey, PodHealthIcon} from '../utils';
+import {ComparisonStatusIcon, isYoungerThanXMinutes, HealthStatusIcon, nodeKey, PodHealthIcon, podRequests} from '../utils';
import './pod-view.scss';
import {PodTooltip} from './pod-tooltip';
@@ -90,13 +90,13 @@ export class PodView extends React.Component
{
if (group.type === 'node' && group.name === 'Unschedulable' && podPrefs.hideUnschedulable) {
return ;
}
+ const GroupPodResources = calculatePodGrouprResquests(group.pods);
return (
-
this.props.onItemClick(group.fullName)}
- style={group.kind === 'node' ? {} : {cursor: 'pointer'}}>
-
+
+
this.props.onItemClick(group.fullName)}>
@@ -138,6 +138,28 @@ export class PodView extends React.Component
{
) : (
+ {
+
+ Requests:
+
+
+ CPU:
+
+
{GroupPodResources.cpuRequest}
+
+
+ Memory:
+
+
{GroupPodResources.memoryRequests}
+
Requests
+
+ }
{group.createdAt ? (
@@ -369,7 +391,7 @@ const labelForSortMode = {
};
const sizes = ['Bytes', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
-function formatSize(bytes: number) {
+export function formatSize(bytes: number) {
if (!bytes) {
return '0 Bytes';
}
@@ -388,6 +410,31 @@ function formatMetric(name: ResourceName, val: number) {
return (val || '0') + 'm';
}
+function calculatePodGrouprResquests(pods: Pod[]) {
+ const resources = {
+ cpu: 0,
+ memory: 0
+ };
+
+ pods.forEach(pod => {
+ pod.info?.forEach(info => {
+ const numericValue = parseInt(info.value, 10);
+
+ if (info.name === podRequests.CPU) {
+ resources.cpu += numericValue;
+ }
+ if (info.name === podRequests.MEMORY) {
+ resources.memory += numericValue;
+ }
+ });
+ });
+
+ return {
+ cpuRequest: `${resources.cpu}m`,
+ memoryRequests: `${formatSize(resources.memory / 1000)}` // divide by 1000 to convert "milli bytes" to bytes
+ };
+}
+
function renderStats(info: HostResourceInfo) {
const neighborsHeight = 100 * (info.requestedByNeighbors / info.capacity);
const appHeight = 100 * (info.requestedByApp / info.capacity);
diff --git a/ui/src/app/applications/components/utils.test.tsx b/ui/src/app/applications/components/utils.test.tsx
index 2f42d34b0b42d..0ebe983b91bce 100644
--- a/ui/src/app/applications/components/utils.test.tsx
+++ b/ui/src/app/applications/components/utils.test.tsx
@@ -323,6 +323,72 @@ describe('getPodStateReason', () => {
expect(reason).toBe('Running');
});
+ it('TestGetPodWithInitialContainerInfoWithResources', () => {
+ const podYaml = `
+ apiVersion: "v1"
+ kind: "Pod"
+ metadata:
+ labels:
+ app: "app-with-initial-container"
+ name: "app-with-initial-container-5f46976fdb-vd6rv"
+ namespace: "default"
+ ownerReferences:
+ - apiVersion: "apps/v1"
+ kind: "ReplicaSet"
+ name: "app-with-initial-container-5f46976fdb"
+ spec:
+ containers:
+ - image: "alpine:latest"
+ imagePullPolicy: "Always"
+ name: "app-with-initial-container"
+ resources:
+ requests:
+ cpu: "100m"
+ memory: "128Mi"
+ limits:
+ cpu: "500m"
+ memory: "512Mi"
+ initContainers:
+ - image: "alpine:latest"
+ imagePullPolicy: "Always"
+ name: "app-with-initial-container-logshipper"
+ resources:
+ requests:
+ cpu: "50m"
+ memory: "64Mi"
+ limits:
+ cpu: "250m"
+ memory: "256Mi"
+ nodeName: "minikube"
+ status:
+ containerStatuses:
+ - image: "alpine:latest"
+ name: "app-with-initial-container"
+ ready: true
+ restartCount: 0
+ started: true
+ state:
+ running:
+ startedAt: "2024-10-08T08:44:25Z"
+ initContainerStatuses:
+ - image: "alpine:latest"
+ name: "app-with-initial-container-logshipper"
+ ready: true
+ restartCount: 0
+ started: false
+ state:
+ terminated:
+ exitCode: 0
+ reason: "Completed"
+ phase: "Running"
+`;
+
+ const pod = jsYaml.load(podYaml);
+
+ const {reason} = getPodStateReason(pod as State);
+ expect(reason).toBe('Running');
+ });
+
it('TestGetPodInfoWithSidecar', () => {
const podYaml = `
apiVersion: v1
@@ -631,6 +697,40 @@ status:
expect(reason).toBe('Completed');
});
+ it('TestPodConditionSucceededWithResources', () => {
+ const podYaml = `
+ apiVersion: v1
+ kind: Pod
+ metadata:
+ name: test8
+ spec:
+ nodeName: minikube
+ containers:
+ - name: container
+ resources:
+ requests:
+ cpu: "50m"
+ memory: "64Mi"
+ limits:
+ cpu: "250m"
+ memory: "256Mi"
+ status:
+ phase: Succeeded
+ containerStatuses:
+ - ready: false
+ restartCount: 0
+ state:
+ terminated:
+ reason: Completed
+ exitCode: 0
+`;
+ const pod = jsYaml.load(podYaml);
+
+ const {reason} = getPodStateReason(pod as State);
+
+ expect(reason).toBe('Completed');
+ });
+
it('TestPodConditionFailed', () => {
const podYaml = `
apiVersion: v1
@@ -658,6 +758,40 @@ status:
expect(reason).toBe('Error');
});
+ it('TestPodConditionFailedWithResources', () => {
+ const podYaml = `
+apiVersion: v1
+kind: Pod
+metadata:
+ name: test9
+spec:
+ nodeName: minikube
+ containers:
+ - name: container
+ resources:
+ requests:
+ cpu: "50m"
+ memory: "64Mi"
+ limits:
+ cpu: "250m"
+ memory: "256Mi"
+status:
+ phase: Failed
+ containerStatuses:
+ - ready: false
+ restartCount: 0
+ state:
+ terminated:
+ reason: Error
+ exitCode: 1
+`;
+ const pod = jsYaml.load(podYaml);
+
+ const {reason} = getPodStateReason(pod as State);
+
+ expect(reason).toBe('Error');
+ });
+
it('TestPodConditionSucceededWithDeletion', () => {
const podYaml = `
apiVersion: v1
diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
index 54ca382cdcbd4..7a0de70b40408 100644
--- a/ui/src/app/applications/components/utils.tsx
+++ b/ui/src/app/applications/components/utils.tsx
@@ -1471,3 +1471,9 @@ export const userMsgsList: {[key: string]: string} = {
groupNodes: `Since the number of pods has surpassed the threshold pod count of 15, you will now be switched to the group node view.
If you prefer the tree view, you can simply click on the Group Nodes toolbar button to deselect the current view.`
};
+
+// constant for podrequests
+export const podRequests = {
+ CPU: 'Requests (CPU)',
+ MEMORY: 'Requests (MEM)'
+} as const;