Adds soft wraps as an option and fixes #1696 (#1718)

assets/components.d.ts

@@ -5,6 +5,8 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    CilColumns: typeof import('~icons/cil/columns')['default']
     CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
     ContainerStat: typeof import('./components/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
@@ -17,7 +19,15 @@ declare module '@vue/runtime-core' {
     LogViewer: typeof import('./components/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
+    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
+    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
+    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
+    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
+    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
     PastTime: typeof import('./components/PastTime.vue')['default']
     RelativeTime: typeof import('./components/RelativeTime.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

assets/components/LogViewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="events" :class="size" ref="events">
+  <ul class="events" ref="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
     <li
       v-for="(item, index) in filtered"
       :key="item.key"
@@ -34,7 +34,7 @@
 <script lang="ts" setup>
 import { PropType, ref, toRefs, watch, nextTick } from "vue";
 
-import { size, showTimestamp } from "@/composables/settings";
+import { size, showTimestamp, softWrap } from "@/composables/settings";
 import RelativeTime from "./RelativeTime.vue";
 import AnsiConvertor from "ansi-to-html";
 import { LogEntry } from "@/types/LogEntry";
@@ -53,14 +53,14 @@ const ansiConvertor = new AnsiConvertor({ escapeXML: true });
 const colorize = (value: string) =>
   ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
 const { messages } = toRefs(props);
-const { filteredMessages, searchFilter, resetSearch, isSearching } = useSearchFilter();
+const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
 const store = useContainerStore();
 const { activeContainers } = storeToRefs(store);
 const filtered = filteredMessages(messages);
 const events = ref(null);
-let selectedLine;
-const handleJumpLineSelected = async (e) => {
-  const line = e.target.closest("li");
+let selectedLine: Element | null = null;
+const handleJumpLineSelected = async (e: Event) => {
+  const line = e.target?.closest("li");
   if (line.tagName !== "LI") {
     return;
   }
@@ -68,7 +68,7 @@ const handleJumpLineSelected = async (e) => {
   resetSearch();
 };
 watch(filtered, async (newVal, oldVal) => {
-  if (selectedLine == null) {
+  if (selectedLine === null) {
     return;
   }
   await nextTick();
@@ -94,6 +94,13 @@ watch(filtered, async (newVal, oldVal) => {
   font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
   overflow: hidden;
 
+  &.disable-wrap {
+    .line,
+    .text {
+      white-space: nowrap;
+    }
+  }
+
   & > li {
     display: flex;
     word-wrap: break-word;

assets/composables/settings.ts

@@ -12,6 +12,7 @@ export const DEFAULT_SETTINGS: {
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
+  softWrap: boolean;
 } = {
   search: true,
   size: "medium",
@@ -21,6 +22,7 @@ export const DEFAULT_SETTINGS: {
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
+  softWrap: true,
 };
 
 export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
@@ -63,3 +65,8 @@ export const hourStyle = computed({
   get: () => settings.value.hourStyle,
   set: (value) => (settings.value.hourStyle = value),
 });
+
+export const softWrap = computed({
+  get: () => settings.value.softWrap,
+  set: (value) => (settings.value.softWrap = value),
+});

assets/pages/Settings.vue

@@ -21,6 +21,18 @@
       <div class="has-underline">
         <h2 class="title is-4">Display</h2>
       </div>
+
+      <div class="item">
+        <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+      </div>
+      <div class="item">
+        <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="softWrap"> Soft wrap lines</o-switch>
+      </div>
+
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
@@ -45,15 +57,7 @@
             By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
           </div>
         </div>
-
-        <div class="item">
-          <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
-        </div>
-        <div class="item">
-          <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
-        </div>
       </div>
-
       <div class="item">
         <div class="columns is-vcentered">
           <div class="column is-narrow">
@@ -142,6 +146,7 @@ import {
   hourStyle,
   showAllContainers,
   size,
+  softWrap,
 } from "@/composables/settings";
 
 setTitle("Settings");

assets/types/LogEntry.d.ts

@@ -3,4 +3,5 @@ export interface LogEntry {
   message: string;
   key: string;
   event?: string;
+  selected?: boolean;
 }