feat: adds better icons for streams in the drop down (#2230)

assets/components.d.ts

@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
+    'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
@@ -20,8 +21,8 @@ declare module '@vue/runtime-core' {
     ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
-    DateTime: typeof import('./components/DateTime.vue')['default']
+    DateTime: typeof import('./components/common/DateTime.vue')['default']
-    DistanceTime: typeof import('./components/DistanceTime.vue')['default']
+    DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
@@ -43,7 +44,7 @@ declare module '@vue/runtime-core' {
     'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
     'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
     'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
-    MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
     'Octicon:container24': typeof import('~icons/octicon/container24')['default']
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
@@ -58,7 +59,7 @@ declare module '@vue/runtime-core' {
     SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
     StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
-    Tag: typeof import('./components/Tag.vue')['default']
+    Tag: typeof import('./components/common/Tag.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }

assets/components/DropdownMenu.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="dropdown is-hoverable">
     <div class="dropdown-trigger">
+      <slot name="trigger">
         <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
           <span class="icon">
             <mdi:dots-vertical />
           </span>
         </button>
+      </slot>
     </div>
     <div class="dropdown-menu" id="dropdown-menu" role="menu">
       <div class="dropdown-content">

assets/components/LogViewer/ContainerTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <div class="column is-narrow" v-if="container.health">
+    <div class="column is-narrow is-hidden-mobile" v-if="container.health">
       <container-health :health="container.health"></container-health>
     </div>
     <div class="column is-ellipsis">

assets/components/LogViewer/LogActionsToolbar.vue

@@ -1,10 +1,18 @@
 <template>
   <dropdown-menu class="is-right">
+    <template #trigger>
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stdout" />
+          <carbon:circle-solid class="is-blue is-small" v-if="streamConfig.stderr" />
+        </span>
+      </button>
+    </template>
     <a class="dropdown-item" @click="clear()">
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon:trash-24 class="mr-4" />
+            <octicon:trash-24 />
           </div>
         </div>
         <div class="level-right">
@@ -16,7 +24,7 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon:download-24 class="mr-4" />
+            <octicon:download-24 />
           </div>
         </div>
         <div class="level-right">
@@ -29,7 +37,7 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <mdi:light-magnify class="mr-4" />
+            <mdi:light-magnify />
           </div>
         </div>
         <div class="level-right">
@@ -39,28 +47,61 @@
     </a>
 
     <hr class="dropdown-divider" />
-    <a class="dropdown-item" @click="streamConfig.stdout = !streamConfig.stdout">
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = true;
+      "
+    >
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <mdi:check class="mr-4 is-blue" v-if="streamConfig.stdout" />
+            <template v-if="streamConfig.stderr && streamConfig.stdout">
+              <carbon:circle-solid class="is-red is-small" />
+              <carbon:circle-solid class="is-blue is-small" />
+            </template>
           </div>
         </div>
         <div class="level-right">
-          {{ $t(streamConfig.stdout ? "toolbar.hide" : "toolbar.show", { std: "STDOUT" }) }}
+          {{ $t("toolbar.show-all") }}
         </div>
       </div>
     </a>
-    <a class="dropdown-item" @click="streamConfig.stderr = !streamConfig.stderr">
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = false;
+      "
+    >
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <mdi:check class="mr-4 is-red" v-if="streamConfig.stderr" />
+            <carbon:circle-solid class="is-blue is-small" v-if="!streamConfig.stderr && streamConfig.stdout" />
+          </div>
+        </div>
+        <div class="level-right">
+          {{ $t("toolbar.show", { std: "STDOUT" }) }}
+        </div>
+      </div>
+    </a>
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = false;
+        streamConfig.stderr = true;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr && !streamConfig.stdout" />
           </div>
         </div>
         <div class="level-right">
           <div class="level-item">
-            {{ $t(streamConfig.stderr ? "toolbar.hide" : "toolbar.show", { std: "STDERR" }) }}
+            {{ $t("toolbar.show", { std: "STDERR" }) }}
           </div>
         </div>
       </div>
@@ -84,5 +125,11 @@ const streamConfig = inject("stream-config") as { stdout: boolean; stderr: boole
 <style lang="scss" scoped>
 .level-left .level-item {
   width: 2.2em;
+  align-items: center;
+  margin-right: 0.5em;
+}
+
+.is-small {
+  width: 0.6em;
 }
 </style>

locales/en.yml

@@ -2,8 +2,8 @@ toolbar:
   clear: Clear
   download: Download
   search: Search
-  show: Show {std}
+  show: Show only {std}
-  hide: Hide {std}
+  show-all: Show all streams
 label:
   containers: Containers
   total-containers: Total Containers

locales/es.yml

@@ -2,7 +2,8 @@ toolbar:
   clear: Limpiar
   download: Descargar
   search: Buscar
-  show: Mostrar {std}
+  show: Mostrar sólo {std}
+  show-all: Mostrar todos los flujos
 label:
   containers: Contenedores
   total-containers: Contenedores Totales

locales/pr.yml

@@ -2,8 +2,8 @@ toolbar:
   clear: Limpar
   download: Descarregar
   search: Pesquisa
-  show: Mostrar {std}
+  show: Mostrar apenas {std}
-  hide: Ocultar {std}
+  show-all: Mostrar todos os fluxos
 label:
   containers: Contentores
   total-containers: Contentores Totais

locales/ru.yml

@@ -2,8 +2,8 @@ toolbar:
   clear: Очистить
   download: Скачать
   search: Поиск
-  show: Показать {std}
+  show: Показать только {std}
-  hide: Скрыть {std}
+  show-all: Показать все потоки
 label:
   containers: Контейнеры
   total-containers: Всего Контейнеров