frontend/components/InspectSidebar.vue

55 lines
2.0 KiB
Vue

<template>
<SidebarTemplate>
<div class="content-l">
<h2>Kubooboo</h2>
<div class="nav">
<NuxtLink class="resources" v-for="[key, value] of resources" :to="'/account/inspect/' + key + '/_all'" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ value }}</NuxtLink>
</div>
<div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
<div class="nav" :class="{ hide: !inNamespaceScopedResource }">
<NuxtLink class="namespace" :to="base + '/_all'">Alle</NuxtLink>
<NuxtLink v-for="namespace in namespaces" class="namespace" :to="base + '/' + namespace.metadata.name">{{ namespace.metadata.name }}</NuxtLink>
</div>
</div>
<div class="left-center" v-if="user" @click="() => accountPopup.open()">
<UiIcon>account_circle</UiIcon>
<p>{{ user.username }}</p>
</div>
</SidebarTemplate>
</template>
<script setup lang="ts">
import SidebarTemplate from './SidebarTemplate.vue';
import { useNamespaceStore } from '#imports';
const resources = new Map<string, string>([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["pods", "Pods"], ["custom-resource-definitions", "CDRs"]]);
const namespaceStore = useNamespaceStore();
const namespaces = computed(namespaceStore.getNamespaces);
const currentNamespace = computed(namespaceStore.getCurrentNamespace)
const user = getUser();
const accountPopup = ref();
const base = computed(() => {
const resource = useRoute().params.resource as string;
if (resource)
{
return '/account/inspect/' + resource;
}
throw new Error();
})
const inNamespaceScopedResource: ComputedRef<boolean> = computed(() => {
const resource = useRoute().params.resource as string;
if(['custom-resource-definitions', 'nodes'].includes(resource))
{
return false;
}
return true;
});
</script>