From b4d83cb4922b95dfaa2f33191ae901b34a5d0c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Huss?= <sebastien.huss@gmail.com>
Date: Thu, 8 Feb 2024 17:26:37 +0100
Subject: [PATCH] Playing with colors

---
 .gitignore                                    |  15 +-
 front/components/core/TableHeader.vue         |   2 +-
 front/components/navigation/MainMenu.vue      |   2 +-
 front/components/navigation/MainMenuLinks.vue |   7 +-
 front/libs/certmanager/custom.ts              |  39 +--
 front/libs/cnpg/custom.ts                     |  27 +-
 front/libs/core/interfaces.ts                 |   8 +
 front/libs/fluxcd/custom.ts                   |  81 +++---
 front/libs/jaegertracing/custom.ts            |   9 +-
 front/libs/k8s/custom.ts                      | 265 +++++++++---------
 front/libs/k8up/custom.ts                     |  51 ++--
 front/libs/mariadb/custom.ts                  |  43 +--
 front/libs/mongodb/custom.ts                  |   9 +-
 front/libs/monitoring/custom.ts               |  55 ++--
 front/libs/opentelemetry/custom.ts            |  19 +-
 front/libs/oracle/custom.ts                   |  15 +-
 front/libs/projectcalico/custom.ts            | 106 +++----
 front/libs/rabbitmq/custom.ts                 |   9 +-
 front/libs/redis/custom.ts                    |  27 +-
 front/libs/secretgenerator/custom.ts          |  17 +-
 front/libs/traefik/custom.ts                  |  57 ++--
 front/libs/zalando/custom.ts                  |  21 +-
 front/pages/install/vynil/InstallView.vue     |  21 +-
 .../pages/install/vynil/installDashboard.vue  |   4 +-
 front/routes/custom.ts                        |  13 +
 utils/gen.ts                                  |   4 +-
 utils/generator/front/grp.custom.def.ts.hbs   |   5 +-
 .../front/obj.components.list.vue.hbs         |   3 +-
 .../front/obj.components.meta.vue.hbs         |   3 +-
 .../front/obj.components.view.vue.hbs         |   3 +-
 utils/generator/front/obj.pages.edit.vue.hbs  |   6 +-
 utils/generator/front/obj.pages.view.vue.hbs  |  10 +-
 32 files changed, 506 insertions(+), 450 deletions(-)

diff --git a/.gitignore b/.gitignore
index 82195b4..67db106 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,32 +4,33 @@
 /.tags
 /.package-lock.json
 /back/resolvers/index.ts
-/back/resolvers/*/*
+/back/resolvers/**/*.ts
 !/back/resolvers/k8s/custom.ts
 !/back/resolvers/k8s/permissions.ts
 !/back/resolvers/core/*
 !/back/resolvers/vynil/custom.ts
 !/back/resolvers/vynil/Package.ts
 !/back/resolvers/vynil/Category.ts
-/back/schema/*
+/back/schema/*.graphql
 !/back/schema/core.graphql
-/front/queries/*/*
+/front/queries/**/*.graphql
 !/front/queries/core/*
 /front/routes/index.ts
 /front/routes/*/*
-/front/components/*/
+/front/components/**/*.ts
+/front/components/**/*.vue
 !/front/components/core/*
 !/front/components/navigation/*
+!/front/components/charts/*
 !/front/components/vynil/DistribStatus.vue
 !/front/components/vynil/InstallStatus.vue
 !/front/components/vynil/InstallView.vue
 !/front/components/vynil/PackageList.vue
 !/front/components/vynil/CategoryList.vue
-!/front/components/charts/*
-/front/libs/*/*
+/front/libs/**/*.ts
 !/front/libs/*/custom.ts
 !/front/libs/core/*
-/front/pages/*/*/*
+/front/pages/**/*.vue
 !/front/pages/automation/fluxcd/automationDashboard.vue
 !/front/pages/install/vynil/DistribView.vue
 !/front/pages/install/vynil/InstallView.vue
diff --git a/front/components/core/TableHeader.vue b/front/components/core/TableHeader.vue
index 9d2f4e8..8586ed6 100644
--- a/front/components/core/TableHeader.vue
+++ b/front/components/core/TableHeader.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<{
 </script>
 <template>
     <q-card-section>
-      <div class="text-h6 text-grey-8">
+      <div class="text-h6 text-white">
         {{ title }}
         <q-btn-group push class="float-right text-capitalize shadow-3">
           <q-input v-if="show_filter" :model-value="modelFilter" @update:model-value="v=>$emit('update:modelFilter', v)" filled borderless dense debounce="300" placeholder="Search">
diff --git a/front/components/navigation/MainMenu.vue b/front/components/navigation/MainMenu.vue
index 26f9932..dad57a3 100644
--- a/front/components/navigation/MainMenu.vue
+++ b/front/components/navigation/MainMenu.vue
@@ -52,7 +52,7 @@ function toggleLeftDrawer() {
   <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered :mini="miniState" :width="400" :breakpoint="500" @mouseover="miniState = false" @mouseout="miniState = true" mini-to-overlay>
     <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
       <q-list padding v-if="router.currentRoute.value.matched.length>1">
-        <MainMenuLinks class="q-mr-xs"
+        <MainMenuLinks class="q-mr-sm"
           v-for="link in links"
           :key="`${link.title}-${router.currentRoute.value.matched[router.currentRoute.value.matched.length-1].path}`"
           v-bind="link">
diff --git a/front/components/navigation/MainMenuLinks.vue b/front/components/navigation/MainMenuLinks.vue
index 1f5246b..9f04a6c 100644
--- a/front/components/navigation/MainMenuLinks.vue
+++ b/front/components/navigation/MainMenuLinks.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import MainMenuLinks from './MainMenuLinks.vue';
 import { menuLinksProps } from '../../routes';
+import { elude } from '../../libs/core';
 import { useRouter } from 'vue-router'
 const router = useRouter();
-
+const maxCaptionLength= 25;
 const props = withDefaults(defineProps<menuLinksProps>(), {
   caption: '',
   link: '#',
@@ -25,7 +26,7 @@ const props = withDefaults(defineProps<menuLinksProps>(), {
           </q-item-section>
           <q-item-section>
             <q-item-section>{{title}}</q-item-section>
-            <q-item-label v-if="caption != ''" caption>{{caption}}</q-item-label>
+            <q-item-label v-if="caption != ''" caption>{{elude(caption, maxCaptionLength)}}</q-item-label>
           </q-item-section>
         </template>
         <div v-if="router.currentRoute.value.matched.length>1">
@@ -43,7 +44,7 @@ const props = withDefaults(defineProps<menuLinksProps>(), {
           </q-item-section>
           <q-item-section>
             <q-item-section>{{title}}</q-item-section>
-            <q-item-label v-if="caption != ''" caption>{{caption}}</q-item-label>
+            <q-item-label v-if="caption != ''" caption>{{elude(caption, maxCaptionLength)}}</q-item-label>
           </q-item-section>
       </q-item>
     </div>
diff --git a/front/libs/certmanager/custom.ts b/front/libs/certmanager/custom.ts
index 73e65f2..c6247e0 100644
--- a/front/libs/certmanager/custom.ts
+++ b/front/libs/certmanager/custom.ts
@@ -1,32 +1,33 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const certmanagerIcon = 'apps';
+import { networkColor, networkIcon } from '../../routes/custom';
+export const certmanagerIcon = networkIcon;
 export const certmanagerTitle = 'cert-manager';
-export const iconChallenge = 'album';
-export const colorChallenge = '';
+export const iconChallenge = networkIcon;
+export const colorChallenge = networkColor;
 export const descriptionChallenge = '';
-export const shortChallenge = '';
-export const iconOrder = 'album';
-export const colorOrder = '';
+export const shortChallenge = 'Challenge';
+export const iconOrder = networkIcon;
+export const colorOrder = networkColor;
 export const descriptionOrder = '';
-export const shortOrder = '';
-export const iconCertificate = 'album';
-export const colorCertificate = '';
+export const shortOrder = 'Order';
+export const iconCertificate = networkIcon;
+export const colorCertificate = networkColor;
 export const descriptionCertificate = '';
-export const shortCertificate = '';
-export const iconCertificateRequest = 'album';
-export const colorCertificateRequest = '';
+export const shortCertificate = 'Certificate';
+export const iconCertificateRequest = networkIcon;
+export const colorCertificateRequest = networkColor;
 export const descriptionCertificateRequest = '';
-export const shortCertificateRequest = '';
-export const iconClusterIssuer = 'album';
-export const colorClusterIssuer = '';
+export const shortCertificateRequest = 'CertificateRequest';
+export const iconClusterIssuer = networkIcon;
+export const colorClusterIssuer = networkColor;
 export const descriptionClusterIssuer = '';
-export const shortClusterIssuer = '';
-export const iconIssuer = 'album';
-export const colorIssuer = '';
+export const shortClusterIssuer = 'ClusterIssuer';
+export const iconIssuer = networkIcon;
+export const colorIssuer = networkColor;
 export const descriptionIssuer = '';
-export const shortIssuer = '';
+export const shortIssuer = 'Issuer';
 export const extraChallengeColumns:Array<QTableColumn> = [
   {name: 'State', label: 'State', field: row => row.status.state, sortable: true, align: tableColumnAlign.left},
   {name: 'Domain', label: 'Domain', field: row => row.spec.dnsName, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/cnpg/custom.ts b/front/libs/cnpg/custom.ts
index 62f90ff..0e6ca21 100644
--- a/front/libs/cnpg/custom.ts
+++ b/front/libs/cnpg/custom.ts
@@ -1,24 +1,25 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const cnpgIcon = 'apps';
+import { databaseColor, databaseIcon, } from '../../routes/custom';
+export const cnpgIcon = databaseIcon;
 export const cnpgTitle = 'PostgreSQL';
-export const iconBackup = 'album';
-export const colorBackup = '';
+export const iconBackup = 'backup';
+export const colorBackup = databaseColor;
 export const descriptionBackup = '';
-export const shortBackup = '';
-export const iconCluster = 'album';
-export const colorCluster = '';
+export const shortBackup = 'Backup';
+export const iconCluster = databaseIcon;
+export const colorCluster = databaseColor;
 export const descriptionCluster = '';
-export const shortCluster = '';
-export const iconPooler = 'album';
-export const colorPooler = '';
+export const shortCluster = 'Cluster';
+export const iconPooler = databaseIcon;
+export const colorPooler = databaseColor;
 export const descriptionPooler = '';
-export const shortPooler = '';
-export const iconScheduledBackup = 'album';
-export const colorScheduledBackup = '';
+export const shortPooler = 'Pooler';
+export const iconScheduledBackup = iconBackup;
+export const colorScheduledBackup = databaseColor;
 export const descriptionScheduledBackup = '';
-export const shortScheduledBackup = '';
+export const shortScheduledBackup = 'ScheduledBackup';
 export const extraBackupColumns:Array<QTableColumn> = [
   {name: 'Age', label: 'Age', field: row => row.metadata.creationTimestamp, sortable: true, align: tableColumnAlign.left},
   {name: 'Cluster', label: 'Cluster', field: row => row.spec.cluster.name, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/core/interfaces.ts b/front/libs/core/interfaces.ts
index a460ac2..2c5a5b7 100644
--- a/front/libs/core/interfaces.ts
+++ b/front/libs/core/interfaces.ts
@@ -18,4 +18,12 @@ export interface metadataType {
     labels?: Array<dataEntry>
 }
 
+export interface HierarchyObject {
+    short:string,
+    catColor:string,
+    itemColor?:string,
+    properties:{},
+    items:{}[]
+}
+
 export default dataEntry
diff --git a/front/libs/fluxcd/custom.ts b/front/libs/fluxcd/custom.ts
index dfcb06d..33ff6e7 100644
--- a/front/libs/fluxcd/custom.ts
+++ b/front/libs/fluxcd/custom.ts
@@ -1,60 +1,61 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const fluxcdIcon = 'auto_mode';
+import { automationColor, automationIcon, } from '../../routes/custom';
+export const fluxcdIcon = automationIcon;
 export const fluxcdTitle = 'Flux CD';
-export const iconKustomization = 'auto_mode';
-export const iconReceiver = 'notifications';
-export const iconAlert = 'notifications';
-export const iconProvider = 'notifications';
-export const iconGitRepository = 'storage';
-export const iconBucket = 'storage';
-export const iconHelmChart = 'storage';
-export const iconHelmRepository = 'storage';
-export const iconOCIRepository = 'storage';
-export const iconImageUpdateAutomation = 'auto_mode';
-export const iconImagePolicy = 'auto_mode';
-export const iconImageRepository = 'fab fa-docker';
-export const iconHelmRelease = 'album';
-export const colorKustomization = '';
+export const iconKustomization = automationIcon;
+export const colorKustomization = automationColor;
 export const descriptionKustomization = '';
-export const shortKustomization = '';
-export const colorReceiver = '';
+export const shortKustomization = 'Kustomization';
+export const iconReceiver = 'notifications';
+export const colorReceiver = automationColor;
 export const descriptionReceiver = '';
-export const shortReceiver = '';
-export const colorAlert = '';
+export const shortReceiver = 'Receiver';
+export const iconAlert = 'notifications';
+export const colorAlert = automationColor;
 export const descriptionAlert = '';
-export const shortAlert = '';
-export const colorProvider = '';
+export const shortAlert = 'Alert';
+export const iconProvider = 'notifications';
+export const colorProvider = automationColor;
 export const descriptionProvider = '';
-export const shortProvider = '';
-export const colorGitRepository = '';
+export const shortProvider = 'Provider';
+export const iconGitRepository = 'storage';
+export const colorGitRepository = automationColor;
 export const descriptionGitRepository = '';
-export const shortGitRepository = '';
-export const colorBucket = '';
+export const shortGitRepository = 'GitRepository';
+export const iconBucket = 'storage';
+export const colorBucket = automationColor;
 export const descriptionBucket = '';
-export const shortBucket = '';
-export const colorHelmChart = '';
+export const shortBucket = 'Bucket';
+export const iconHelmChart = 'storage';
+export const colorHelmChart = automationColor;
 export const descriptionHelmChart = '';
-export const shortHelmChart = '';
-export const colorHelmRepository = '';
+export const shortHelmChart = 'HelmChart';
+export const iconHelmRepository = 'storage';
+export const colorHelmRepository = automationColor;
 export const descriptionHelmRepository = '';
-export const shortHelmRepository = '';
-export const colorOCIRepository = '';
+export const shortHelmRepository = 'HelmRepository';
+export const iconOCIRepository = 'storage';
+export const colorOCIRepository = automationColor;
 export const descriptionOCIRepository = '';
-export const shortOCIRepository = '';
-export const colorImageUpdateAutomation = '';
+export const shortOCIRepository = 'OCIRepository';
+export const iconImageUpdateAutomation = automationIcon;
+export const colorImageUpdateAutomation = automationColor;
 export const descriptionImageUpdateAutomation = '';
-export const shortImageUpdateAutomation = '';
-export const colorImagePolicy = '';
+export const shortImageUpdateAutomation = 'ImageUpdateAutomation';
+export const iconImagePolicy = automationIcon;
+export const colorImagePolicy = automationColor;
 export const descriptionImagePolicy = '';
-export const shortImagePolicy = '';
-export const colorImageRepository = '';
+export const shortImagePolicy = 'ImagePolicy';
+export const iconImageRepository = 'fab fa-docker';
+export const colorImageRepository = automationColor;
 export const descriptionImageRepository = '';
-export const shortImageRepository = '';
-export const colorHelmRelease = '';
+export const shortImageRepository = 'ImageRepository';
+export const iconHelmRelease = 'album';
+export const colorHelmRelease = automationColor;
 export const descriptionHelmRelease = '';
-export const shortHelmRelease = '';
+export const shortHelmRelease = 'HelmRelease';
 
 export const extraKustomizationColumns:Array<QTableColumn> = [
   {name: 'Age', label: 'Age', field: row => row.metadata.creationTimestamp, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/jaegertracing/custom.ts b/front/libs/jaegertracing/custom.ts
index ff4b4ce..d9f88ff 100644
--- a/front/libs/jaegertracing/custom.ts
+++ b/front/libs/jaegertracing/custom.ts
@@ -1,12 +1,13 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const jaegertracingIcon = 'apps';
+import { systemColor, systemIcon, } from '../../routes/custom';
+export const jaegertracingIcon = systemIcon;
 export const jaegertracingTitle = 'Tracing';
-export const iconJaeger = 'album';
-export const colorJaeger = '';
+export const iconJaeger = 'apps';
+export const colorJaeger = systemColor;
 export const descriptionJaeger = '';
-export const shortJaeger = '';
+export const shortJaeger = 'Jaeger';
 export const extraJaegerColumns:Array<QTableColumn> = [
   {name: 'Status', label: 'Status', field: row => row.status.phase, sortable: true, align: tableColumnAlign.left},
   {name: 'Version', label: 'Version', field: row => row.status.version, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/k8s/custom.ts b/front/libs/k8s/custom.ts
index c0c71c4..fbe45a3 100644
--- a/front/libs/k8s/custom.ts
+++ b/front/libs/k8s/custom.ts
@@ -1,180 +1,181 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+import { configColor, configIcon,securityColor, securityIcon,networkColor, networkIcon,workloadColor, workloadIcon,systemColor, systemIcon,storageColor, storageIcon, } from '../../routes/custom';
 export const k8sIcon = 'fas fa-dharmachakra';
 export const k8sTitle = 'Standard';
-export const iconConfigMap = 'settings_suggest';
-export const colorConfigMap = '';
+export const iconConfigMap = configIcon;
+export const colorConfigMap = configColor;
 export const descriptionConfigMap = '';
-export const shortConfigMap = '';
-export const iconEndpoints = 'fas fa-network-wired';
-export const colorEndpoints = '';
+export const shortConfigMap = 'ConfigMap';
+export const iconSecret = configIcon;
+export const colorSecret = configColor;
+export const descriptionSecret = '';
+export const shortSecret = 'Secret';
+export const iconServiceAccount = securityIcon;
+export const colorServiceAccount = securityColor;
+export const descriptionServiceAccount = '';
+export const shortServiceAccount = 'ServiceAccount';
+export const iconEndpoints = networkIcon;
+export const colorEndpoints = networkColor;
 export const descriptionEndpoints = '';
-export const shortEndpoints = '';
-export const iconLimitRange = 'album';
-export const colorLimitRange = '';
+export const shortEndpoints = 'Endpoints';
+export const iconLimitRange = workloadIcon;
+export const colorLimitRange = workloadColor;
 export const descriptionLimitRange = '';
-export const shortLimitRange = '';
-export const iconNamespace = 'fas fa-object-ungroup';
-export const colorNamespace = '';
+export const shortLimitRange = 'LimitRange';
+export const iconNamespace = systemIcon;
+export const colorNamespace = systemColor;
 export const descriptionNamespace = '';
-export const shortNamespace = '';
-export const iconNode = 'album';
-export const colorNode = '';
+export const shortNamespace = 'Namespace';
+export const iconNode = systemIcon;
+export const colorNode = systemColor;
 export const descriptionNode = '';
-export const shortNode = '';
-export const iconPersistentVolume = 'album';
-export const colorPersistentVolume = '';
+export const shortNode = 'Node';
+export const iconPersistentVolume = storageIcon;
+export const colorPersistentVolume = storageColor;
 export const descriptionPersistentVolume = '';
-export const shortPersistentVolume = '';
-export const iconPersistentVolumeClaim = 'album';
-export const colorPersistentVolumeClaim = '';
+export const shortPersistentVolume = 'PersistentVolume';
+export const iconPersistentVolumeClaim = storageIcon;
+export const colorPersistentVolumeClaim = storageColor;
 export const descriptionPersistentVolumeClaim = '';
-export const shortPersistentVolumeClaim = '';
-export const iconPod = 'album';
-export const colorPod = '';
+export const shortPersistentVolumeClaim = 'PersistentVolumeClaim';
+export const iconResourceQuota = workloadIcon;
+export const colorResourceQuota = workloadColor;
+export const descriptionResourceQuota = '';
+export const shortResourceQuota = 'ResourceQuota';
+export const iconService = networkIcon;
+export const colorService = networkColor;
+export const descriptionService = '';
+export const shortService = 'Service';
+export const iconPod = workloadIcon;
+export const colorPod = workloadColor;
 export const descriptionPod = '';
-export const shortPod = '';
-export const iconPodTemplate = 'album';
-export const colorPodTemplate = '';
+export const shortPod = 'Pod';
+export const iconPodTemplate = workloadIcon;
+export const colorPodTemplate = workloadColor;
 export const descriptionPodTemplate = '';
-export const shortPodTemplate = '';
-export const iconReplicationController = 'album';
-export const colorReplicationController = '';
+export const shortPodTemplate = 'PodTemplate';
+export const iconReplicationController = workloadIcon;
+export const colorReplicationController = workloadColor;
 export const descriptionReplicationController = '';
-export const shortReplicationController = '';
-export const iconResourceQuota = 'album';
-export const colorResourceQuota = '';
-export const descriptionResourceQuota = '';
-export const shortResourceQuota = '';
-export const iconSecret = 'key';
-export const colorSecret = '';
-export const descriptionSecret = '';
-export const shortSecret = '';
-export const iconService = 'album';
-export const colorService = '';
-export const descriptionService = '';
-export const shortService = '';
-export const iconServiceAccount = 'album';
-export const colorServiceAccount = '';
-export const descriptionServiceAccount = '';
-export const shortServiceAccount = '';
-export const iconAPIService = 'album';
-export const colorAPIService = '';
+export const shortReplicationController = 'ReplicationController';
+export const iconAPIService = systemIcon;
+export const colorAPIService = systemColor;
 export const descriptionAPIService = '';
-export const shortAPIService = '';
-export const iconControllerRevision = 'album';
-export const colorControllerRevision = '';
+export const shortAPIService = 'APIService';
+export const iconControllerRevision = workloadIcon;
+export const colorControllerRevision = workloadColor;
 export const descriptionControllerRevision = '';
 export const shortControllerRevision = 'ControllerRevision';
-export const iconDaemonSet = 'album';
-export const colorDaemonSet = '';
+export const iconDaemonSet = workloadIcon;
+export const colorDaemonSet = workloadColor;
 export const descriptionDaemonSet = '';
-export const shortDaemonSet = '';
-export const iconDeployment = 'album';
-export const colorDeployment = '';
+export const shortDaemonSet = 'DaemonSet';
+export const iconDeployment = workloadIcon;
+export const colorDeployment = workloadColor;
 export const descriptionDeployment = '';
-export const shortDeployment = '';
-export const iconReplicaSet = 'album';
-export const colorReplicaSet = '';
+export const shortDeployment = 'Deployment';
+export const iconReplicaSet = workloadIcon;
+export const colorReplicaSet = workloadColor;
 export const descriptionReplicaSet = '';
-export const shortReplicaSet = '';
-export const iconStatefulSet = 'album';
-export const colorStatefulSet = '';
+export const shortReplicaSet = 'ReplicaSet';
+export const iconStatefulSet = workloadIcon;
+export const colorStatefulSet = workloadColor;
 export const descriptionStatefulSet = '';
-export const shortStatefulSet = '';
-export const iconHorizontalPodAutoscaler = 'album';
-export const colorHorizontalPodAutoscaler = '';
+export const shortStatefulSet = 'StatefulSet';
+export const iconHorizontalPodAutoscaler = workloadIcon;
+export const colorHorizontalPodAutoscaler = workloadColor;
 export const descriptionHorizontalPodAutoscaler = '';
-export const shortHorizontalPodAutoscaler = '';
-export const iconJob = 'album';
-export const colorJob = '';
+export const shortHorizontalPodAutoscaler = 'HorizontalPodAutoscaler';
+export const iconJob = workloadIcon;
+export const colorJob = workloadColor;
 export const descriptionJob = '';
-export const shortJob = '';
-export const iconCronJob = 'album';
-export const colorCronJob = '';
+export const shortJob = 'Job';
+export const iconCronJob = workloadIcon;
+export const colorCronJob = workloadColor;
 export const descriptionCronJob = '';
-export const shortCronJob = '';
-export const iconCertificateSigningRequest = 'album';
-export const colorCertificateSigningRequest = '';
+export const shortCronJob = 'CronJob';
+export const iconCertificateSigningRequest = securityIcon;
+export const colorCertificateSigningRequest = securityColor;
 export const descriptionCertificateSigningRequest = '';
-export const shortCertificateSigningRequest = '';
-export const iconIngress = 'album';
-export const colorIngress = '';
+export const shortCertificateSigningRequest = 'CertificateSigningRequest';
+export const iconIngress = networkIcon;
+export const colorIngress = networkColor;
 export const descriptionIngress = '';
-export const shortIngress = '';
-export const iconNetworkPolicy = 'album';
-export const colorNetworkPolicy = '';
+export const shortIngress = 'Ingress';
+export const iconNetworkPolicy = securityIcon;
+export const colorNetworkPolicy = securityColor;
 export const descriptionNetworkPolicy = '';
-export const shortNetworkPolicy = '';
-export const iconPodDisruptionBudget = 'album';
-export const colorPodDisruptionBudget = '';
+export const shortNetworkPolicy = 'NetworkPolicy';
+export const iconPodDisruptionBudget = workloadIcon;
+export const colorPodDisruptionBudget = workloadColor;
 export const descriptionPodDisruptionBudget = '';
-export const shortPodDisruptionBudget = '';
-export const iconRole = 'album';
-export const colorRole = '';
+export const shortPodDisruptionBudget = 'PodDisruptionBudget';
+export const iconRole = securityIcon;
+export const colorRole = securityColor;
 export const descriptionRole = '';
-export const shortRole = '';
-export const iconClusterRoleBinding = 'album';
-export const colorClusterRoleBinding = '';
+export const shortRole = 'Role';
+export const iconClusterRoleBinding = securityIcon;
+export const colorClusterRoleBinding = securityColor;
 export const descriptionClusterRoleBinding = '';
-export const shortClusterRoleBinding = '';
-export const iconRoleBinding = 'album';
-export const colorRoleBinding = '';
+export const shortClusterRoleBinding = 'ClusterRoleBinding';
+export const iconRoleBinding = securityIcon;
+export const colorRoleBinding = securityColor;
 export const descriptionRoleBinding = '';
-export const shortRoleBinding = '';
-export const iconClusterRole = 'album';
-export const colorClusterRole = '';
+export const shortRoleBinding = 'RoleBinding';
+export const iconClusterRole = securityIcon;
+export const colorClusterRole = securityColor;
 export const descriptionClusterRole = '';
-export const shortClusterRole = '';
-export const iconStorageClass = 'album';
-export const colorStorageClass = '';
+export const shortClusterRole = 'ClusterRole';
+export const iconStorageClass = storageIcon;
+export const colorStorageClass = storageColor;
 export const descriptionStorageClass = '';
-export const shortStorageClass = '';
-export const iconCSIDriver = 'album';
-export const colorCSIDriver = '';
+export const shortStorageClass = 'StorageClass';
+export const iconCSIDriver = storageIcon;
+export const colorCSIDriver = storageColor;
 export const descriptionCSIDriver = '';
-export const shortCSIDriver = '';
-export const iconCSINode = 'album';
-export const colorCSINode = '';
+export const shortCSIDriver = 'CSIDriver';
+export const iconCSINode = storageIcon;
+export const colorCSINode = storageColor;
 export const descriptionCSINode = '';
-export const shortCSINode = '';
-export const iconCSIStorageCapacity = 'album';
-export const colorCSIStorageCapacity = '';
+export const shortCSINode = 'CSINode';
+export const iconCSIStorageCapacity = storageIcon;
+export const colorCSIStorageCapacity = storageColor;
 export const descriptionCSIStorageCapacity = '';
-export const shortCSIStorageCapacity = '';
-export const iconVolumeAttachment = 'album';
-export const colorVolumeAttachment = '';
+export const shortCSIStorageCapacity = 'CSIStorageCapacity';
+export const iconVolumeAttachment = storageIcon;
+export const colorVolumeAttachment = storageColor;
 export const descriptionVolumeAttachment = '';
-export const shortVolumeAttachment = '';
-export const iconMutatingWebhookConfiguration = 'album';
-export const colorMutatingWebhookConfiguration = '';
+export const shortVolumeAttachment = 'VolumeAttachment';
+export const iconMutatingWebhookConfiguration = systemIcon;
+export const colorMutatingWebhookConfiguration = systemColor;
 export const descriptionMutatingWebhookConfiguration = '';
-export const shortMutatingWebhookConfiguration = '';
-export const iconValidatingWebhookConfiguration = 'album';
-export const colorValidatingWebhookConfiguration = '';
+export const shortMutatingWebhookConfiguration = 'MutatingWebhookConfiguration';
+export const iconValidatingWebhookConfiguration = systemIcon;
+export const colorValidatingWebhookConfiguration = systemColor;
 export const descriptionValidatingWebhookConfiguration = '';
-export const shortValidatingWebhookConfiguration = '';
-export const iconCustomResourceDefinition = 'album';
-export const colorCustomResourceDefinition = '';
+export const shortValidatingWebhookConfiguration = 'ValidatingWebhookConfiguration';
+export const iconCustomResourceDefinition = systemIcon;
+export const colorCustomResourceDefinition = systemColor;
 export const descriptionCustomResourceDefinition = '';
-export const shortCustomResourceDefinition = '';
-export const iconPriorityClass = 'album';
-export const colorPriorityClass = '';
+export const shortCustomResourceDefinition = 'CustomResourceDefinition';
+export const iconPriorityClass = workloadIcon;
+export const colorPriorityClass = workloadColor;
 export const descriptionPriorityClass = '';
-export const shortPriorityClass = '';
-export const iconLease = 'album';
-export const colorLease = '';
+export const shortPriorityClass = 'PriorityClass';
+export const iconLease = systemIcon;
+export const colorLease = systemColor;
 export const descriptionLease = '';
-export const shortLease = '';
-export const iconRuntimeClass = 'album';
-export const colorRuntimeClass = '';
+export const shortLease = 'Lease';
+export const iconRuntimeClass = workloadIcon;
+export const colorRuntimeClass = workloadColor;
 export const descriptionRuntimeClass = '';
-export const shortRuntimeClass = '';
-export const iconEndpointSlice = 'album';
-export const colorEndpointSlice = '';
+export const shortRuntimeClass = 'RuntimeClass';
+export const iconEndpointSlice = networkIcon;
+export const colorEndpointSlice = networkColor;
 export const descriptionEndpointSlice = '';
-export const shortEndpointSlice = '';
+export const shortEndpointSlice = 'EndpointSlice';
 export const extraConfigMapColumns:Array<QTableColumn> = [
 //  {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/k8up/custom.ts b/front/libs/k8up/custom.ts
index 3ff2c6f..d82d4e8 100644
--- a/front/libs/k8up/custom.ts
+++ b/front/libs/k8up/custom.ts
@@ -1,40 +1,41 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const k8upIcon = 'apps';
+import { systemColor, systemIcon, } from '../../routes/custom';
+export const iconBackup = 'backup';
+export const iconRestore = 'cloud_download';
+export const k8upIcon = iconBackup;
 export const k8upTitle = 'K8up';
-export const iconArchive = 'album';
-export const colorArchive = '';
+export const iconArchive = systemIcon;
+export const colorArchive = systemColor;
 export const descriptionArchive = '';
-export const shortArchive = '';
-export const iconBackup = 'album';
-export const colorBackup = '';
+export const shortArchive = 'Archive';
+export const colorBackup = systemColor;
 export const descriptionBackup = '';
-export const shortBackup = '';
-export const iconCheck = 'album';
-export const colorCheck = '';
+export const shortBackup = 'Backup';
+export const iconCheck = systemIcon;
+export const colorCheck = systemColor;
 export const descriptionCheck = '';
-export const shortCheck = '';
-export const iconPreBackupPod = 'album';
-export const colorPreBackupPod = '';
+export const shortCheck = 'Check';
+export const iconPreBackupPod = systemIcon;
+export const colorPreBackupPod = systemColor;
 export const descriptionPreBackupPod = '';
-export const shortPreBackupPod = '';
-export const iconPrune = 'album';
-export const colorPrune = '';
+export const shortPreBackupPod = 'PreBackupPod';
+export const iconPrune = systemIcon;
+export const colorPrune = systemColor;
 export const descriptionPrune = '';
-export const shortPrune = '';
-export const iconRestore = 'album';
-export const colorRestore = '';
+export const shortPrune = 'Prune';
+export const colorRestore = systemColor;
 export const descriptionRestore = '';
-export const shortRestore = '';
-export const iconSchedule = 'album';
-export const colorSchedule = '';
+export const shortRestore = 'Restore';
+export const iconSchedule = iconBackup;
+export const colorSchedule = systemColor;
 export const descriptionSchedule = '';
-export const shortSchedule = '';
-export const iconSnapshot = 'album';
-export const colorSnapshot = '';
+export const shortSchedule = 'Schedule';
+export const iconSnapshot = systemIcon;
+export const colorSnapshot = systemColor;
 export const descriptionSnapshot = '';
-export const shortSnapshot = '';
+export const shortSnapshot = 'Snapshot';
 export const extraArchiveColumns:Array<QTableColumn> = [
   {name: 'Age', label: 'Age', field: row => row.metadata.creationTimestamp, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/mariadb/custom.ts b/front/libs/mariadb/custom.ts
index 96e9a2d..b28fa86 100644
--- a/front/libs/mariadb/custom.ts
+++ b/front/libs/mariadb/custom.ts
@@ -1,40 +1,41 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+import { databaseColor, databaseIcon, } from '../../routes/custom';
 export const iconBackup = 'backup';
 export const iconConnection = 'link';
-export const iconDatabase = 'fas fa-database';
-export const iconGrant = 'album';
-export const iconMariaDB = 'group_work';
 export const iconRestore = 'cloud_download';
-export const iconSqlJob = 'album';
 export const iconUser = 'fas fa-user';
-export const mariadbIcon = 'apps';
+export const mariadbIcon = databaseIcon;
 export const mariadbTitle = 'MariaDB';
-export const colorBackup = '';
+export const colorBackup = databaseColor;
 export const descriptionBackup = '';
-export const shortBackup = '';
-export const colorConnection = '';
+export const shortBackup = 'Backup';
+export const colorConnection = databaseColor;
 export const descriptionConnection = '';
-export const shortConnection = '';
-export const colorDatabase = '';
+export const shortConnection = 'Connection';
+export const iconDatabase = databaseIcon;
+export const colorDatabase = databaseColor;
 export const descriptionDatabase = '';
-export const shortDatabase = '';
-export const colorGrant = '';
+export const shortDatabase = 'Database';
+export const iconGrant = 'album';
+export const colorGrant = databaseColor;
 export const descriptionGrant = '';
-export const shortGrant = '';
-export const colorMariaDB = '';
+export const shortGrant = 'Grant';
+export const iconMariaDB = 'group_work';
+export const colorMariaDB = databaseColor;
 export const descriptionMariaDB = '';
-export const shortMariaDB = '';
-export const colorRestore = '';
+export const shortMariaDB = 'MariaDB';
+export const colorRestore = databaseColor;
 export const descriptionRestore = '';
-export const shortRestore = '';
-export const colorSqlJob = '';
+export const shortRestore = 'Restore';
+export const iconSqlJob = 'album';
+export const colorSqlJob = databaseColor;
 export const descriptionSqlJob = '';
-export const shortSqlJob = '';
-export const colorUser = '';
+export const shortSqlJob = 'SqlJob';
+export const colorUser = databaseColor;
 export const descriptionUser = '';
-export const shortUser = '';
+export const shortUser = 'User';
 
 export const extraBackupColumns:Array<QTableColumn> = [
   {name: 'MariaDB', label: 'MariaDB', field: row => row.spec.mariaDbRef.name, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/mongodb/custom.ts b/front/libs/mongodb/custom.ts
index c11a6d5..6627301 100644
--- a/front/libs/mongodb/custom.ts
+++ b/front/libs/mongodb/custom.ts
@@ -1,12 +1,13 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const mongodbIcon = 'apps';
+import { databaseColor, databaseIcon, } from '../../routes/custom';
+export const mongodbIcon = databaseIcon;
 export const mongodbTitle = 'MongoDB';
-export const iconMongoDBCommunity = 'album';
-export const colorMongoDBCommunity = '';
+export const iconMongoDBCommunity = databaseIcon;
+export const colorMongoDBCommunity = databaseColor;
 export const descriptionMongoDBCommunity = '';
-export const shortMongoDBCommunity = '';
+export const shortMongoDBCommunity = 'MongoDBCommunity';
 export const extraMongoDBCommunityColumns:Array<QTableColumn> = [
   {name: 'Phase', label: 'Phase', field: row => row.status.phase, sortable: true, align: tableColumnAlign.left},
   {name: 'Version', label: 'Version', field: row => row.status.version, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/monitoring/custom.ts b/front/libs/monitoring/custom.ts
index 0677577..85d4f29 100644
--- a/front/libs/monitoring/custom.ts
+++ b/front/libs/monitoring/custom.ts
@@ -1,44 +1,45 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+export const iconAlertmanager = 'apps';
+export const iconPrometheus = 'apps';
+import { systemColor, configIcon, } from '../../routes/custom';
 export const monitoringIcon = 'supervised_user_circle';
 export const monitoringTitle = 'Monitoring';
-export const iconAlertmanager = 'album';
-export const colorAlertmanager = '';
+export const colorAlertmanager = systemColor;
 export const descriptionAlertmanager = '';
-export const shortAlertmanager = '';
-export const iconPodMonitor = 'album';
-export const colorPodMonitor = '';
+export const shortAlertmanager = 'Alertmanager';
+export const iconPodMonitor = monitoringIcon;
+export const colorPodMonitor = systemColor;
 export const descriptionPodMonitor = '';
-export const shortPodMonitor = '';
-export const iconProbe = 'album';
-export const colorProbe = '';
+export const shortPodMonitor = 'PodMonitor';
+export const iconProbe = monitoringIcon;
+export const colorProbe = systemColor;
 export const descriptionProbe = '';
-export const shortProbe = '';
-export const iconPrometheus = 'album';
-export const colorPrometheus = '';
+export const shortProbe = 'Probe';
+export const colorPrometheus = systemColor;
 export const descriptionPrometheus = '';
-export const shortPrometheus = '';
-export const iconPrometheusRule = 'album';
-export const colorPrometheusRule = '';
+export const shortPrometheus = 'Prometheus';
+export const iconPrometheusRule = monitoringIcon;
+export const colorPrometheusRule = systemColor;
 export const descriptionPrometheusRule = '';
-export const shortPrometheusRule = '';
-export const iconServiceMonitor = 'album';
-export const colorServiceMonitor = '';
+export const shortPrometheusRule = 'PrometheusRule';
+export const iconServiceMonitor = monitoringIcon;
+export const colorServiceMonitor = systemColor;
 export const descriptionServiceMonitor = '';
-export const shortServiceMonitor = '';
-export const iconThanosRuler = 'album';
-export const colorThanosRuler = '';
+export const shortServiceMonitor = 'ServiceMonitor';
+export const iconThanosRuler = configIcon;
+export const colorThanosRuler = systemColor;
 export const descriptionThanosRuler = '';
-export const shortThanosRuler = '';
-export const iconAlertmanagerConfig = 'album';
-export const colorAlertmanagerConfig = '';
+export const shortThanosRuler = 'ThanosRuler';
+export const iconAlertmanagerConfig = configIcon;
+export const colorAlertmanagerConfig = systemColor;
 export const descriptionAlertmanagerConfig = '';
-export const shortAlertmanagerConfig = '';
-export const iconPrometheusAgent = 'album';
-export const colorPrometheusAgent = '';
+export const shortAlertmanagerConfig = 'AlertmanagerConfig';
+export const iconPrometheusAgent = iconPrometheus;
+export const colorPrometheusAgent = systemColor;
 export const descriptionPrometheusAgent = '';
-export const shortPrometheusAgent = '';
+export const shortPrometheusAgent = 'PrometheusAgent';
 export const extraAlertmanagerColumns:Array<QTableColumn> = [
   {name: 'Version', label: 'Version', field: row => row.spec.version, sortable: true, align: tableColumnAlign.left},
   {name: 'Replicas', label: 'Replicas', field: row => row.spec.replicas, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/opentelemetry/custom.ts b/front/libs/opentelemetry/custom.ts
index 1d466c6..8cb3499 100644
--- a/front/libs/opentelemetry/custom.ts
+++ b/front/libs/opentelemetry/custom.ts
@@ -1,20 +1,21 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+import { systemColor, systemIcon, installIcon, configIcon} from '../../routes/custom';
 export const opentelemetryIcon = 'apps';
 export const opentelemetryTitle = 'Telemetry';
-export const iconInstrumentation = 'album';
-export const colorInstrumentation = '';
+export const iconInstrumentation = configIcon;
+export const colorInstrumentation = systemColor;
 export const descriptionInstrumentation = '';
-export const shortInstrumentation = '';
-export const iconOpAMPBridge = 'album';
-export const colorOpAMPBridge = '';
+export const shortInstrumentation = 'Instrumentation';
+export const iconOpAMPBridge = systemIcon;
+export const colorOpAMPBridge = systemColor;
 export const descriptionOpAMPBridge = '';
-export const shortOpAMPBridge = '';
-export const iconOpenTelemetryCollector = 'album';
-export const colorOpenTelemetryCollector = '';
+export const shortOpAMPBridge = 'OpAMPBridge';
+export const iconOpenTelemetryCollector = installIcon;
+export const colorOpenTelemetryCollector = systemColor;
 export const descriptionOpenTelemetryCollector = '';
-export const shortOpenTelemetryCollector = '';
+export const shortOpenTelemetryCollector = 'OpenTelemetryCollector';
 export const extraInstrumentationColumns:Array<QTableColumn> = [
   {name: 'Age', label: 'Age', field: row => row.metadata.creationTimestamp, sortable: true, align: tableColumnAlign.left},
   {name: 'Endpoint', label: 'Endpoint', field: row => row.spec.exporter.endpoint, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/oracle/custom.ts b/front/libs/oracle/custom.ts
index fceced7..c6a94e4 100644
--- a/front/libs/oracle/custom.ts
+++ b/front/libs/oracle/custom.ts
@@ -1,16 +1,17 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const oracleIcon = 'apps';
+import { databaseColor, databaseIcon, } from '../../routes/custom';
+export const oracleIcon = databaseIcon;
 export const oracleTitle = 'Oracle';
-export const iconInnoDBCluster = 'album';
-export const colorInnoDBCluster = '';
+export const iconInnoDBCluster = databaseIcon;
+export const colorInnoDBCluster = databaseColor;
 export const descriptionInnoDBCluster = '';
-export const shortInnoDBCluster = '';
-export const iconMySQLBackup = 'album';
-export const colorMySQLBackup = '';
+export const shortInnoDBCluster = 'InnoDBCluster';
+export const iconMySQLBackup = databaseIcon;
+export const colorMySQLBackup = databaseColor;
 export const descriptionMySQLBackup = '';
-export const shortMySQLBackup = '';
+export const shortMySQLBackup = 'MySQLBackup';
 export const extraInnoDBClusterColumns:Array<QTableColumn> = [
   {name: 'Status', label: 'Status', field: row => row.status.cluster.status, sortable: true, align: tableColumnAlign.left},
   {name: 'Online', label: 'Online', field: row => row.status.cluster.onlineInstances, sortable: true, align: tableColumnAlign.left},
diff --git a/front/libs/projectcalico/custom.ts b/front/libs/projectcalico/custom.ts
index 28127ba..3ab7c48 100644
--- a/front/libs/projectcalico/custom.ts
+++ b/front/libs/projectcalico/custom.ts
@@ -1,76 +1,78 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const projectcalicoIcon = 'apps';
+import { networkColor, networkIcon,securityColor, securityIcon, } from '../../routes/custom';
+export const projectcalicoIcon = networkIcon;
 export const projectcalicoTitle = 'Calico';
-export const iconBGPConfiguration = 'album';
-export const colorBGPConfiguration = '';
+export const iconBGPConfiguration = networkIcon;
+export const colorBGPConfiguration = networkColor;
 export const descriptionBGPConfiguration = '';
-export const shortBGPConfiguration = '';
-export const iconBGPPeer = 'album';
-export const colorBGPPeer = '';
+export const shortBGPConfiguration = 'BGPConfiguration';
+export const iconBGPPeer = networkIcon;
+export const colorBGPPeer = networkColor;
 export const descriptionBGPPeer = '';
-export const shortBGPPeer = '';
-export const iconBlockAffinity = 'album';
-export const colorBlockAffinity = '';
+export const shortBGPPeer = 'BGPPeer';
+export const iconBlockAffinity = networkIcon;
+export const colorBlockAffinity = networkColor;
 export const descriptionBlockAffinity = '';
-export const shortBlockAffinity = '';
-export const iconCalicoNodeStatus = 'album';
-export const colorCalicoNodeStatus = '';
+export const shortBlockAffinity = 'BlockAffinity';
+export const iconCalicoNodeStatus = networkIcon;
+export const colorCalicoNodeStatus = networkColor;
 export const descriptionCalicoNodeStatus = '';
-export const shortCalicoNodeStatus = '';
-export const iconClusterInformation = 'album';
-export const colorClusterInformation = '';
+export const shortCalicoNodeStatus = 'CalicoNodeStatus';
+export const iconClusterInformation = networkIcon;
+export const colorClusterInformation = networkColor;
 export const descriptionClusterInformation = '';
-export const shortClusterInformation = '';
-export const iconFelixConfiguration = 'album';
-export const colorFelixConfiguration = '';
+export const shortClusterInformation = 'ClusterInformation';
+export const iconFelixConfiguration = networkIcon;
+export const colorFelixConfiguration = networkColor;
 export const descriptionFelixConfiguration = '';
-export const shortFelixConfiguration = '';
-export const iconGlobalNetworkPolicy = 'album';
-export const colorGlobalNetworkPolicy = '';
+export const shortFelixConfiguration = 'FelixConfiguration';
+export const iconGlobalNetworkPolicy = networkIcon;
+export const colorGlobalNetworkPolicy = networkColor;
 export const descriptionGlobalNetworkPolicy = '';
-export const shortGlobalNetworkPolicy = '';
-export const iconGlobalNetworkSet = 'album';
-export const colorGlobalNetworkSet = '';
+export const shortGlobalNetworkPolicy = 'GlobalNetworkPolicy';
+export const iconGlobalNetworkSet = networkIcon;
+export const colorGlobalNetworkSet = networkColor;
 export const descriptionGlobalNetworkSet = '';
-export const shortGlobalNetworkSet = '';
-export const iconHostEndpoint = 'album';
-export const colorHostEndpoint = '';
+export const shortGlobalNetworkSet = 'GlobalNetworkSet';
+export const iconHostEndpoint = networkIcon;
+export const colorHostEndpoint = networkColor;
 export const descriptionHostEndpoint = '';
-export const shortHostEndpoint = '';
-export const iconIPAMBlock = 'album';
-export const colorIPAMBlock = '';
+export const shortHostEndpoint = 'HostEndpoint';
+export const iconIPAMBlock = networkIcon;
+export const colorIPAMBlock = networkColor;
 export const descriptionIPAMBlock = '';
-export const shortIPAMBlock = '';
-export const iconIPAMConfig = 'album';
-export const colorIPAMConfig = '';
+export const shortIPAMBlock = 'IPAMBlock';
+export const iconIPAMConfig = networkIcon;
+export const colorIPAMConfig = networkColor;
 export const descriptionIPAMConfig = '';
-export const shortIPAMConfig = '';
-export const iconIPAMHandle = 'album';
-export const colorIPAMHandle = '';
+export const shortIPAMConfig = 'IPAMConfig';
+export const iconIPAMHandle = networkIcon;
+export const colorIPAMHandle = networkColor;
 export const descriptionIPAMHandle = '';
-export const shortIPAMHandle = '';
-export const iconIPPool = 'album';
-export const colorIPPool = '';
+export const shortIPAMHandle = 'IPAMHandle';
+export const iconIPPool = networkIcon;
+export const colorIPPool = networkColor;
 export const descriptionIPPool = '';
-export const shortIPPool = '';
-export const iconIPReservation = 'album';
-export const colorIPReservation = '';
+export const shortIPPool = 'IPPool';
+export const iconIPReservation = networkIcon;
+export const colorIPReservation = networkColor;
 export const descriptionIPReservation = '';
-export const shortIPReservation = '';
-export const iconKubeControllersConfiguration = 'album';
-export const colorKubeControllersConfiguration = '';
+export const shortIPReservation = 'IPReservation';
+export const iconKubeControllersConfiguration = networkIcon;
+export const colorKubeControllersConfiguration = networkColor;
 export const descriptionKubeControllersConfiguration = '';
-export const shortKubeControllersConfiguration = '';
-export const iconNetworkPolicy = 'album';
-export const colorNetworkPolicy = '';
+export const shortKubeControllersConfiguration = 'KubeControllersConfiguration';
+export const iconNetworkPolicy = securityIcon;
+export const colorNetworkPolicy = securityColor;
 export const descriptionNetworkPolicy = '';
-export const shortNetworkPolicy = '';
-export const iconNetworkSet = 'album';
-export const colorNetworkSet = '';
+export const shortNetworkPolicy = 'NetworkPolicy';
+export const iconNetworkSet = networkIcon;
+export const colorNetworkSet = networkColor;
 export const descriptionNetworkSet = '';
-export const shortNetworkSet = '';
+export const shortNetworkSet = 'NetworkSet';
+
 export const extraBGPConfigurationColumns:Array<QTableColumn> = [
 //  {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/rabbitmq/custom.ts b/front/libs/rabbitmq/custom.ts
index 3f74ea4..c4a39c6 100644
--- a/front/libs/rabbitmq/custom.ts
+++ b/front/libs/rabbitmq/custom.ts
@@ -1,12 +1,13 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const rabbitmqIcon = 'apps';
+import { databaseColor, databaseIcon, } from '../../routes/custom';
+export const rabbitmqIcon = databaseIcon;
 export const rabbitmqTitle = 'RabbitMQ';
-export const iconRabbitmqCluster = 'album';
-export const colorRabbitmqCluster = '';
+export const iconRabbitmqCluster = databaseIcon;
+export const colorRabbitmqCluster = databaseColor;
 export const descriptionRabbitmqCluster = '';
-export const shortRabbitmqCluster = '';
+export const shortRabbitmqCluster = 'RabbitmqCluster';
 export const extraRabbitmqClusterColumns:Array<QTableColumn> = [
   {name: 'Age', label: 'Age', field: row => row.metadata.creationTimestamp, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/redis/custom.ts b/front/libs/redis/custom.ts
index 2376acf..dd9a30f 100644
--- a/front/libs/redis/custom.ts
+++ b/front/libs/redis/custom.ts
@@ -1,24 +1,25 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const redisIcon = 'apps';
+import { databaseColor, databaseIcon, installIcon } from '../../routes/custom';
+export const redisIcon = databaseIcon;
 export const redisTitle = 'Redis';
-export const iconRedis = 'album';
-export const colorRedis = '';
+export const iconRedis = databaseIcon;
+export const colorRedis = databaseColor;
 export const descriptionRedis = '';
-export const shortRedis = '';
-export const iconRedisCluster = 'album';
-export const colorRedisCluster = '';
+export const shortRedis = 'Redis';
+export const iconRedisCluster = databaseIcon;
+export const colorRedisCluster = databaseColor;
 export const descriptionRedisCluster = '';
-export const shortRedisCluster = '';
-export const iconRedisReplication = 'album';
-export const colorRedisReplication = '';
+export const shortRedisCluster = 'RedisCluster';
+export const iconRedisReplication = databaseIcon;
+export const colorRedisReplication = databaseColor;
 export const descriptionRedisReplication = '';
-export const shortRedisReplication = '';
-export const iconRedisSentinel = 'album';
-export const colorRedisSentinel = '';
+export const shortRedisReplication = 'RedisReplication';
+export const iconRedisSentinel = installIcon;
+export const colorRedisSentinel = databaseColor;
 export const descriptionRedisSentinel = '';
-export const shortRedisSentinel = '';
+export const shortRedisSentinel = 'RedisSentinel';
 export const extraRedisColumns:Array<QTableColumn> = [
 //  {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/secretgenerator/custom.ts b/front/libs/secretgenerator/custom.ts
index 1b3b29d..c48f002 100644
--- a/front/libs/secretgenerator/custom.ts
+++ b/front/libs/secretgenerator/custom.ts
@@ -1,20 +1,21 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+import { configColor } from '../../routes/custom';
 export const secretgeneratorIcon = 'key';
 export const secretgeneratorTitle = 'Secrets generator';
 export const iconBasicAuth = 'fas fa-user-secret';
-export const colorBasicAuth = '';
-export const descriptionBasicAuth = '';
-export const shortBasicAuth = '';
 export const iconSSHKeyPair = 'fab fa-keycdn';
-export const colorSSHKeyPair = '';
-export const descriptionSSHKeyPair = '';
-export const shortSSHKeyPair = '';
 export const iconStringSecret = 'key';
-export const colorStringSecret = '';
+export const colorBasicAuth = configColor;
+export const descriptionBasicAuth = '';
+export const shortBasicAuth = 'BasicAuth';
+export const colorSSHKeyPair = configColor;
+export const descriptionSSHKeyPair = '';
+export const shortSSHKeyPair = 'SSHKeyPair';
+export const colorStringSecret = configColor;
 export const descriptionStringSecret = '';
-export const shortStringSecret = '';
+export const shortStringSecret = 'StringSecret';
 export const extraBasicAuthColumns:Array<QTableColumn> = [
 //  {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/traefik/custom.ts b/front/libs/traefik/custom.ts
index f951d5e..10150af 100644
--- a/front/libs/traefik/custom.ts
+++ b/front/libs/traefik/custom.ts
@@ -1,44 +1,45 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const traefikIcon = 'apps';
+import { networkColor, networkIcon, } from '../../routes/custom';
+export const traefikIcon = networkIcon;
 export const traefikTitle = 'Traefik';
-export const iconIngressRoute = 'album';
-export const colorIngressRoute = '';
+export const iconIngressRoute = networkIcon;
+export const colorIngressRoute = networkColor;
 export const descriptionIngressRoute = '';
-export const shortIngressRoute = '';
-export const iconIngressRouteTCP = 'album';
-export const colorIngressRouteTCP = '';
+export const shortIngressRoute = 'IngressRoute';
+export const iconIngressRouteTCP = networkIcon;
+export const colorIngressRouteTCP = networkColor;
 export const descriptionIngressRouteTCP = '';
-export const shortIngressRouteTCP = '';
-export const iconIngressRouteUDP = 'album';
-export const colorIngressRouteUDP = '';
+export const shortIngressRouteTCP = 'IngressRouteTCP';
+export const iconIngressRouteUDP = networkIcon;
+export const colorIngressRouteUDP = networkColor;
 export const descriptionIngressRouteUDP = '';
-export const shortIngressRouteUDP = '';
-export const iconMiddleware = 'album';
-export const colorMiddleware = '';
+export const shortIngressRouteUDP = 'IngressRouteUDP';
+export const iconMiddleware = networkIcon;
+export const colorMiddleware = networkColor;
 export const descriptionMiddleware = '';
-export const shortMiddleware = '';
-export const iconMiddlewareTCP = 'album';
-export const colorMiddlewareTCP = '';
+export const shortMiddleware = 'Middleware';
+export const iconMiddlewareTCP = networkIcon;
+export const colorMiddlewareTCP = networkColor;
 export const descriptionMiddlewareTCP = '';
-export const shortMiddlewareTCP = '';
-export const iconServersTransport = 'album';
-export const colorServersTransport = '';
+export const shortMiddlewareTCP = 'MiddlewareTCP';
+export const iconServersTransport = networkIcon;
+export const colorServersTransport = networkColor;
 export const descriptionServersTransport = '';
-export const shortServersTransport = '';
-export const iconTLSOption = 'album';
-export const colorTLSOption = '';
+export const shortServersTransport = 'ServersTransport';
+export const iconTLSOption = networkIcon;
+export const colorTLSOption = networkColor;
 export const descriptionTLSOption = '';
-export const shortTLSOption = '';
-export const iconTLSStore = 'album';
-export const colorTLSStore = '';
+export const shortTLSOption = 'TLSOption';
+export const iconTLSStore = networkIcon;
+export const colorTLSStore = networkColor;
 export const descriptionTLSStore = '';
-export const shortTLSStore = '';
-export const iconTraefikService = 'album';
-export const colorTraefikService = '';
+export const shortTLSStore = 'TLSStore';
+export const iconTraefikService = networkIcon;
+export const colorTraefikService = networkColor;
 export const descriptionTraefikService = '';
-export const shortTraefikService = '';
+export const shortTraefikService = 'TraefikService';
 export const extraIngressRouteColumns:Array<QTableColumn> = [
 //  {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
 ];
diff --git a/front/libs/zalando/custom.ts b/front/libs/zalando/custom.ts
index 3ef5434..bb39b2d 100644
--- a/front/libs/zalando/custom.ts
+++ b/front/libs/zalando/custom.ts
@@ -1,20 +1,21 @@
 // noGramoGenerator
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
-export const zalandoIcon = 'apps';
+import { databaseColor, databaseIcon, } from '../../routes/custom';
+export const zalandoIcon = databaseIcon;
 export const zalandoTitle = 'Zalando PG';
-export const iconpostgresql = 'album';
-export const colorpostgresql = '';
+export const iconpostgresql = databaseIcon;
+export const colorpostgresql = databaseColor;
 export const descriptionpostgresql = '';
-export const shortpostgresql = '';
-export const iconClusterKopfPeering = 'album';
-export const colorClusterKopfPeering = '';
+export const shortpostgresql = 'postgresql';
+export const iconClusterKopfPeering = databaseIcon;
+export const colorClusterKopfPeering = databaseColor;
 export const descriptionClusterKopfPeering = '';
-export const shortClusterKopfPeering = '';
-export const iconKopfPeering = 'album';
-export const colorKopfPeering = '';
+export const shortClusterKopfPeering = 'ClusterKopfPeering';
+export const iconKopfPeering = databaseIcon;
+export const colorKopfPeering = databaseColor;
 export const descriptionKopfPeering = '';
-export const shortKopfPeering = '';
+export const shortKopfPeering = 'KopfPeering';
 export const extrapostgresqlColumns:Array<QTableColumn> = [
   {name: 'Team', label: 'Team', field: row => row.spec.teamId, sortable: true, align: tableColumnAlign.left},
   {name: 'Version', label: 'Version', field: row => row.spec.postgresql.version, sortable: true, align: tableColumnAlign.left},
diff --git a/front/pages/install/vynil/InstallView.vue b/front/pages/install/vynil/InstallView.vue
index 3d9bbaf..be8c6b0 100644
--- a/front/pages/install/vynil/InstallView.vue
+++ b/front/pages/install/vynil/InstallView.vue
@@ -2,6 +2,7 @@
 // noGramoGenerator
 import vynilInstallQuery from '@/queries/vynil/Install.details.graphql'
 import InstallDelete from '@/queries/vynil/Install.delete.graphql'
+import ObjectHierarchy from '@/components/charts/ObjectHierarchy.vue';
 import vynilInstallMeta from '@/components/vynil/InstallMeta.vue';
 import vynilInstallView from '@/components/vynil/InstallView.vue';
 import vynilInstallStatus from '@/components/vynil/InstallStatus.vue';
@@ -41,24 +42,36 @@ onDeleteError((err) => {
   <div class="row q-mb-sm q-ml-sm">
     <div class="col-md-4">
       <vynilInstallMeta :deletor="deletor" :useActions="true"
-        v-if="!loading && result!=undefined && result.k8sNamespace!=undefined  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
+        v-if="!loading && result!=undefined && Array.isArray(result.k8sNamespace)  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
         :model="result.k8sNamespace[0].vynilInstall[0]"
        />
     </div>
-    <div class="col-md-4" v-if="!loading && result!=undefined && result.k8sNamespace!=undefined  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null && result.k8sNamespace[0].vynilInstall[0].usePackage!=null && result.k8sNamespace[0].vynilInstall[0].usePackage.length>0">
+    <div class="col-md-4" v-if="!loading && result!=undefined && Array.isArray(result.k8sNamespace)  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null && result.k8sNamespace[0].vynilInstall[0].usePackage!=null && result.k8sNamespace[0].vynilInstall[0].usePackage.length>0">
       <vynilPackageList
         :model="result.k8sNamespace[0].vynilInstall[0].usePackage"
        />
     </div>
     <div class="col-md-4">
       <vynilInstallStatus
-        v-if="!loading && result!=undefined && result.k8sNamespace!=undefined  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
+        v-if="!loading && result!=undefined && Array.isArray(result.k8sNamespace)  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
         :model="result.k8sNamespace[0].vynilInstall[0]"
        />
     </div>
+    <div class="col-lg-12">
+      <q-card bordered class="q-ma-sm">
+        <q-card-section class="text-center">
+          <div class="text-h6 text-grey-8 q-mt-none q-mb-none q-pt-none q-pb-none">Test</div>
+        </q-card-section>
+        <q-card-section v-if="result !== undefined && Array.isArray(result['k8sNamespace'])">
+          <ObjectHierarchy
+           :data="{short: 'Inst', catColor: 'purple', properties:{}, items: result.k8sNamespace[0].vynilInstall}"
+           />
+        </q-card-section>
+      </q-card>
+    </div>
     <div class="col-md-12">
       <vynilInstallView class="q-ma-sm"
-        v-if="!loading && result!=undefined && result.k8sNamespace!=undefined  && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
+        v-if="!loading && result!=undefined && Array.isArray(result.k8sNamespace) && result.k8sNamespace[0].vynilInstall[0]!=undefined && result.k8sNamespace[0].vynilInstall[0]!=null"
         :model="result.k8sNamespace[0].vynilInstall[0]"
         />
     </div>
diff --git a/front/pages/install/vynil/installDashboard.vue b/front/pages/install/vynil/installDashboard.vue
index 40fcbea..7e486d8 100644
--- a/front/pages/install/vynil/installDashboard.vue
+++ b/front/pages/install/vynil/installDashboard.vue
@@ -8,8 +8,6 @@ import { DistribSimpleExcludes } from '../../../libs/vynil/Distrib.js'
 import vynilInstallList from '@/components/vynil/InstallList.vue';
 import { InstallSimpleExcludes } from '../../../libs/vynil/Install.js'
 import { ref, useCore, useNavigationStoreRef, useQuery } from '../../../libs/core';
-import { isArrayBufferView } from 'util/types';
-import { argumentsObjectFromField } from '@apollo/client/utilities';
 const { onErrorHandler, setNamespaceFromRoute, isNamespaced } = useCore();
 const ready = ref(false);
 const InstallByTs = ref([]);
@@ -93,7 +91,7 @@ onResult((res) => {
     :model="result.vynilDistrib"
   />
   <vynilInstallList @refresh="refetch()" :useAction="false"
-    v-if="result !== undefined && result['k8sNamespace'] !== undefined && Array.isArray(result['k8sNamespace']) && result['k8sNamespace'].map(n=>n['vynilInstall']).flat().length>0"
+    v-if="result !== undefined && Array.isArray(result['k8sNamespace']) && result['k8sNamespace'].map(n=>n['vynilInstall']).flat().length>0"
     :model="result.k8sNamespace.map(x=>x.vynilInstall).flat()"
   />
 </template>
\ No newline at end of file
diff --git a/front/routes/custom.ts b/front/routes/custom.ts
index e25da79..5bbecb1 100644
--- a/front/routes/custom.ts
+++ b/front/routes/custom.ts
@@ -35,3 +35,16 @@ export const securityDesc = '';
 export const storageDesc = '';
 export const systemDesc = '';
 export const workloadDesc = '';
+/*
+export const iconBasicAuth = 'fas fa-user-secret';
+export const iconSSHKeyPair = 'fab fa-keycdn';
+export const iconStringSecret = 'key';
+export const monitoringIcon = 'supervised_user_circle';
+export const iconBackup = 'backup';
+export const iconConnection = 'link';
+export const iconRestore = 'cloud_download';
+export const iconUser = 'fas fa-user';
+export const iconAlert = 'notifications';
+export const iconBucket = 'storage';
+export const iconImageRepository = 'fab fa-docker';
+ */
\ No newline at end of file
diff --git a/utils/gen.ts b/utils/gen.ts
index 9742045..4c14f3f 100755
--- a/utils/gen.ts
+++ b/utils/gen.ts
@@ -1,7 +1,7 @@
 #!/usr/bin/env -S npx ts-node-esm
 import path from 'path';
 import { fileURLToPath } from 'url';
-import {LoadFrom,mkdir,rmdir} from './generator/utils.js'
+import {LoadFrom,mkdir,rmdir,uniq} from './generator/utils.js'
 import {loadCompile,loadPartial} from './generator/hb.js'
 import {allCategories} from './generator/config.js'
 import * as fs from 'fs';
@@ -111,7 +111,7 @@ new Promise((resolve) => {
         if (!deleteFiles) mkdir(path.resolve(path_front, 'queries', g.name));
         if (!deleteFiles) mkdir(path.resolve(path_front, 'components', g.name));
         if (!deleteFiles) mkdir(path.resolve(path_front, 'libs', g.name));
-        grpCustom(path.resolve(path_front, 'libs', g.name),`custom.ts`, g)
+        grpCustom(path.resolve(path_front, 'libs', g.name),`custom.ts`, {...g, categories: g.objects.map(o=>o.category).filter(uniq)})
         allCategories.filter(c=> g.objects.filter(o=>o.category==c).length>0).forEach(c=>{
             grpRoutes(path.resolve(path_front, 'routes', c), `${g.name}.ts`, {...g, category: c, plural: g.objects.filter(o=>o.category==c)[0].short,objects: g.objects.filter(o=>o.category==c)});
             if (!deleteFiles) mkdir(path.resolve(path_front, 'pages', c, g.name))
diff --git a/utils/generator/front/grp.custom.def.ts.hbs b/utils/generator/front/grp.custom.def.ts.hbs
index 203e243..fd73f89 100644
--- a/utils/generator/front/grp.custom.def.ts.hbs
+++ b/utils/generator/front/grp.custom.def.ts.hbs
@@ -1,10 +1,11 @@
 import { QTableColumn } from 'quasar'
 import { tableColumnAlign } from '../core'
+import { {{#each categories}}{{this}}Color, {{this}}Icon,{{/each}} } from '../../routes/custom';
 export const {{ name }}Icon = 'apps';
 export const {{ name }}Title = '{{ name }}';
 {{#each objects}}
-export const icon{{ short }} = 'album';
-export const color{{ short }} = '';
+export const icon{{ short }} = {{category}}Icon;
+export const color{{ short }} = {{category}}Color;
 export const description{{ short }} = '';
 export const short{{ short }} = '{{ short }}';
 {{/each}}
diff --git a/utils/generator/front/obj.components.list.vue.hbs b/utils/generator/front/obj.components.list.vue.hbs
index 57038ef..e3d0c87 100644
--- a/utils/generator/front/obj.components.list.vue.hbs
+++ b/utils/generator/front/obj.components.list.vue.hbs
@@ -2,6 +2,7 @@
 import TableHeader from '@/components/core/TableHeader.vue';
 import { ref, use{{ short }}, {{ short }}Columns{{#if namespaced}}, {{ short }}AllColumns{{/if}} } from '../../libs/{{ group }}/{{ short }}.js'
 const { actionNew, toEdit, actionDelete, pagination{{#if namespaced}}, navigation, isNamespaced{{/if}} } = use{{ short }}();
+import { color{{ short }} } from '../../libs/{{ group }}/custom.js'
 let filter = ref('');
 defineEmits(['refresh']);
 withDefaults(defineProps<{model: object[], deletor?:any, useAction?:boolean}>(),{
@@ -11,7 +12,7 @@ withDefaults(defineProps<{model: object[], deletor?:any, useAction?:boolean}>(),
 </script>
 <template>
   <q-card class="q-ma-sm" bordered>
-    <TableHeader title="{{ group }} {{ short }}s" :usecreate="useAction" :userefresh="useAction" itemtype='{{ group }} {{ short }}' v-model:model-filter="filter" @refresh="$emit('refresh')" @create="actionNew({{#if namespaced}}navigation.currentNamespace.value{{/if}})" />
+    <TableHeader title="{{ group }} {{ short }}s" :class="`bg-${ color{{ short }} }`" :usecreate="useAction" :userefresh="useAction" itemtype='{{ group }} {{ short }}' v-model:model-filter="filter" @refresh="$emit('refresh')" @create="actionNew({{#if namespaced}}navigation.currentNamespace.value{{/if}})" />
     <q-card-section class="q-pa-none">
     <q-table :rows="model" :columns="{{#if namespaced}}!isNamespaced()?{{ short }}AllColumns:{{/if}}{{ short }}Columns.filter(c=>c.name!='Action'||useAction)" class="no-shadow" v-model:pagination="pagination" :filter="filter" hide-bottom>
 {{#if namespaced}}
diff --git a/utils/generator/front/obj.components.meta.vue.hbs b/utils/generator/front/obj.components.meta.vue.hbs
index 9e7b59e..86b35f8 100644
--- a/utils/generator/front/obj.components.meta.vue.hbs
+++ b/utils/generator/front/obj.components.meta.vue.hbs
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import MetadataView from '@/components/core/MetadataView.vue';
 import { ref, use{{ short }} } from '../../libs/{{ group }}/{{ short }}.js'
+import { color{{ short }} } from '../../libs/{{ group }}/custom.js'
 const { actionNew, toEdit, actionDelete } = use{{ short }}();
 const to=ref({})
 withDefaults(defineProps<{model: object, deletor?:any, useActions?:boolean}>(), {
@@ -10,7 +11,7 @@ withDefaults(defineProps<{model: object, deletor?:any, useActions?:boolean}>(),
 </script>
 <template>
   <q-card bordered class="q-ma-sm">
-    <q-card-section class="bg-primary text-grey-4">
+    <q-card-section :class="`bg-${ color{{ short }} } text-grey-4`">
       <div class="text-h6 q-mt-none q-mb-none q-pt-none q-pb-none">{{ short }}
         <q-btn-group push class="float-right text-capitalize shadow-3" v-if="useActions">
           <q-btn icon="edit" @click="toEdit({{#if namespaced}}model.metadata.namespace, {{/if}}model.metadata.name)">
diff --git a/utils/generator/front/obj.components.view.vue.hbs b/utils/generator/front/obj.components.view.vue.hbs
index a49dd8a..d075a7c 100644
--- a/utils/generator/front/obj.components.view.vue.hbs
+++ b/utils/generator/front/obj.components.view.vue.hbs
@@ -3,6 +3,7 @@ import { onMounted } from "vue";
 import OpenApiEdit from '@/components/core/OpenApiEdit.vue';
 import MonacoViewer from '@/components/core/MonacoViewer.vue';
 import { use{{ short }}, getProperties, {{ short }}Definition } from '../../libs/{{ group }}/{{ short }}.js'
+import { color{{ short }} } from '../../libs/{{ group }}/custom.js'
 {{#if namespaced}}
 const { onlyReadProperties, viewer, viewerUpdate, setNamespacedItemFromRoute } = use{{ short }}();setNamespacedItemFromRoute();
 {{else}}
@@ -15,7 +16,7 @@ onMounted(() => {
 </script>
 <template>
   <q-card bordered class="q-ma-sm">
-    <q-tabs v-model="viewer.tab" class="bg-primary text-grey-4" active-color="white">
+    <q-tabs v-model="viewer.tab" :class="`bg-primary text-grey-4`" active-color="white">
       <q-tab label="Simple" name="simple" />
 {{#each writeProperties}}
   {{#if (isJsonObject this ../gqlDefs)}}
diff --git a/utils/generator/front/obj.pages.edit.vue.hbs b/utils/generator/front/obj.pages.edit.vue.hbs
index 4326db7..4f4a835 100644
--- a/utils/generator/front/obj.pages.edit.vue.hbs
+++ b/utils/generator/front/obj.pages.edit.vue.hbs
@@ -56,21 +56,21 @@ onError(onErrorHandler);onResult(res => {onNot{{ short }}Found(res);editor.value
   <div class="row q-mb-sm q-ml-sm">
     <div class="col-md-6">
       <{{ group }}{{ short }}Meta :deletor="deletor" :useActions="true"
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
        />
     </div>
 {{#if (contain readProperties 'status')}}
     <div class="col-md-6">
       <{{ group }}{{ short }}Status
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
        />
     </div>
 {{/if}}
     <div class="col-md-12">
       <{{ group }}{{ short }}Edit
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
        />
     </div>
diff --git a/utils/generator/front/obj.pages.view.vue.hbs b/utils/generator/front/obj.pages.view.vue.hbs
index 280963a..4cdcb96 100644
--- a/utils/generator/front/obj.pages.view.vue.hbs
+++ b/utils/generator/front/obj.pages.view.vue.hbs
@@ -58,21 +58,21 @@ onDeleteError((err) => {
   <div class="row q-mb-sm q-ml-sm">
     <div class="col-md-{{#if (contain readProperties 'status')}}6{{else}}3{{/if}}">
       <{{ group }}{{ short }}Meta :deletor="deletor" :useActions="true"
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
        />
     </div>
 {{#if (contain readProperties 'status')}}
     <div class="col-md-6">
       <{{ group }}{{ short }}Status
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
        />
     </div>
 {{/if}}
 {{#each resolvers}}
   {{#if (or (eq type 'parent') (or (eq resultShort 'Node') (eq resultShort 'ServiceAccount')))}}
-    <div class="col-md-3" v-if="!loading && result!=undefined{{#if ../namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=undefined && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}.length>0">
+    <div class="col-md-3" v-if="!loading && result!=undefined{{#if ../namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=undefined && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}.length>0">
       <{{ resultGroup }}{{ resultShort }}Meta
         :model="result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}[0]"
        />
@@ -81,7 +81,7 @@ onDeleteError((err) => {
 {{/each}}
 {{#each resolvers}}
   {{#unless (or (eq type 'parent') (or (eq resultShort 'Node') (eq resultShort 'ServiceAccount')))}}
-    <div class="col-md-3" v-if="!loading && result!=undefined{{#if ../namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=undefined && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}.length>0">
+    <div class="col-md-3" v-if="!loading && result!=undefined{{#if ../namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=undefined && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0]!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}!=null && result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}.length>0">
       <{{ resultGroup }}{{ resultShort }}List
         :model="result{{#if ../namespaced}}.k8sNamespace[0]{{/if}}.{{ ../group }}{{ ../short }}[0].{{ name }}"
        />
@@ -90,7 +90,7 @@ onDeleteError((err) => {
 {{/each}}
     <div class="col-md-12">
       <{{ group }}{{ short }}View class="q-ma-sm"
-        v-if="!loading && result!=undefined{{#if namespaced}} && result.k8sNamespace!=undefined {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
+        v-if="!loading && result!=undefined{{#if namespaced}} && Array.isArray(result.k8sNamespace) {{/if}} && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=undefined && result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]!=null"
         :model="result{{#if namespaced}}.k8sNamespace[0]{{/if}}.{{ group }}{{ short }}[0]"
         />
     </div>