137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<template>
|
|
<PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)" @close="emits('close')">
|
|
<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>
|
|
</ScrollComponent>
|
|
<div class="content-l">
|
|
<h2>Env</h2>
|
|
<UiInput>
|
|
<input type="text" name="" id="" v-model="filter" placeholder="Filter...">
|
|
</UiInput>
|
|
<ScrollComponent>
|
|
<div>
|
|
<div class="env" v-for="env in filteredEnv">
|
|
<UiMask class="spaced-center" :prefix="env.key" :enabled="isSensitive(env.key)" :value="env.value"></UiMask>
|
|
</div>
|
|
</div>
|
|
</ScrollComponent>
|
|
</div>
|
|
</div>
|
|
</PopupTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { calcAge, type Pod } from '~/classes/Pod';
|
|
import PhaseComponent from '~/components/PhaseComponent.vue';
|
|
import { EnvVar } from '../env/EnvVar';
|
|
import ScrollComponent from '~/components/ScrollComponent.vue';
|
|
import UiMask from '~/components/ui/UiMask.vue';
|
|
|
|
const base = ref();
|
|
|
|
const props = defineProps<{
|
|
pod: Pod
|
|
}>();
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'close'): void
|
|
}>()
|
|
|
|
const envs: Ref<EnvVar[] | undefined> = ref(undefined);
|
|
onMounted(() => {
|
|
EnvVar.get(props.pod.metadata.namespace, props.pod.metadata.name, (_envs: EnvVar[]) => {
|
|
envs.value = _envs;
|
|
});
|
|
})
|
|
|
|
const filter = ref("");
|
|
const filteredEnv = computed(() => {
|
|
if (envs.value)
|
|
{
|
|
return envs.value.filter(item => item.key.toLowerCase().includes(filter.value.toLowerCase()));
|
|
}
|
|
});
|
|
|
|
function open() {
|
|
base.value.open();
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('keydown', (event) => {
|
|
if(event.key === 'Escape')
|
|
{
|
|
base.value.close();
|
|
}
|
|
});
|
|
})
|
|
|
|
defineExpose({ open });
|
|
|
|
function isSensitive(key: string)
|
|
{
|
|
const markers = ["token", "key", "password", "secret", "private", "credential", "auth", "jwt"];
|
|
for (const marker of markers)
|
|
{
|
|
if (key.toLowerCase().includes(marker) && !key.toLowerCase().includes("public"))
|
|
{
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.env {
|
|
background-color: var(--shade-light);
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.env.env:nth-of-type(2n) {
|
|
background-color: var(--shade-dark);
|
|
}
|
|
.env:hover {
|
|
background-color: #cecece;
|
|
}
|
|
.env {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
</style>
|