From fe3dcd2165e0d9ee8b94b6976ab210b9c454c05b Mon Sep 17 00:00:00 2001 From: "andreas.dinauer" Date: Thu, 30 Oct 2025 21:16:28 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20New=20Routes=20for=20resources?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- classes/CustomResourceDefinition.ts | 16 ++++++ classes/Namespace.ts | 4 +- classes/ResourceRepo.ts | 55 +++++++++++++++++++ components/InspectSidebar.vue | 30 +++++----- components/ScrollComponent.vue | 2 + components/SidebarTemplate.vue | 6 +- components/TableComponent.vue | 32 +++++++++++ .../deployments/DeploymentComponent.vue | 1 - .../CustomResourceDefinitionComponent.vue | 27 +++++++++ .../inspect/resources/DeploymentComponent.vue | 27 +++++++++ .../inspect/resources/IngressComponent.vue | 24 ++++++++ .../inspect/resources/NodeComponent.vue | 28 ++++++++++ components/inspect/resources/PodComponent.vue | 23 ++++++++ .../inspect/resources/ServiceComponent.vue | 26 +++++++++ components/ui/UiLoadingIcon.vue | 1 + pages/account/inspect/[resource].vue | 10 ++++ .../inspect/[resource]/[namespace].vue | 20 +++++++ pages/account/inspect/deployments.vue | 50 ----------------- pages/account/inspect/ingresses.vue | 33 ----------- pages/account/inspect/nodes.vue | 47 ---------------- pages/account/inspect/pods.vue | 55 ------------------- pages/account/inspect/services.vue | 53 ------------------ pages/account/inspect/statefulsets.vue | 14 ----- .../inspect/statefulsets/[namespace].vue | 3 - pages/index.vue | 2 +- stores/NamespaceStore.ts | 4 +- 26 files changed, 317 insertions(+), 276 deletions(-) create mode 100644 classes/CustomResourceDefinition.ts create mode 100644 classes/ResourceRepo.ts create mode 100644 components/TableComponent.vue create mode 100644 components/inspect/resources/CustomResourceDefinitionComponent.vue create mode 100644 components/inspect/resources/DeploymentComponent.vue create mode 100644 components/inspect/resources/IngressComponent.vue create mode 100644 components/inspect/resources/NodeComponent.vue create mode 100644 components/inspect/resources/PodComponent.vue create mode 100644 components/inspect/resources/ServiceComponent.vue create mode 100644 pages/account/inspect/[resource].vue create mode 100644 pages/account/inspect/[resource]/[namespace].vue delete mode 100644 pages/account/inspect/deployments.vue delete mode 100644 pages/account/inspect/ingresses.vue delete mode 100644 pages/account/inspect/nodes.vue delete mode 100644 pages/account/inspect/pods.vue delete mode 100644 pages/account/inspect/services.vue delete mode 100644 pages/account/inspect/statefulsets.vue delete mode 100644 pages/account/inspect/statefulsets/[namespace].vue diff --git a/classes/CustomResourceDefinition.ts b/classes/CustomResourceDefinition.ts new file mode 100644 index 0000000..9215a1f --- /dev/null +++ b/classes/CustomResourceDefinition.ts @@ -0,0 +1,16 @@ +import type { Metadata } from "./Metadata"; + +export class CustomResourceDefinition +{ + constructor ( + public metadata: Metadata, + public spec: Spec + ) { } +} + +export class Spec +{ + constructor ( + public group: string + ) { } +} \ No newline at end of file diff --git a/classes/Namespace.ts b/classes/Namespace.ts index a45dab7..a04b5dd 100644 --- a/classes/Namespace.ts +++ b/classes/Namespace.ts @@ -2,5 +2,7 @@ import type { Metadata } from "./Metadata"; export class Namespace { - metadata?: Metadata; + constructor ( + public metadata: Metadata + ) { } } \ No newline at end of file diff --git a/classes/ResourceRepo.ts b/classes/ResourceRepo.ts new file mode 100644 index 0000000..b21cfd6 --- /dev/null +++ b/classes/ResourceRepo.ts @@ -0,0 +1,55 @@ +import axios from "axios"; + +export class ResourceRepo +{ + private resources: Ref = ref(undefined); + private interval: NodeJS.Timeout | undefined = undefined; + + static init() + { + return new ResourceRepo(); + } + + load(resourceType: string) + { + this.refresh(resourceType); + return this; + } + + clear() + { + clearTimeout(this.interval); + } + + get() + { + return computed(() => { + return this.resources.value; + }) + } + + private refresh(resourceType: string) + { + const namespace = this.getNamespace(); + let url = useRuntimeConfig().public.apiBase + '/resources/' + resourceType + if (namespace) + { + url = url + "/" + namespace; + } + axios.get(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; + } +} \ No newline at end of file diff --git a/components/InspectSidebar.vue b/components/InspectSidebar.vue index 94f1151..2b6477a 100644 --- a/components/InspectSidebar.vue +++ b/components/InspectSidebar.vue @@ -3,20 +3,12 @@

Kubooboo

- Nodes - Ingresses - Services - Deployments - Pods + {{ value }}
-
-
-

Alle

-
-
-

{{ namespace.metadata.name }}

-
+
+ Alle + {{ namespace.metadata.name }}
@@ -31,6 +23,8 @@ import SidebarTemplate from './SidebarTemplate.vue'; import { useNamespaceStore } from '#imports'; +const resources = new Map([["nodes", "Nodes"], ["ingresses", "Ingresses"], ["services", "Services"], ["deployments", "Deployments"], ["pods", "Pods"], ["custom-resource-definitions", "CDRs"]]); + const namespaceStore = useNamespaceStore(); const namespaces = computed(namespaceStore.getNamespaces); @@ -41,8 +35,18 @@ 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 = computed(() => { - if(useRoute().fullPath.startsWith('/account/inspect/nodes')) + const resource = useRoute().params.resource as string; + if(['custom-resource-definitions', 'nodes'].includes(resource)) { return false; } diff --git a/components/ScrollComponent.vue b/components/ScrollComponent.vue index 9ce61d2..d97d348 100644 --- a/components/ScrollComponent.vue +++ b/components/ScrollComponent.vue @@ -35,5 +35,7 @@ defineExpose({ width: 100%; position: absolute; min-height: 100%; + display: grid; + grid-template-rows: 1fr; } \ No newline at end of file diff --git a/components/SidebarTemplate.vue b/components/SidebarTemplate.vue index ec4b39b..75d48ca 100644 --- a/components/SidebarTemplate.vue +++ b/components/SidebarTemplate.vue @@ -24,10 +24,8 @@ border-radius: 0.25rem; cursor: pointer; } -.namespace.active, .resources.router-link-active { - background-color: var(--primary-color) -} -.namespace.active *, .resources.router-link-active { +.router-link-active { + background-color: var(--primary-color); color: white; } .divider { diff --git a/components/TableComponent.vue b/components/TableComponent.vue new file mode 100644 index 0000000..3212c9b --- /dev/null +++ b/components/TableComponent.vue @@ -0,0 +1,32 @@ + + + + + + + \ No newline at end of file diff --git a/components/deployments/DeploymentComponent.vue b/components/deployments/DeploymentComponent.vue index b26fbf0..f7c24f1 100644 --- a/components/deployments/DeploymentComponent.vue +++ b/components/deployments/DeploymentComponent.vue @@ -14,7 +14,6 @@ + + \ No newline at end of file diff --git a/components/inspect/resources/DeploymentComponent.vue b/components/inspect/resources/DeploymentComponent.vue new file mode 100644 index 0000000..699f00b --- /dev/null +++ b/components/inspect/resources/DeploymentComponent.vue @@ -0,0 +1,27 @@ + + + + + \ No newline at end of file diff --git a/components/inspect/resources/IngressComponent.vue b/components/inspect/resources/IngressComponent.vue new file mode 100644 index 0000000..56911a6 --- /dev/null +++ b/components/inspect/resources/IngressComponent.vue @@ -0,0 +1,24 @@ + + + + + \ No newline at end of file diff --git a/components/inspect/resources/NodeComponent.vue b/components/inspect/resources/NodeComponent.vue new file mode 100644 index 0000000..893f9ca --- /dev/null +++ b/components/inspect/resources/NodeComponent.vue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/components/inspect/resources/PodComponent.vue b/components/inspect/resources/PodComponent.vue new file mode 100644 index 0000000..91a7684 --- /dev/null +++ b/components/inspect/resources/PodComponent.vue @@ -0,0 +1,23 @@ + + + \ No newline at end of file diff --git a/components/inspect/resources/ServiceComponent.vue b/components/inspect/resources/ServiceComponent.vue new file mode 100644 index 0000000..fff6f04 --- /dev/null +++ b/components/inspect/resources/ServiceComponent.vue @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file diff --git a/components/ui/UiLoadingIcon.vue b/components/ui/UiLoadingIcon.vue index 4d1f4ac..31219a7 100644 --- a/components/ui/UiLoadingIcon.vue +++ b/components/ui/UiLoadingIcon.vue @@ -9,6 +9,7 @@ import UiIcon from './UiIcon.vue'; \ No newline at end of file diff --git a/pages/account/inspect/[resource]/[namespace].vue b/pages/account/inspect/[resource]/[namespace].vue new file mode 100644 index 0000000..ee4101d --- /dev/null +++ b/pages/account/inspect/[resource]/[namespace].vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/pages/account/inspect/deployments.vue b/pages/account/inspect/deployments.vue deleted file mode 100644 index 1b36e0d..0000000 --- a/pages/account/inspect/deployments.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - - - \ No newline at end of file diff --git a/pages/account/inspect/ingresses.vue b/pages/account/inspect/ingresses.vue deleted file mode 100644 index 047ef95..0000000 --- a/pages/account/inspect/ingresses.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - \ No newline at end of file diff --git a/pages/account/inspect/nodes.vue b/pages/account/inspect/nodes.vue deleted file mode 100644 index 70934de..0000000 --- a/pages/account/inspect/nodes.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - - - \ No newline at end of file diff --git a/pages/account/inspect/pods.vue b/pages/account/inspect/pods.vue deleted file mode 100644 index 019f09e..0000000 --- a/pages/account/inspect/pods.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - \ No newline at end of file diff --git a/pages/account/inspect/services.vue b/pages/account/inspect/services.vue deleted file mode 100644 index 446067a..0000000 --- a/pages/account/inspect/services.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - - - \ No newline at end of file diff --git a/pages/account/inspect/statefulsets.vue b/pages/account/inspect/statefulsets.vue deleted file mode 100644 index 22cbb41..0000000 --- a/pages/account/inspect/statefulsets.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - \ No newline at end of file diff --git a/pages/account/inspect/statefulsets/[namespace].vue b/pages/account/inspect/statefulsets/[namespace].vue deleted file mode 100644 index 27e0f69..0000000 --- a/pages/account/inspect/statefulsets/[namespace].vue +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/pages/index.vue b/pages/index.vue index 61b709c..4598b57 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -42,7 +42,7 @@ function doLogin() const decode = jwtDecode(token) as any; getUser(decode.upn, token, (user: User) => { setSessionCookie(new Session(user, token), decode.exp as number); - useRouter().push('/account/inspect'); + useRouter().push('/account/inspect/nodes/_all'); }); }); } diff --git a/stores/NamespaceStore.ts b/stores/NamespaceStore.ts index 3ac78e4..a2a7faf 100644 --- a/stores/NamespaceStore.ts +++ b/stores/NamespaceStore.ts @@ -8,7 +8,9 @@ export const useNamespaceStore = defineStore('namespace', { }), getters: { getNamespaces: (state) => { - return (): Namespace[] | undefined => state.namespaces; + return (): Namespace[] | undefined => { + return state.namespaces; + } }, getCurrentNamespace: (state) => { return (): Namespace | undefined => state.currentNamespace;