Merge pull request #678 from kubero-dev/feature/fix-logs-view

fix logs view to use more of the screen

Author: mms-gianni

client/src/components/apps/logs.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :style="'height: ' + height + '; width: 100%;'">
+    <div class="logs-container">
         <v-tabs class="console-bar" style="position: relative;">
             <v-tab v-if="logType == 'runlogs'" @click="getLogHistory('web')">run</v-tab>
             <v-tab v-if="logType == 'runlogs' && deploymentstrategy == 'git' && buildstrategy=='plain'" @click="getLogHistory('builder')">build</v-tab>
@@ -9,7 +9,7 @@
             <v-tab v-if="logType == 'buildlogs' && (buildstrategy=='nixpacks' || buildstrategy=='dockerfile')" @click="getBuildLogHistory('push')">push</v-tab>
             <v-tab v-if="logType == 'buildlogs'" @click="getBuildLogHistory('deploy')">deploy</v-tab>
         </v-tabs>
-        <div class="console" id="console" style="height:100%; margin-top: -45px; z-index: 2000;">
+        <div class="console" id="console">
             <div v-for="line in loglines" :key="line.id">
             {{ new Date(line.time).toLocaleDateString() }} {{ new Date(line.time).toLocaleTimeString()}} <span :style="'color:' +line.color">[{{ line.podID }}/{{ line.container.replace('kuberoapp-', '') }}]</span>
             {{ line.log }}
@@ -175,22 +175,30 @@ a:link { text-decoration: none;}
     vertical-align:inherit;
 }
 
-.v-tabs.console-bar {
-    color: #9F9F9F;
+.logs-container {
+    /*height: calc(100vh - 400px);*/
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .v-tabs.console-bar {
+    color: #9F9F9F;
     background-color: #1E1E1E; /*#444*/
+    flex-shrink: 0;
 }
 
 .console {
-    overflow-x: scroll;
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: auto;
     background-color: #333;
     color: #c0c0c0;
     padding: 5px;
     font: 0.85rem Inconsolata, monospace;
-
     display: flex;
     flex-direction: column-reverse;
+    min-height: 0;
 }
 </style>

client/src/components/apps/logstab.vue

@@ -20,7 +20,7 @@
             </v-col>
         </v-row>
         <v-row>
-            <v-col cols="12" sm="12" md="12">
+            <v-col cols="12" sm="12" md="12" style="height: calc(100vh - 400px);">
                 <Logs :pipeline=pipeline :phase=phase :app=app :deploymentstrategy=deploymentstrategy :buildstrategy=buildstrategy logType="runlogs" height="600px"/>
             </v-col>
         </v-row>

client/src/components/profile/index.vue

@@ -30,8 +30,8 @@
             -->
             <v-select
               v-model="locale"
-              :items="$i18n.availableLocales"
-              item-text="name"
+              :items="availableLanguages"
+              item-title="name"
               item-value="code"
               variant="underlined"
               label-disabled="Select Language"
@@ -340,6 +340,18 @@ export default defineComponent({
   name: 'ProfilePage',
   setup() {
     const { locale, t } = useI18n()
+
+    
+    const availableLanguages = ref([
+      { code: 'en', name: 'English' },
+      { code: 'de', name: 'Deutsch' },
+      //{ code: 'es', name: 'Español' },
+      //{ code: 'fr', name: 'Français' },
+      { code: 'de-CH', name: 'Schwizerdütsch' },
+      { code: 'ja', name: '日本語' },
+      { code: 'zhHans', name: '简体中文' },
+      { code: 'pt', name: 'Português' },
+    ])
     
     const user = ref<any>({
       firstName: '',
@@ -514,6 +526,7 @@ export default defineComponent({
 
     return {
       locale,
+      availableLanguages,
       user,
       defaultAvatar,
       tokens,

client/src/locale/de-CH.ts

@@ -295,7 +295,7 @@ const messages = {
       warningMessage: 'Dä Token wird <strong>nümme aazeigt</strong>. Bitte kopier und speicher ihn jetzt sicher ab.',
       copyToken: 'Token kopiere',
       copiedMessage: 'Token i Zwüschealag kopiert!',
-      close: 'Zueche',
+      close: 'Zue',
     },
     actions: {
       editProfile: 'Profil bearbeite',
@@ -448,7 +448,7 @@ const messages = {
         title: 'Gitea',
         baseUrl: 'Gitea Basis-URL',
         personalAccessToken: 'Gitea Personal Access Token',
-        instructions: 'Aleitig zum Erhalte von eme Personal Access Token für',
+        instructions: 'Aleitig zum Erhalte vomene Personal Access Token für',
       },
       gogs: {
         title: 'Gogs',
@@ -468,7 +468,7 @@ const messages = {
     },
     general: {
       title: 'Allgemäini Kubero-Istellige',
-      description: 'Einigi Konfigurationswärt bruche es Browser-Update(*) oder en Pod-Neustart(**), zum wirksam z wärde.',
+      description: 'Einigi Konfigurationswärt bruched es Browser-Update(*) oder en Pod-Neustart(**), zum wirksam z wärde.',
       namespace: 'Kubero Namespace',
       readonlyMode: 'Nur-Läse-Modus (**)',
       adminDisabled: 'Admin deaktiviert',
@@ -510,25 +510,25 @@ const messages = {
     },
   },
   podsizes: {
-    name: 'Pod-Grössen',
-    helpTitle: 'Was sind Pod-Grössen?',
-    helpText: '<p><strong>Pod-Grössen</strong> definieren die Ressourcenanforderungen und -limits für die Pods Ihrer Anwendung in Kubero. Sie können Pod-Grössen erstellen, bearbeiten und löschen, um sie an Ihre Workload-Anforderungen anzupassen.</p><p class="mt-2"><a href="https://www.kubero.dev/docs/usermanual/podsizes/" target="_blank" rel="noopener">Mehr in der Kubero-Dokumentation</a></p>',
+    name: 'Pod-Grössene',
+    helpTitle: 'Was sind Pod-Grössene?',
+    helpText: '<p><strong>Pod-Grössene</strong> definieren die Ressourcenanforderige und -limits für die Pods Ihrer Anwendung in Kubero. Sie können Pod-Grössene erstellen, bearbeiten und löschen, um sie an Ihre Workload-Anforderungen anzupassen.</p><p class="mt-2"><a href="https://www.kubero.dev/docs/usermanual/podsizes/" target="_blank" rel="noopener">Mehr in der Kubero-Dokumentation</a></p>',
     form: {
       name: 'Pod-Grössenname',
-      description: 'Beschreibung',
-      cpuRequest: 'CPU-Anforderung (m)',
+      description: 'Beschriibig',
+      cpuRequest: 'CPU-Anforderig (m)',
       cpuLimit: 'CPU-Limit (m)',
-      memoryRequest: 'Speicheranforderung (Gi)',
+      memoryRequest: 'Speicheranforderig (Gi)',
       memoryLimit: 'Speicherlimit (Gi)',
       cpu: 'CPU',
       memory: 'Speicher',
     },
     actions: {
-      create: 'Pod-Grösse erstellen',
-      edit: 'Pod-Grösse bearbeiten',
+      create: 'Pod-Grösse erstelle',
+      edit: 'Pod-Grösse bearbeite',
     },
     errors: {
-      loadinPodsize: 'Fehler beim Laden der Pod-Grössen',
+      loadinPodsize: 'Fehler bim Lade vo de Pod-Grössene',
     },
   },
   templates: {