From d0edc42d1ba27a4853e626c84f8b334f4d73426a Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 1 Jun 2023 09:45:29 -0700
Subject: [PATCH] feat: adds better icons for streams in the drop down (#2230)

---
 assets/components.d.ts                        |  9 +--
 assets/components/DropdownMenu.vue            | 12 ++--
 .../components/LogViewer/ContainerTitle.vue   |  2 +-
 .../LogViewer/LogActionsToolbar.vue           | 65 ++++++++++++++++---
 assets/components/{ => common}/DateTime.vue   |  0
 .../components/{ => common}/DistanceTime.vue  |  0
 assets/components/{ => common}/MobileMenu.vue |  0
 assets/components/{ => common}/Tag.vue        |  0
 locales/en.yml                                |  4 +-
 locales/es.yml                                |  3 +-
 locales/pr.yml                                |  4 +-
 locales/ru.yml                                |  4 +-
 12 files changed, 77 insertions(+), 26 deletions(-)
 rename assets/components/{ => common}/DateTime.vue (100%)
 rename assets/components/{ => common}/DistanceTime.vue (100%)
 rename assets/components/{ => common}/MobileMenu.vue (100%)
 rename assets/components/{ => common}/Tag.vue (100%)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 0e8d648b..b4742ecc 100644
--- a/assets/components.d.ts
+++ b/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']
-    DistanceTime: typeof import('./components/DistanceTime.vue')['default']
+    DateTime: typeof import('./components/common/DateTime.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']
   }
 }
diff --git a/assets/components/DropdownMenu.vue b/assets/components/DropdownMenu.vue
index cdf53b0d..72f13d31 100644
--- a/assets/components/DropdownMenu.vue
+++ b/assets/components/DropdownMenu.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="dropdown is-hoverable">
     <div class="dropdown-trigger">
-      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-        <span class="icon">
-          <mdi:dots-vertical />
-        </span>
-      </button>
+      <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">
diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index 86c4cc23..b8965902 100644
--- a/assets/components/LogViewer/ContainerTitle.vue
+++ b/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">
diff --git a/assets/components/LogViewer/LogActionsToolbar.vue b/assets/components/LogViewer/LogActionsToolbar.vue
index 689b1c32..a9b2094b 100644
--- a/assets/components/LogViewer/LogActionsToolbar.vue
+++ b/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>
diff --git a/assets/components/DateTime.vue b/assets/components/common/DateTime.vue
similarity index 100%
rename from assets/components/DateTime.vue
rename to assets/components/common/DateTime.vue
diff --git a/assets/components/DistanceTime.vue b/assets/components/common/DistanceTime.vue
similarity index 100%
rename from assets/components/DistanceTime.vue
rename to assets/components/common/DistanceTime.vue
diff --git a/assets/components/MobileMenu.vue b/assets/components/common/MobileMenu.vue
similarity index 100%
rename from assets/components/MobileMenu.vue
rename to assets/components/common/MobileMenu.vue
diff --git a/assets/components/Tag.vue b/assets/components/common/Tag.vue
similarity index 100%
rename from assets/components/Tag.vue
rename to assets/components/common/Tag.vue
diff --git a/locales/en.yml b/locales/en.yml
index 40e9e1f0..3dd097b3 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -2,8 +2,8 @@ toolbar:
   clear: Clear
   download: Download
   search: Search
-  show: Show {std}
-  hide: Hide {std}
+  show: Show only {std}
+  show-all: Show all streams
 label:
   containers: Containers
   total-containers: Total Containers
diff --git a/locales/es.yml b/locales/es.yml
index 2b80c044..2cad95c0 100644
--- a/locales/es.yml
+++ b/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
diff --git a/locales/pr.yml b/locales/pr.yml
index cf90246a..3275abe4 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -2,8 +2,8 @@ toolbar:
   clear: Limpar
   download: Descarregar
   search: Pesquisa
-  show: Mostrar {std}
-  hide: Ocultar {std}
+  show: Mostrar apenas {std}
+  show-all: Mostrar todos os fluxos
 label:
   containers: Contentores
   total-containers: Contentores Totais
diff --git a/locales/ru.yml b/locales/ru.yml
index f8d72b3d..2dfb2c21 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -2,8 +2,8 @@ toolbar:
   clear: Очистить
   download: Скачать
   search: Поиск
-  show: Показать {std}
-  hide: Скрыть {std}
+  show: Показать только {std}
+  show-all: Показать все потоки
 label:
   containers: Контейнеры
   total-containers: Всего Контейнеров