103 lines
4.2 KiB
Vue
103 lines
4.2 KiB
Vue
<template>
|
|
<PopupTemplate :heading="StringUtils.format('%s/%s', deployment.metadata.namespace, deployment.metadata.name)" @close="emits('close')">
|
|
<div class="content-l">
|
|
<h2>General</h2>
|
|
<div class="content-m">
|
|
<h3>Deployment</h3>
|
|
<p class="tile-m">{{ deployment.metadata.namespace }}/{{ deployment.metadata.name }}</p>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="content-m">
|
|
<h3>Desired Replicas</h3>
|
|
<p class="tile-m">{{ deployment.spec.replicas }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Current Replicas</h3>
|
|
<p class="tile-m">{{ deployment.status.replicas }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Available Replicas</h3>
|
|
<p class="tile-m">{{ deployment.status.availableReplicas }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Ready Replicas</h3>
|
|
<p class="tile-m">{{ deployment.status.readyReplicas }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Annotations (<span v-if="deployment.metadata.annotations">{{ Object.keys(deployment.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
|
|
<div class="left-center" v-if="deployment.metadata.annotations">
|
|
<div class="content-m">
|
|
<p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.annotations)"><span>{{ key }}:</span> <span style="overflow-wrap:anywhere; white-space: normal; width: 100%;">{{ value }}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Labels (<span v-if="deployment.metadata.labels">{{ Object.keys(deployment.metadata.labels).length }}</span><span v-else>0</span>)</h3>
|
|
<div class="content-m" v-if="deployment.metadata.labels">
|
|
<p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.labels)"><span>{{ key }}:</span> <span>{{ value }}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Pods</h3>
|
|
<div class="col-2">
|
|
<div class="tile-m content-s" v-for="pod in pods">
|
|
<div class="spaced-center">
|
|
<p>{{ pod.metadata.name }}</p>
|
|
<PhaseComponent :phase="pod.status.phase"></PhaseComponent>
|
|
</div>
|
|
<div class="left-center gap-l">
|
|
<div>
|
|
<p class="grayed-out">Age</p>
|
|
<p>{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="grayed-out">Restarts</p>
|
|
<p>{{ Pod.countRestarts(pod) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="grayed-out">Runs On</p>
|
|
<p>{{ pod.spec.nodeName }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PopupTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import PopupTemplate from "~/components/popup/PopupTemplate.vue";
|
|
import type { Deployment } from "~/classes/Deployment";
|
|
import {calcAge, Pod} from "~/classes/Pod";
|
|
|
|
const props = defineProps<{
|
|
deployment: Deployment
|
|
}>()
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'close'): void
|
|
}>()
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === 'Escape')
|
|
{
|
|
emits('close');
|
|
}
|
|
});
|
|
})
|
|
|
|
const pods: Ref<Pod[] | undefined> = ref();
|
|
|
|
onMounted(() => {
|
|
Pod.getByDeployment(props.deployment.metadata.namespace, props.deployment.metadata.name, (_pods: Pod[]) => {
|
|
pods.value = _pods;
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |