mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-05 12:25:32 +01:00
Code Issues Projects Releases Wiki Activity

fix(performance): remove table component and uses own table component to improve performance (#2326)

Browse Source 
* fix: remove table component and uses own table component to improve performance

* adds id
This commit is contained in:
Amir Raminfar
2023-07-27 19:20:23 -07:00
committed by GitHub
parent c1b8d0aed0
commit 11487003f2
6 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components.d.ts vendored
View File

@@ -19,6 +19,7 @@ declare module 'vue' {
ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
ContainerTable: typeof import('./components/ContainerTable.vue')['default']
ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
DateTime: typeof import('./components/common/DateTime.vue')['default']
DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']

45
assets/components/ContainerTable.vue Normal file
View File

@@ -0,0 +1,45 @@
!
<template>
<table class="table is-fullwidth">
<thead>
<tr>
<th>{{ $t("label.container-name") }}</th>
<th>{{ $t("label.status") }}</th>
<th>{{ $t("label.last-started") }}</th>
<th>{{ $t("label.avg-cpu") }}</th>
<th>{{ $t("label.avg-mem") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="container in containers" :key="container.id">
<td>
<router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
{{ container.name }}
</router-link>
</td>
<td>{{ container.state }}</td>
<td><distance-time :date="container.created" strict :suffix="false"></distance-time></td>
<td>
{{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
</td>
<td>
{{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
const { containers } = defineProps<{
containers: {
movingAverage: { cpu: number; memory: number };
created: Date;
state: string;
name: string;
id: string;
}[];
}>();
</script>
<style lang="scss" scoped></style>

13
assets/components/OrugaIcon.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<mdi:arrow-up v-if="icon[1] == 'arrow-up'" />
<mdi:chevron-right v-else-if="icon[1] == 'chevron-right'" />
<mdi:chevron-left v-else-if="icon[1] == 'chevron-left'" />
</div>
</template>
<script lang="ts" setup>
const { icon } = defineProps<{ icon: string[] }>();
</script>
<style scoped></style>

6
assets/models/Container.ts
View File

@@ -12,7 +12,7 @@ export class Container {
private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
public readonly swarmId: string | null = null;
public readonly isSwarm: boolean = false;
public readonly movingAverageStat: Ref<Stat>;
private readonly movingAverageStat: Ref<Stat>;
constructor(
public readonly id: string,
@@ -44,4 +44,8 @@ export class Container {
public getLastStat() {
return unref(this.throttledStatHistory.last);
}
get movingAverage() {
return unref(this.movingAverageStat);
}
}

5
assets/modules/oruga.ts
View File

@@ -1,7 +1,7 @@
import { type App } from "vue";
import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, Table, Modal, Config } from "@oruga-ui/oruga-next";
import { bulmaConfig } from "@oruga-ui/theme-bulma";
import OrugaIcon from "@/components/OrugaIcon.vue";
export const install = (app: App) => {
app
.use(Autocomplete)
@@ -12,6 +12,5 @@ export const install = (app: App) => {
.use(Field)
.use(Skeleton)
.use(Table)
.component("oruga-icon", OrugaIcon)
.use(Config, { ...bulmaConfig, iconComponent: "oruga-icon", iconPack: "" });
.use(Config, bulmaConfig);
};

26
assets/pages/index.vue
View File

@@ -12,7 +12,7 @@
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<div class="level-item has-text-centered" data-ci-skip>
<div class="level-item has-text-centered">
<div>
<p class="title">{{ totalCpu }}%</p>
<p class="heading">{{ $t("label.total-cpu-usage") }}</p>
@@ -22,7 +22,7 @@
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<div class="level-item has-text-centered" data-ci-skip>
<div class="level-item has-text-centered">
<div>
<p class="title">{{ formatBytes(totalMem) }}</p>
<p class="heading">{{ $t("label.total-mem-usage") }}</p>
@@ -43,26 +43,8 @@
</div>
<section class="section table-container">
<div class="box" data-ci-skip>
<o-table :data="runningContainers" backend-sorting backend-filtering paginated :per-page="15">
<o-table-column #default="{ row: container }" :label="$t('label.container-name')" field="name">
<router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
{{ container.name }}
</router-link>
</o-table-column>
<o-table-column #default="{ row: container }" :label="$t('label.status')" field="state">
{{ container.state }}
</o-table-column>
<o-table-column #default="{ row: container }" :label="$t('label.last-started')" field="created">
<distance-time :date="container.created" strict :suffix="false"></distance-time>
</o-table-column>
<o-table-column #default="{ row: container }" :label="$t('label.avg-cpu')" field="movingAverageStat.cpu">
{{ (container.movingAverageStat.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
</o-table-column>
<o-table-column #default="{ row: container }" :label="$t('label.avg-mem')" field="movingAverageStat.memory">
{{ (container.movingAverageStat.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
</o-table-column>
</o-table>
<div class="box">
<container-table :containers="runningContainers"></container-table>
</div>
</section>
</template>