Playing with colors

.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

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">

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">

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>

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},

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},

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

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},

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},