91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)">
|
|
<div class="col-2 expand">
|
|
<div class="content-l">
|
|
<h2>General</h2>
|
|
<div class="content-m">
|
|
<h3>Pod</h3>
|
|
<p class="tile-m">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Age</h3>
|
|
<p class="tile-m">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Status</h3>
|
|
<div class="left-center">
|
|
<PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-l">
|
|
<h2>Env</h2>
|
|
<UiInput label="Filter">
|
|
<input type="text" name="" id="" v-model="filter">
|
|
</UiInput>
|
|
<ScrollComponent>
|
|
<div>
|
|
<p class="env" v-for="env, index in filteredEnv">{{ env.key }} = {{ env.value }}</p>
|
|
</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';
|
|
|
|
const base = ref();
|
|
|
|
const props = defineProps<{
|
|
pod: Pod
|
|
}>();
|
|
|
|
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 });
|
|
</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;
|
|
}
|
|
</style>
|