diff --git a/assets/components.d.ts b/assets/components.d.ts index 8d6bd05c..76649017 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -17,6 +17,7 @@ declare module '@vue/runtime-core' { 'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default'] 'Cil:xCircle': typeof import('~icons/cil/x-circle')['default'] ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default'] + ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.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'] diff --git a/assets/components/LogViewer/ContainerHealth.vue b/assets/components/LogViewer/ContainerHealth.vue new file mode 100644 index 00000000..fd0c016c --- /dev/null +++ b/assets/components/LogViewer/ContainerHealth.vue @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue index 82e5b46c..c541e72e 100644 --- a/assets/components/LogViewer/ContainerTitle.vue +++ b/assets/components/LogViewer/ContainerTitle.vue @@ -1,14 +1,12 @@ - - - - - - + + + + {{ container.name }}.{{ container.swarmId }} {{ container.image.replace(/@sha.*/, "") }} - + @@ -23,14 +21,4 @@ const container = inject("container") as ComputedRef; .icon { vertical-align: middle; } - -.health { - &[health="unhealthy"] { - color: var(--red-color); - } - - &[health="healthy"] { - color: var(--green-color); - } -} diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index 5c6acf64..5541b1c1 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -78,11 +78,7 @@ - - - - - + @@ -99,7 +95,7 @@ MEM - {{ item.getLastStat().snapshot.memory }} + {{ formatBytes(item.getLastStat().snapshot.memoryUsage) }} @@ -169,15 +165,6 @@ li.exited a { color: #777; } -.health { - &[health="unhealthy"] { - color: var(--red-color); - } - - &[health="healthy"] { - color: var(--green-color); - } -} .icons { column-gap: 0.35em; align-items: baseline;