60 lines
3.0 KiB
Vue
60 lines
3.0 KiB
Vue
<template>
|
|
<PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)">
|
|
<div class="col-2 expand">
|
|
<ScrollComponent>
|
|
<div class="content-l">
|
|
<h2>General</h2>
|
|
<div class="content-m">
|
|
<h3>Pod</h3>
|
|
<p class="tile-m" v-if="pod.metadata">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
|
|
</div>
|
|
<div class="col-2 ">
|
|
<div class="content-m">
|
|
<h3>Age</h3>
|
|
<p class="tile-m" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Running On</h3>
|
|
<p class="tile-m" v-if="pod.metadata">{{ pod.spec.nodeName }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Status</h3>
|
|
<div class="left-center">
|
|
<PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Annotations (<span v-if="pod.metadata.annotations">{{ Object.keys(pod.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
|
|
<div class="left-center" v-if="pod.metadata.annotations">
|
|
<div class="content-m">
|
|
<p class="tile-m" v-for="[key, value] in Object.entries(pod.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="pod.metadata.labels">{{ Object.keys(pod.metadata.labels).length }}</span><span v-else>0</span>)</h3>
|
|
<div class="content-m" v-if="pod.metadata.labels">
|
|
<p class="tile-m" v-for="[key, value] in Object.entries(pod.metadata.labels)"><span>{{ key }}:</span> <span>{{ value }}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Containers</h3>
|
|
<p class="tile-m" v-for="container in pod.spec.containers">{{ container.name }}: {{ container.image }}</p>
|
|
</div>
|
|
</div>
|
|
</ScrollComponent>
|
|
<EnvironmentViewer :pod="pod"></EnvironmentViewer>
|
|
</div>
|
|
</PopupTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { calcAge, type Pod } from '~/classes/Pod';
|
|
import PhaseComponent from '~/components/PhaseComponent.vue';
|
|
import ScrollComponent from '~/components/ScrollComponent.vue';
|
|
import EnvironmentViewer from './EnvironmentViewer.vue';
|
|
import {usePopup} from "~/components/popup/Popup";
|
|
|
|
const pod = usePopup().data() as Pod;
|
|
</script> |