feat(Console): adds toolbar

src/components/common/UpdatingDialog.vue

@@ -8,13 +8,27 @@
     persistent
   >
     <v-card-text>
-      <console
+      <console-browser
+        ref="consoleBrowser"
         :items="responses"
         :fullscreen="isMobileViewport"
         readonly
+        @update:auto-scroll-paused="autoScrollPaused = $event"
       />
     </v-card-text>
 
+    <template #menu>
+      <app-btn
+        v-if="autoScrollPaused"
+        icon
+        @click="consoleBrowserElement.scrollToLatest()"
+      >
+        <v-icon dense>
+          $down
+        </v-icon>
+      </app-btn>
+    </template>
+
     <template #actions>
       <v-spacer />
 
@@ -31,19 +45,23 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Ref } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import Console from '@/components/widgets/console/Console.vue'
+import ConsoleBrowser from '@/components/widgets/console/ConsoleBrowser.vue'
 import BrowserMixin from '@/mixins/browser'
 import type { UpdateResponse } from '@/store/version/types'
 
 @Component({
   components: {
-    Console
+    ConsoleBrowser
   }
 })
 export default class UpdatingDialog extends Mixins(StateMixin, BrowserMixin) {
+  @Ref('consoleBrowser')
+  readonly consoleBrowserElement!: ConsoleBrowser
+
   invokedDialog = false
+  autoScrollPaused = false
 
   get open (): boolean {
     if (this.invokedDialog || this.updating) {

src/components/widgets/console/Console.vue → src/components/widgets/console/ConsoleBrowser.vue

@@ -55,7 +55,7 @@ import type AppAutoScrollContainer from '@/components/ui/AppAutoScrollContainer.
     ConsoleItem
   }
 })
-export default class Console extends Mixins(StateMixin) {
+export default class ConsoleBrowser extends Mixins(StateMixin) {
   @Prop({ type: [Array], default: () => [] })
   readonly items!: ConsoleEntry[] | UpdateResponse[]
 
@@ -65,6 +65,9 @@ export default class Console extends Mixins(StateMixin) {
   @Prop({ type: Boolean })
   readonly readonly?: boolean
 
+  @Prop({ type: String })
+  readonly search?: string
+
   @Ref('consoleScroller')
   readonly consoleScrollerElement!: AppAutoScrollContainer
 
@@ -81,9 +84,16 @@ export default class Console extends Mixins(StateMixin) {
   }
 
   get orderedItems () {
+    const search = this.search?.toLowerCase()
+
+    const items = search
+      ? this.items
+        .filter(item => item.message.toLowerCase().includes(search))
+      : [...this.items]
+
     return this.flipLayout
-      ? [...this.items].reverse()
-      : this.items
+      ? items.reverse()
+      : items
   }
 
   scrollToLatest () {
@@ -124,8 +134,8 @@ export default class Console extends Mixins(StateMixin) {
   }
 
   .console-scroller-fullscreen {
-    height: calc(100vh - 260px);
-    height: calc(100svh - 260px);
+    height: calc(100vh - 308px);
+    height: calc(100svh - 308px);
   }
 
   .v-input {

src/components/widgets/console/ConsoleCard.vue

@@ -13,16 +13,6 @@
     @collapsed="handleCollapseChange"
   >
     <template #menu>
-      <app-btn
-        v-if="autoScrollPaused"
-        icon
-        @click="consoleElement.scrollToLatest()"
-      >
-        <v-icon dense>
-          {{ flipLayout ? '$up' : '$down' }}
-        </v-icon>
-      </app-btn>
-
       <app-btn
         v-if="!fullscreen"
         icon
@@ -32,83 +22,20 @@
           $fullScreen
         </v-icon>
       </app-btn>
-
-      <app-btn
-        icon
-        @click="handleClear"
-      >
-        <v-icon dense>
-          $delete
-        </v-icon>
-      </app-btn>
-
-      <v-menu
-        bottom
-        left
-        offset-y
-        transition="slide-y-transition"
-        :close-on-content-click="false"
-      >
-        <template #activator="{ on, attrs }">
-          <app-btn
-            icon
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon dense>
-              $cog
-            </v-icon>
-          </app-btn>
-        </template>
-
-        <v-list dense>
-          <v-list-item @click="hideTempWaits = !hideTempWaits">
-            <v-list-item-action class="my-0">
-              <v-checkbox :input-value="hideTempWaits" />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t('app.console.label.hide_temp_waits') }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-
-          <v-list-item @click="flipLayout = !flipLayout">
-            <v-list-item-action class="my-0">
-              <v-checkbox :input-value="flipLayout" />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t('app.console.label.flip_layout') }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-
-          <template v-if="filters && filters.length">
-            <v-divider />
-
-            <v-list-item
-              v-for="filter in filters"
-              :key="filter.id"
-              @click="handleToggleFilter(filter)"
-            >
-              <v-list-item-action class="my-0">
-                <v-checkbox :input-value="filter.enabled" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ filter.name }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </template>
-        </v-list>
-      </v-menu>
     </template>
 
-    <console
-      ref="console"
+    <console-toolbar
+      :auto-scroll-paused="autoScrollPaused"
+      :flip-layout.sync="flipLayout"
+      :search.sync="search"
+      @clear="handleClear"
+      @scrollToLatest="consoleBrowserElement.scrollToLatest()"
+    />
+
+    <console-browser
+      ref="consoleBrowser"
       :items="items"
+      :search="search"
       :fullscreen="fullscreen"
       @update:auto-scroll-paused="autoScrollPaused = $event"
     />
@@ -117,39 +44,26 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
-import Console from './Console.vue'
-import type { ConsoleEntry, ConsoleFilter } from '@/store/console/types'
+import ConsoleBrowser from './ConsoleBrowser.vue'
+import ConsoleToolbar from './ConsoleToolbar.vue'
+import type { ConsoleEntry } from '@/store/console/types'
 
 @Component({
   components: {
-    Console
+    ConsoleBrowser,
+    ConsoleToolbar
   }
 })
 export default class ConsoleCard extends Vue {
   @Prop({ type: Boolean })
   readonly fullscreen?: boolean
 
-  @Ref('console')
-  readonly consoleElement!: Console
+  @Ref('consoleBrowser')
+  readonly consoleBrowserElement!: ConsoleBrowser
 
+  search = ''
   autoScrollPaused = false
 
-  get filters (): ConsoleFilter[] {
-    return this.$typedState.console.consoleFilters
-  }
-
-  get hideTempWaits (): boolean {
-    return this.$typedState.config.uiSettings.general.hideTempWaits
-  }
-
-  set hideTempWaits (value: boolean) {
-    this.$typedDispatch('config/saveByPath', {
-      path: 'uiSettings.general.hideTempWaits',
-      value,
-      server: true
-    })
-  }
-
   get flipLayout (): boolean {
     return this.$typedState.config.uiSettings.general.flipConsoleLayout
   }
@@ -173,25 +87,18 @@ export default class ConsoleCard extends Vue {
   @Watch('inLayout')
   inLayoutChange (inLayout: boolean) {
     if (!inLayout) {
-      this.consoleElement.scrollToLatest()
+      this.consoleBrowserElement.scrollToLatest()
     }
   }
 
   handleCollapseChange (collapsed: boolean) {
     if (!collapsed) {
-      this.consoleElement.scrollToLatest()
+      this.consoleBrowserElement.scrollToLatest()
     }
   }
 
   handleClear () {
     this.$typedDispatch('console/onClear')
   }
-
-  handleToggleFilter (filter: ConsoleFilter) {
-    this.$typedDispatch('console/onSaveFilter', {
-      ...filter,
-      enabled: !filter.enabled
-    })
-  }
 }
 </script>

src/components/widgets/console/ConsoleFilterMenu.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-menu
+    bottom
+    left
+    offset-y
+    transition="slide-y-transition"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ on: menu, attrs }">
+      <v-tooltip bottom>
+        <template #activator="{ on: tooltip }">
+          <app-btn
+            :disabled="disabled"
+            icon
+            text
+            v-bind="attrs"
+            v-on="{... menu, ...tooltip}"
+          >
+            <v-icon>
+              $filter
+            </v-icon>
+          </app-btn>
+        </template>
+        <span>{{ $t('app.general.btn.filter') }}</span>
+      </v-tooltip>
+    </template>
+
+    <v-list dense>
+      <v-list-item @click="hideTempWaits = !hideTempWaits">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="hideTempWaits" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.console.label.hide_temp_waits') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
+      <template v-if="filters && filters.length">
+        <v-divider />
+
+        <v-list-item
+          v-for="filter in filters"
+          :key="filter.id"
+          @click="handleToggleFilter(filter)"
+        >
+          <v-list-item-action class="my-0">
+            <v-checkbox :input-value="filter.enabled" />
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ filter.name }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import type { ConsoleFilter } from '@/store/console/types'
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class ConsoleFilterMenu extends Vue {
+  @Prop({ type: Boolean })
+  readonly disabled?: boolean
+
+  get hideTempWaits (): boolean {
+    return this.$typedState.config.uiSettings.general.hideTempWaits
+  }
+
+  set hideTempWaits (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.general.hideTempWaits',
+      value,
+      server: true
+    })
+  }
+
+  get filters (): ConsoleFilter[] {
+    return this.$typedState.console.consoleFilters
+  }
+
+  handleToggleFilter (filter: ConsoleFilter) {
+    this.$typedDispatch('console/onSaveFilter', {
+      ...filter,
+      enabled: !filter.enabled
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.v-list-item--active::before) {
+  opacity: 0;
+}
+:deep(.v-list-item--active:hover::before) {
+  opacity: 0.08;
+}
+</style>