✨Add dynamic logs and pods
This commit is contained in:
parent
4bd0556f65
commit
0a9a5ed787
4
app.vue
4
app.vue
@ -12,7 +12,9 @@ useRouter().beforeEach((route: RouteLocation) => {
|
||||
guard(route.fullPath);
|
||||
});
|
||||
|
||||
guard(useRoute().fullPath);
|
||||
onMounted(() => {
|
||||
guard(useRoute().fullPath);
|
||||
})
|
||||
|
||||
function guard(route: string)
|
||||
{
|
||||
|
||||
@ -242,3 +242,7 @@
|
||||
.width-6rem {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap
|
||||
}
|
||||
9
classes/ConfigMap.ts
Normal file
9
classes/ConfigMap.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { Metadata } from "./Metadata";
|
||||
|
||||
export class ConfigMap
|
||||
{
|
||||
constructor (
|
||||
public metadata: Metadata,
|
||||
public data: Record<string, string>
|
||||
) {}
|
||||
}
|
||||
35
classes/LogRepo.ts
Normal file
35
classes/LogRepo.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import type { Log } from "~/requests/logs";
|
||||
|
||||
export class LogRepo
|
||||
{
|
||||
websocket?: WebSocket = undefined;
|
||||
|
||||
listen(namespace: string, name: string, onReceive: (logs: Log[]) => void)
|
||||
{
|
||||
const websocket = new WebSocket(StringUtils.format("ws://%s/api/logs/%s/%s", useRuntimeConfig().public.apiWsBase, namespace, name));
|
||||
websocket.addEventListener('open', () => {
|
||||
console.info("Opened Websocket.");
|
||||
})
|
||||
websocket.addEventListener("message", (event) => {
|
||||
console.log(event.data);
|
||||
onReceive(JSON.parse(event.data) as Log[]);
|
||||
});
|
||||
const interval = setInterval(() => {
|
||||
console.info("[PING]");
|
||||
websocket.send('[PING]');
|
||||
}, 5000);
|
||||
websocket.addEventListener("close", () => {
|
||||
console.info("Closing websocket.");
|
||||
clearTimeout(interval);
|
||||
});
|
||||
this.websocket = websocket;
|
||||
}
|
||||
|
||||
clear()
|
||||
{
|
||||
if (this.websocket)
|
||||
{
|
||||
this.websocket.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,8 @@ export class Metadata
|
||||
|
||||
constructor (
|
||||
public namespace: string,
|
||||
public name: string
|
||||
public name: string,
|
||||
public labels?: Record<string, string>,
|
||||
public annotations?: Record<string, string>
|
||||
) { }
|
||||
}
|
||||
@ -1,25 +1,18 @@
|
||||
import type { Metadata } from "./Metadata";
|
||||
import type { HasMetadata } from "./ResourceRepo";
|
||||
|
||||
export class NodeStats
|
||||
export class Node implements HasMetadata
|
||||
{
|
||||
constructor (
|
||||
public node: Node,
|
||||
public runningPods: number
|
||||
public metadata: Metadata,
|
||||
public runningPods: number,
|
||||
public status: Status
|
||||
) { }
|
||||
|
||||
relativeCpuUsage?: number;
|
||||
relativeMemory?: number;
|
||||
}
|
||||
|
||||
export class Node
|
||||
{
|
||||
constructor (
|
||||
public metadata: Metadata
|
||||
) { }
|
||||
|
||||
status?: Status;
|
||||
}
|
||||
|
||||
class Status
|
||||
{
|
||||
conditions?: Condition[]
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import dayjs from "dayjs";
|
||||
import advancedFormat from "dayjs/plugin/advancedFormat";
|
||||
import type { Metadata } from "./Metadata";
|
||||
import type { HasMetadata } from "./ResourceRepo";
|
||||
|
||||
export class Pod
|
||||
export class Pod implements HasMetadata
|
||||
{
|
||||
status?: Status
|
||||
spec?: Spec
|
||||
|
||||
constructor (
|
||||
public metadata: Metadata
|
||||
public metadata: Metadata,
|
||||
public spec: Spec
|
||||
) { }
|
||||
}
|
||||
|
||||
class Spec {
|
||||
nodeName?: string;
|
||||
|
||||
constructor (
|
||||
public containers: Container[]
|
||||
) { }
|
||||
}
|
||||
|
||||
class Status
|
||||
@ -21,6 +26,11 @@ class Status
|
||||
phase?: PodStatus
|
||||
}
|
||||
|
||||
class Container
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
enum PodStatus
|
||||
{
|
||||
RUNNING = "Running",
|
||||
@ -38,7 +48,7 @@ export function calcAge(datetime: string | undefined)
|
||||
dayjs.extend(advancedFormat);
|
||||
if(datetime != null)
|
||||
{
|
||||
const today = Number(dayjs().format('X'));
|
||||
const today = Number(dayjs(useSeconds().value).format('X'));
|
||||
const createdAt = Number(dayjs(datetime).format('X'));
|
||||
const dif = today - createdAt;
|
||||
if(dif < 60)
|
||||
|
||||
@ -1,15 +1,102 @@
|
||||
import axios from "axios";
|
||||
import type { Metadata } from "./Metadata";
|
||||
|
||||
export class ResourceRepo<T>
|
||||
export interface HasMetadata {
|
||||
metadata: Metadata
|
||||
}
|
||||
|
||||
export class ResourceEvent<T extends HasMetadata>
|
||||
{
|
||||
private resources: Ref<T[] | undefined> = ref(undefined);
|
||||
private interval: NodeJS.Timeout | undefined = undefined;
|
||||
constructor (
|
||||
public type: string,
|
||||
public resources: T[]
|
||||
) {}
|
||||
}
|
||||
|
||||
static init<T>()
|
||||
export class ResourceRepo<T extends HasMetadata>
|
||||
{
|
||||
private resources: Ref<T[]> = ref([]);
|
||||
private interval: NodeJS.Timeout | undefined = undefined;
|
||||
private websocket: WebSocket | undefined = undefined;
|
||||
|
||||
static init<T extends HasMetadata>()
|
||||
{
|
||||
return new ResourceRepo<T>();
|
||||
}
|
||||
|
||||
listen(resource: string)
|
||||
{
|
||||
const websocket = new WebSocket(StringUtils.format("%s/api/watch/%s/%s", useRuntimeConfig().public.apiWsBase, resource, this.getNamespace()));
|
||||
websocket.addEventListener('open', () => {
|
||||
console.info("Opened Websocket.");
|
||||
})
|
||||
websocket.addEventListener("message", (event) => {
|
||||
const data = JSON.parse(event.data) as ResourceEvent<T>;
|
||||
console.info(StringUtils.format("[%s] Resource", data.type));
|
||||
switch (data.type)
|
||||
{
|
||||
case "INIT":
|
||||
{
|
||||
this.add(data.resources);
|
||||
break;
|
||||
}
|
||||
case "ADDED":
|
||||
{
|
||||
this.add(data.resources);
|
||||
break;
|
||||
}
|
||||
case "MODIFIED":
|
||||
{
|
||||
this.update(data.resources);
|
||||
break;
|
||||
}
|
||||
case "DELETED":
|
||||
{
|
||||
this.delete(data.resources);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
const interval = setInterval(() => {
|
||||
console.info("[PING]");
|
||||
websocket.send('[PING]');
|
||||
}, 5000);
|
||||
websocket.addEventListener("close", () => {
|
||||
console.info("Closing websocket.");
|
||||
clearTimeout(interval);
|
||||
});
|
||||
this.websocket = websocket;
|
||||
}
|
||||
|
||||
private add(resources: T[])
|
||||
{
|
||||
this.resources.value.push(...resources);
|
||||
}
|
||||
|
||||
private delete(resources: T[])
|
||||
{
|
||||
for (const resource of resources)
|
||||
{
|
||||
const index = this.resources.value.findIndex(item => item.metadata.uid === resource.metadata.uid);
|
||||
if (index != null)
|
||||
{
|
||||
this.resources.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private update(resources: T[])
|
||||
{
|
||||
for (const resource of resources)
|
||||
{
|
||||
const index = this.resources.value.findIndex(item => item.metadata.uid === resource.metadata.uid);
|
||||
if (index != null)
|
||||
{
|
||||
this.resources.value[index] = resource;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
load(resourceType: string)
|
||||
{
|
||||
this.refresh(resourceType);
|
||||
@ -19,37 +106,35 @@ export class ResourceRepo<T>
|
||||
clear()
|
||||
{
|
||||
clearTimeout(this.interval);
|
||||
if (this.websocket != null)
|
||||
{
|
||||
this.websocket.close();
|
||||
}
|
||||
}
|
||||
|
||||
get()
|
||||
{
|
||||
return computed(() => {
|
||||
return this.resources.value;
|
||||
return this.resources.value.toSorted((a, b) => a.metadata.name.localeCompare(b.metadata.name));
|
||||
})
|
||||
}
|
||||
|
||||
private refresh(resourceType: string)
|
||||
{
|
||||
const namespace = this.getNamespace();
|
||||
let url = useRuntimeConfig().public.apiBase + '/resources/' + resourceType
|
||||
let url = StringUtils.format("%s/resources/%s", useRuntimeConfig().public.apiBase, resourceType);
|
||||
if (namespace)
|
||||
{
|
||||
url = url + "/" + namespace;
|
||||
url = StringUtils.format("%s/%s", url, namespace);
|
||||
}
|
||||
axios.get<T[]>(url)
|
||||
.then((response) => {
|
||||
this.resources.value = undefined;
|
||||
this.resources.value = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
private getNamespace()
|
||||
{
|
||||
const namespace = useRoute().params.namespace as string;
|
||||
if (namespace !== "_all")
|
||||
{
|
||||
return namespace as string;
|
||||
}
|
||||
return undefined;
|
||||
return useRoute().params.namespace as string;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "./Metadata";
|
||||
import { Metadata } from "./Metadata";
|
||||
import type { HasMetadata } from "./ResourceRepo";
|
||||
|
||||
export class Secret
|
||||
export class Secret implements HasMetadata
|
||||
{
|
||||
constructor (
|
||||
public metadata: Metadata
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import type { Metadata } from "./Metadata";
|
||||
import type { HasMetadata } from "./ResourceRepo";
|
||||
|
||||
export class Service
|
||||
export class Service implements HasMetadata
|
||||
{
|
||||
metadata?: Metadata;
|
||||
spec?: ServiceSpec;
|
||||
|
||||
constructor (
|
||||
public metadata: Metadata
|
||||
) {}
|
||||
}
|
||||
|
||||
export class ServiceSpec
|
||||
|
||||
19
components/ConfigMapComponent.vue
Normal file
19
components/ConfigMapComponent.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="grid-element">{{ configMap.metadata.name }}</p>
|
||||
<p class="grid-element">{{ configMap.metadata.namespace }}</p>
|
||||
<p class="grid-element">{{ Object.keys(configMap.data).length }}</p>
|
||||
<div class="grid-element">
|
||||
<ActionButton v-if="hasAnyRole(getUser(), ['admin', 'maintainer'])">delete</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ConfigMap } from '~/classes/ConfigMap';
|
||||
import { hasAnyRole } from '~/classes/User';
|
||||
|
||||
defineProps<{
|
||||
configMap: ConfigMap
|
||||
}>();
|
||||
</script>
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<SidebarTemplate>
|
||||
<div class="content-l">
|
||||
<div class="content-l" style="display: grid; grid-template-rows: auto 1fr; height: 100%;">
|
||||
<h2>Kubooboo</h2>
|
||||
<ScrollComponent>
|
||||
<div class="content-l">
|
||||
<div class="nav">
|
||||
<NuxtLink class="resources" v-for="[key, value] of resources" :to="getRoute(key, namespace)" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ value }}</NuxtLink>
|
||||
</div>
|
||||
@ -10,6 +12,9 @@
|
||||
<NuxtLink v-for="[key, value] in namespaces" class="namespace" :to="getRoute(resource, key)">{{ value }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollComponent>
|
||||
</div>
|
||||
|
||||
<div class="left-center" v-if="user" @click="() => accountPopup.open()">
|
||||
<UiIcon>account_circle</UiIcon>
|
||||
<p>{{ user.username }}</p>
|
||||
@ -22,7 +27,7 @@ import SidebarTemplate from './SidebarTemplate.vue';
|
||||
|
||||
import { StringUtils, useNamespaceStore } from '#imports';
|
||||
|
||||
const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["stateful-sets", "Stateful Sets"], ["pods", "Pods"], ["secrets", "Secrets"], ["custom-resource-definitions", "CDRs"]]);
|
||||
const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["stateful-sets", "Stateful Sets"], ["pods", "Pods"], ["secrets", "Secrets"], ["config-maps", "Config Maps"], ["custom-resource-definitions", "CDRs"]]);
|
||||
|
||||
const namespaceStore = useNamespaceStore();
|
||||
|
||||
|
||||
@ -8,18 +8,20 @@
|
||||
<div v-if="logs == null" class="center" style="height: 100%; width: 100%">
|
||||
<UiLoadingIcon size="2rem"></UiLoadingIcon>
|
||||
</div>
|
||||
<p>{{ logs }}</p>
|
||||
</PopupTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { LogRepo } from '~/classes/LogRepo';
|
||||
import type { Pod } from '~/classes/Pod';
|
||||
import { getLogs } from '~/requests/logs';
|
||||
import { Log } from '~/requests/logs';
|
||||
|
||||
const base = ref();
|
||||
|
||||
const logs: Ref<Log[] | undefined> = ref(undefined);
|
||||
const logs: Ref<Log[]> = ref([]);
|
||||
|
||||
const props = defineProps<{
|
||||
pod: Pod
|
||||
@ -31,9 +33,11 @@ const emits = defineEmits<{
|
||||
|
||||
const scrollComponent = ref();
|
||||
|
||||
const logRepo = new LogRepo();
|
||||
onMounted(() => {
|
||||
getLogs(props.pod.metadata.uid, (_logs: Log[]) => {
|
||||
logs.value = _logs;
|
||||
logRepo.listen( props.pod.metadata.namespace, props.pod.metadata.name,(_logs: Log[]) => {
|
||||
logs.value.push(..._logs);
|
||||
scrollComponent.value.scrollToBottom();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="grid-element" v-if="nodeStats.node && nodeStats.node.metadata">{{ nodeStats.node.metadata.name }}</p>
|
||||
<p class="grid-element" v-if="nodeStats && nodeStats.metadata">{{ nodeStats.metadata.name }}</p>
|
||||
<div class="grid-element">
|
||||
<p>{{ calcAge(nodeStats.node?.metadata?.creationTimestamp) }}</p>
|
||||
<p>{{ calcAge(nodeStats.metadata?.creationTimestamp) }}</p>
|
||||
</div>
|
||||
<p class="grid-element">{{ nodeStats.runningPods }}</p>
|
||||
<div class="grid-element">
|
||||
@ -18,17 +18,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { NodeStats } from '~/classes/Node';
|
||||
import type { Node } from '~/classes/Node';
|
||||
import NodeReadyComponent from './NodeReadyComponent.vue';
|
||||
import { calcAge } from '~/classes/Pod';
|
||||
|
||||
defineProps<{
|
||||
nodeStats: NodeStats;
|
||||
nodeStats: Node;
|
||||
}>();
|
||||
|
||||
function isReady(nodeStats: NodeStats): boolean | undefined
|
||||
function isReady(nodeStats: Node): boolean | undefined
|
||||
{
|
||||
const conditions = nodeStats.node?.status?.conditions;
|
||||
const conditions = nodeStats.status.conditions;
|
||||
if(conditions != undefined)
|
||||
{
|
||||
for(const condition of conditions)
|
||||
|
||||
@ -11,13 +11,13 @@ const id = crypto.randomUUID();
|
||||
|
||||
function scrollToBottom()
|
||||
{
|
||||
setTimeout(() => {
|
||||
nextTick(() => {
|
||||
const element = document.getElementById(id);
|
||||
if(element)
|
||||
{
|
||||
element.scrollTo({top: element.scrollHeight, behavior: 'instant'});
|
||||
}
|
||||
}, 25)
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
@ -27,15 +27,23 @@ defineExpose({
|
||||
|
||||
<style scoped>
|
||||
.scroll-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.inner-scroll-component {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
17
components/SettingsSidebar.vue
Normal file
17
components/SettingsSidebar.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<SidebarTemplate>
|
||||
<div class="nav">
|
||||
<NuxtLink class="namespace" to="/account/settings">Account</NuxtLink>
|
||||
<NuxtLink class="namespace" to="/account/users">Users</NuxtLink>
|
||||
<NuxtLink class="namespace" to="/account/password">Password</NuxtLink>
|
||||
</div>
|
||||
</SidebarTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -22,6 +22,7 @@
|
||||
padding: 0.35rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.router-link-active {
|
||||
background-color: var(--primary-color);
|
||||
@ -31,7 +32,7 @@
|
||||
height: 1px;
|
||||
background-color: rgb(36, 36, 36);
|
||||
}
|
||||
.nav > * {
|
||||
.nav * {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
28
components/inspect/resources/ConfigMapList.vue
Normal file
28
components/inspect/resources/ConfigMapList.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<TableComponent :loading="configMaps == null">
|
||||
<div class="resource-container config-map-container">
|
||||
<div class="header">
|
||||
<p>Name</p>
|
||||
<p>Namespace</p>
|
||||
<p>Entries</p>
|
||||
<p>Aktionen</p>
|
||||
</div>
|
||||
<ConfigMapComponent v-for="configMap, index in configMaps" :config-map="configMap" class="resource" :class="{ even: index % 2 }"></ConfigMapComponent>
|
||||
</div>
|
||||
</TableComponent>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ConfigMap } from '~/classes/ConfigMap';
|
||||
import { ResourceRepo } from '~/classes/ResourceRepo';
|
||||
|
||||
const configMaps = ResourceRepo.init<ConfigMap>().load('config-maps').get();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.config-map-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr auto;
|
||||
}
|
||||
</style>
|
||||
@ -15,11 +15,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { NodeStats } from '~/classes/Node';
|
||||
import type { Node } from '~/classes/Node';
|
||||
import { ResourceRepo } from '~/classes/ResourceRepo';
|
||||
import NodeComponent from '~/components/NodeComponent.vue';
|
||||
|
||||
const node = ResourceRepo.init<NodeStats>().load('nodes').get();
|
||||
const node = ResourceRepo.init<Node>().load('nodes').get();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<TableComponent :loading="pods == null">
|
||||
<TableComponent :loading="pods == null" v-for="pods in [repo.get().value]">
|
||||
<div class="resource-container pod-container">
|
||||
<div class="header">
|
||||
<p>Pod</p>
|
||||
<p>Namespace</p>
|
||||
<p>Alter</p>
|
||||
<p>Node</p>
|
||||
<p>Containers</p>
|
||||
<p>Status</p>
|
||||
<p>Aktionen</p>
|
||||
</div>
|
||||
@ -19,5 +20,18 @@ import type { Pod } from '~/classes/Pod';
|
||||
import { ResourceRepo } from '~/classes/ResourceRepo';
|
||||
import PodComponent from '~/components/pod/PodComponent.vue';
|
||||
|
||||
const pods = ResourceRepo.init<Pod>().load('pods').get();
|
||||
const repo = ResourceRepo.init<Pod>();
|
||||
onMounted(() => {
|
||||
repo.listen("pods");
|
||||
});
|
||||
onUnmounted(() => {
|
||||
repo.clear();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pod-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr 1fr 1fr 1fr auto auto;
|
||||
}
|
||||
</style>
|
||||
@ -2,8 +2,9 @@
|
||||
<div>
|
||||
<p class="grid-element pointer" v-if="pod.metadata" @click="() => showViewPopup = true">{{ pod.metadata.name }}</p>
|
||||
<p class="grid-element" v-if="pod.metadata">{{ pod.metadata.namespace }}</p>
|
||||
<p class="grid-element" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
||||
<p class="grid-element no-wrap" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
||||
<p class="grid-element" v-if="pod.spec">{{ pod.spec.nodeName }}</p>
|
||||
<p class="grid-element">{{ pod.spec.containers.length }}</p>
|
||||
<div class="grid-element">
|
||||
<PhaseComponent v-if="pod.status" :phase="pod.status.phase"></PhaseComponent>
|
||||
</div>
|
||||
@ -24,7 +25,7 @@ import { calcAge } from '~/classes/Pod';
|
||||
import { hasAnyRole } from '~/classes/User';
|
||||
import PodDeletePopup from './view/PodDeletePopup.vue';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
pod: Pod
|
||||
}>();
|
||||
|
||||
|
||||
@ -12,20 +12,32 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<UiButton class="width-6rem hollow">Cancel</UiButton>
|
||||
<UiButton class="width-6rem" icon="delete" reverse>Delete</UiButton>
|
||||
<UiButton :loading="loading" class="width-6rem hollow">Cancel</UiButton>
|
||||
<UiButton :loading="loading" class="width-6rem" icon="delete" reverse :onclick="() => del()">Delete</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</PopupTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Metadata } from '~/classes/Metadata';
|
||||
import { type Pod } from '~/classes/Pod';
|
||||
import { deletePod } from '~/requests/pod';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
pod: Pod
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
function del()
|
||||
{
|
||||
const metadata: Metadata = props.pod.metadata;
|
||||
loading.value = true;
|
||||
deletePod(metadata.namespace, metadata.name, () => {
|
||||
emits('close');
|
||||
});
|
||||
}
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
<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">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
|
||||
<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">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
|
||||
<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>
|
||||
@ -17,11 +24,26 @@
|
||||
<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 label="Filter">
|
||||
<input type="text" name="" id="" v-model="filter">
|
||||
<UiInput>
|
||||
<input type="text" name="" id="" v-model="filter" placeholder="Filter...">
|
||||
</UiInput>
|
||||
<ScrollComponent>
|
||||
<div>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { StringUtils } from "./utils/StringUtils";
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-05-15',
|
||||
@ -10,7 +12,8 @@ export default defineNuxtConfig({
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBase: process.env.NUXT_PUBLIC_API_BASE
|
||||
apiBase: StringUtils.format("%s://%s", process.env.NUXT_PUBLIC_API_SCHEMA as string, process.env.NUXT_PUBLIC_API_HOST as string),
|
||||
apiWsBase: StringUtils.format("%s://%s", process.env.NUXT_PUBLIC_API_WS_SCHEMA as string, process.env.NUXT_PUBLIC_API_HOST as string)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-columns: 13rem 1fr;
|
||||
min-height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -6,17 +6,19 @@
|
||||
<DeploymentComponent v-else-if="resource === 'deployments'"></DeploymentComponent>
|
||||
<NodeComponent v-else-if="resource === 'nodes'"></NodeComponent>
|
||||
<SecretComponent v-else-if="resource === 'secrets'"></SecretComponent>
|
||||
<ConfigMapList v-else-if="resource === 'config-maps'"></ConfigMapList>
|
||||
<p v-else>Invalid resource</p>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PodComponent from '~/components/inspect/resources/PodComponent.vue';
|
||||
import CustomResourceDefinitionComponent from '~/components/inspect/resources/CustomResourceDefinitionComponent.vue';
|
||||
import IngressComponent from '~/components/inspect/resources/IngressComponent.vue';
|
||||
import ServiceComponent from '~/components/inspect/resources/ServiceComponent.vue';
|
||||
import DeploymentComponent from '~/components/inspect/resources/DeploymentComponent.vue';
|
||||
import NodeComponent from '~/components/inspect/resources/NodeComponent.vue';
|
||||
import SecretComponent from '~/components/inspect/resources/SecretComponent.vue';
|
||||
import PodComponent from '~/components/inspect/resources/PodList.vue';
|
||||
import CustomResourceDefinitionComponent from '~/components/inspect/resources/CustomResourceDefinitionList.vue';
|
||||
import IngressComponent from '~/components/inspect/resources/IngressList.vue';
|
||||
import ServiceComponent from '~/components/inspect/resources/ServiceList.vue';
|
||||
import DeploymentComponent from '~/components/inspect/resources/DeploymentList.vue';
|
||||
import NodeComponent from '~/components/inspect/resources/NodeList.vue';
|
||||
import SecretComponent from '~/components/inspect/resources/SecretList.vue';
|
||||
import ConfigMapList from '~/components/inspect/resources/ConfigMapList.vue';
|
||||
|
||||
const resource = useRoute().params.resource as string;
|
||||
</script>
|
||||
19
pages/account/settings.vue
Normal file
19
pages/account/settings.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<SettingsSidebar></SettingsSidebar>
|
||||
<div>
|
||||
<NuxtPage></NuxtPage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
</style>
|
||||
13
pages/account/settings/password.vue
Normal file
13
pages/account/settings/password.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
pages/account/settings/users.vue
Normal file
13
pages/account/settings/users.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -15,9 +15,9 @@ export function getPods(namespace: string | undefined, onSuccess: (pods: Pod[])
|
||||
.catch();
|
||||
}
|
||||
|
||||
export function deletePod(id: string | undefined, onSuccess: () => void)
|
||||
export function deletePod(namespace: string, name: string, onSuccess: () => void)
|
||||
{
|
||||
axios.delete(useRuntimeConfig().public.apiBase + '/pods/' + id, {
|
||||
axios.delete(StringUtils.format('%s/pods/%s/%s', useRuntimeConfig().public.apiBase, namespace, name), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + requireToken()
|
||||
}
|
||||
|
||||
7
utils/useSeconds.ts
Normal file
7
utils/useSeconds.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export function useSeconds() {
|
||||
const seconds = ref(new Date());
|
||||
setInterval(() => {
|
||||
seconds.value = new Date();
|
||||
}, 1000)
|
||||
return seconds;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user