64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
|
<SidebarTemplate>
|
|
<ScrollComponent>
|
|
<div class="content-l">
|
|
<div class="nav">
|
|
<NuxtLink class="resources" v-for="key in ResourceType" :to="getRoute(key, namespace)" :class="{ 'router-link-active': useRoute().params.resource === key }">{{ RESOURCE_DISPLAY_NAMES.get(key) }}</NuxtLink>
|
|
</div>
|
|
<div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
|
|
<div class="nav" :class="{ hide: !inNamespaceScopedResource }">
|
|
<NuxtLink v-for="[key, value] in namespaces" class="namespace" :to="getRoute(resource, key)">{{ value }}</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</ScrollComponent>
|
|
<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 { StringUtils, useNamespaceStore } from '#imports';
|
|
import { RESOURCE_DISPLAY_NAMES, ResourceType } from '~/classes/ResourceTypes';
|
|
|
|
const namespaceStore = useNamespaceStore();
|
|
|
|
const namespaces = computed(() => namespaceStore.getNamespaceNames(true));
|
|
|
|
const user = getUser();
|
|
|
|
const accountPopup = ref();
|
|
|
|
const resource = computed(() => {
|
|
return useRoute().params.resource as string;
|
|
});
|
|
|
|
const namespace = computed(() => {
|
|
return useRoute().params.namespace as string;
|
|
});
|
|
|
|
function getRoute(resource: string, namespace: string) {
|
|
return StringUtils.format("/account/inspect/%s/%s", resource, namespace)
|
|
}
|
|
|
|
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', 'pvs', 'namespaces'].includes(resource))
|
|
{
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
</script> |