feat: finds same name containers and shows option redirect to new containers (#2390)

assets/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     BarChart: typeof import('./components/BarChart.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Carbon:information': typeof import('~icons/carbon/information')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
@@ -27,7 +28,6 @@ declare module 'vue' {
     DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     Dropdown: typeof import('./components/common/Dropdown.vue')['default']
-    DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     'Ic:sharpFindInPage': typeof import('~icons/ic/sharp-find-in-page')['default']

assets/components/LogViewer/ContainerStat.vue

@@ -14,8 +14,8 @@ const cpuData = computedWithControl(
     const history = container.value.statHistory;
     const points: Point<unknown>[] = history.map((stat, i) => ({
       x: i,
-      y: stat.snapshot.cpu,
-      value: stat.snapshot.cpu + "%",
+      y: Math.max(0, stat.snapshot.cpu),
+      value: Math.max(0, stat.snapshot.cpu) + "%",
     }));
     return points;
   },

assets/components/LogViewer/DockerEventLogItem.vue

@@ -1,12 +1,43 @@
 <template>
-  <span class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></span>
+  <div class="flex-1 font-sans text-[0.9rem]">
+    <span class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></span>
+    <div class="alert alert-info mx-auto mt-8 w-1/2 text-[1rem]" v-if="nextContainer">
+      <carbon:information class="h-6 w-6 shrink-0 stroke-current" />
+      <span>
+        Another container instance with the same name was created <distance-time :date="nextContainer.created" />. Do
+        you want to redirect to the new one?
+      </span>
+      <div>
+        <router-link :to="{ name: 'container-id', params: { id: nextContainer.id } }" class="btn btn-primary btn-sm">
+          Redirect
+        </router-link>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { DockerEventLogEntry } from "@/models/LogEntry";
 
-defineProps<{
+const { logEntry } = defineProps<{
   logEntry: DockerEventLogEntry;
 }>();
+
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+const { container } = useContainerContext();
+
+const nextContainer = computed(
+  () =>
+    containers.value
+      .filter(
+        (c) =>
+          c.host === container.value.host &&
+          c.created > logEntry.date &&
+          c.name === container.value.name &&
+          c.state === "running",
+      )
+      .toSorted((a, b) => +a.created - +b.created)[0],
+);
 </script>
 
 <style lang="postcss" scoped>

assets/components/LogViewer/LogViewer.vue

@@ -5,11 +5,10 @@
       :key="item.id"
       :data-key="item.id"
       :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
-      class="flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]"
     >
       <a
-        class="btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus"
-        v-show="isSearching()"
+        class="jump-context tooltip-primary tooltip tooltip-right"
+        v-if="isSearching()"
         data-tip="Jump to Context"
         @click="handleJumpLineSelected($event, item)"
         :href="`#${item.id}`"
@@ -73,9 +72,14 @@ watch(
     monospace;
 
   > li {
+    @apply flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07];
     &:last-child {
       scroll-margin-block-end: 5rem;
     }
+
+    .jump-context {
+      @apply mr-2 flex items-center font-sans text-secondary hover:text-secondary-focus;
+    }
   }
 
   &.small {

assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap

@@ -2,9 +2,8 @@
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <!--v-if-->
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
       <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
@@ -19,9 +18,8 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
 
 exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <!--v-if-->
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
       <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
@@ -36,9 +34,8 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
 
 exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <!--v-if-->
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
       <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
@@ -53,9 +50,8 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
 
 exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <!--v-if-->
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
       <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
@@ -70,7 +66,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\"><a data-v-2e92daca=\\"\\" class=\\"jump-context tooltip-primary tooltip tooltip-right\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
@@ -87,9 +83,8 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 
 exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07]\\"><a data-v-2e92daca=\\"\\" class=\\"btn btn-ghost tooltip-primary tooltip btn-sm tooltip-right mr-4 flex self-start font-sans font-normal normal-case text-secondary hover:text-secondary-focus\\" data-tip=\\"Jump to Context\\" href=\\"#1\\" style=\\"display: none;\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <!--v-if-->
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
       <!--v-if-->
       <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">

assets/components/SideMenu.vue

@@ -142,7 +142,7 @@ const activeContainersById = computed(() =>
 </script>
 <style scoped lang="postcss">
 .menu {
-  @apply text-[0.95em];
+  @apply text-[0.95rem];
 }
 .containers a {
   @apply auto-cols-[auto_max-content];

assets/components/common/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <details class="dropdown" ref="details" v-on-click-outside="close">
-    <summary class="btn btn-primary flex-nowrap font-normal" v-bind="$attrs">
+    <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
       <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
     </summary>
     <ul class="menu dropdown-content rounded-box z-50 w-52 bg-base p-2 shadow">

assets/main.css

@@ -38,6 +38,8 @@
     --b2: var(--base-color);
     --b3: var(--base-darker-color);
     --bc: var(--base-content-color);
+    --in: 207 90% 54%;
+    --inc: 207 90% 94%;
   }
   html[data-theme="dark"] {
     @mixin dark;
@@ -92,6 +94,10 @@
   .input {
     @apply focus:outline-none;
   }
+
+  .btn {
+    @apply font-normal normal-case;
+  }
 }
 
 @layer utilities {

assets/pages/index.vue

@@ -39,7 +39,7 @@ const { containers, ready } = storeToRefs(containerStore) as unknown as {
   ready: Ref<boolean>;
 };
 
-const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => +b.created - +a.created));
+const mostRecentContainers = $computed(() => containers.value.toSorted((a, b) => +b.created - +a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
 
 let totalCpu = $ref(0);