mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00
Code Issues Projects Releases Wiki Activity

stat cleanup (#1910)

Browse Source 
* Updates modules

* Cleans up stats
This commit is contained in:
Amir Raminfar
2022-10-14 13:00:57 -07:00
committed by GitHub
parent e2ad2e0193
commit 5b15a0b29d
6 changed files with 125 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/components/LogViewer/ContainerStat.vue
View File

@@ -3,23 +3,27 @@
<div class="column is-narrow has-text-weight-bold">
{{ container.state }}
</div>
<div class="column is-narrow has-text-centered">
<div>
<div class="column is-narrow has-text-centered is-relative">
<div class="has-border">
<stat-sparkline :data="memoryData"></stat-sparkline>
</div>
<span class="has-text-weight-light has-spacer">mem</span>
<span class="has-text-weight-bold">
{{ formatBytes(container.stat.memoryUsage) }}
</span>
</div>
<div class="column is-narrow"></div>
<div class="column is-narrow has-text-centered">
<div>
<div class="has-background-body-color is-top-left">
<span class="has-text-weight-light has-spacer">mem</span>
<span class="has-text-weight-bold">
{{ formatBytes(container.stat.memoryUsage) }}
</span>
</div>
</div>
<div class="column is-narrow has-text-centered is-relative">
<div class="has-border">
<stat-sparkline :data="cpuData"></stat-sparkline>
</div>
<span class="has-text-weight-light has-spacer">load</span>
<span class="has-text-weight-bold"> {{ container.stat.cpu }}% </span>
<div class="has-background-body-color is-top-left">
<span class="has-text-weight-light has-spacer">load</span>
<span class="has-text-weight-bold"> {{ container.stat.cpu }}% </span>
</div>
</div>
</div>
</template>
@@ -53,4 +57,23 @@ const memoryData = computedWithControl(
content: " ";
}
}
.has-border {
border: 1px solid var(--primary-color);
border-radius: 3px;
padding: 1px 1px 0 1px;
display: flex;
overflow: hidden;
padding-top: 0.25em;
}
.has-background-body-color {
background-color: var(--body-background-color);
}
.is-top-left {
position: absolute;
top: 0;
left: 0.75em;
}
</style>