mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-03 19:45:01 +01:00
Code Issues Projects Releases Wiki Activity

chore: clean up sql and introduce another component (#3312)

Browse Source
This commit is contained in:
Amir Raminfar
2024-10-04 13:48:22 -07:00
committed by GitHub
parent d11f997999
commit 049214d529
5 changed files with 66 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components.d.ts vendored
View File

@@ -106,6 +106,7 @@ declare module 'vue' {
SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
SlideTransition: typeof import('./components/common/SlideTransition.vue')['default']
SQLTable: typeof import('./components/LogViewer/SQLTable.vue')['default']
StackLog: typeof import('./components/StackViewer/StackLog.vue')['default']
StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']

48
assets/components/LogViewer/LogAnalytics.vue
View File

@@ -22,44 +22,14 @@
</div>
</label>
</section>
<DefineTable>
<table class="table table-zebra table-pin-rows table-md" v-if="!evaluating && isReady">
<thead>
<tr>
<th v-for="column in columns" :key="column">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in page" :key="row">
<td v-for="column in columns" :key="column">{{ row[column] }}</td>
</tr>
</tbody>
</table>
<table class="table table-md animate-pulse" v-else>
<thead>
<tr>
<th v-for="_ in 3">
<div class="h-4 w-20 animate-pulse bg-base-content/50 opacity-50"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="_ in 9">
<td v-for="_ in 3">
<div class="h-4 w-20 bg-base-content/50 opacity-20"></div>
</td>
</tr>
</tbody>
</table>
</DefineTable>
<UseTable />
<SQLTable :table="page" :loading="evaluating || !isReady" />
</div>
</aside>
</template>
<script setup lang="ts">
import { Container } from "@/models/Container";
import { Table } from "@apache-arrow/ts";
const { container } = defineProps<{ container: Container }>();
const query = ref("SELECT * FROM logs");
const error = ref<string | null>(null);
@@ -67,8 +37,6 @@ const debouncedQuery = debouncedRef(query, 500);
const evaluating = ref(false);
const pageLimit = 1000;
const [DefineTable, UseTable] = createReusableTemplate();
const url = withBase(
`/api/hosts/${container.host}/containers/${container.id}/logs?stdout=1&stderr=1&everything&jsonOnly`,
);
@@ -121,13 +89,9 @@ const results = computedAsync(
},
);
whenever(evaluating, () => {
error.value = null;
});
const columns = computed(() =>
results.value.numRows > 0 ? Object.keys(results.value.get(0) as Record<string, any>) : [],
);
const page = computed(() => (results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value));
whenever(evaluating, () => (error.value = null));
const page = computed(() =>
results.value.numRows > pageLimit ? results.value.slice(0, pageLimit) : results.value,
) as unknown as ComputedRef<Table<Record<string, any>>>;
</script>
<style lang="postcss" scoped></style>

40
assets/components/LogViewer/SQLTable.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<table class="table table-zebra table-pin-rows table-md" v-if="!loading">
<thead>
<tr>
<th v-for="column in columns" :key="column">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in table" :key="row">
<td v-for="column in columns" :key="column">{{ row[column] }}</td>
</tr>
</tbody>
</table>
<table class="table table-md animate-pulse" v-else>
<thead>
<tr>
<th v-for="_ in 3">
<div class="h-4 w-20 animate-pulse bg-base-content/50 opacity-50"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="_ in 9">
<td v-for="_ in 3">
<div class="h-4 w-20 bg-base-content/50 opacity-20"></div>
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts" setup>
import { Table } from "@apache-arrow/ts";
const { loading, table } = defineProps<{
loading: boolean;
table: Table<Record<string, any>>;
}>();
const columns = computed(() => (table.numRows > 0 ? Object.keys(table.get(0) as Record<string, any>) : []));
</script>

1
package.json
View File

@@ -78,6 +78,7 @@
"vue-router": "^4.4.5"
},
"devDependencies": {
"@apache-arrow/ts": "^17.0.0",
"@pinia/testing": "^0.1.6",
"@playwright/test": "^1.47.2",
"@types/d3-array": "^3.2.1",

18
pnpm-lock.yaml generated
View File

@@ -150,6 +150,9 @@ importers:
specifier: ^4.4.5
version: 4.4.5(vue@3.5.11(typescript@5.6.2))
devDependencies:
'@apache-arrow/ts':
specifier: ^17.0.0
version: 17.0.0
'@pinia/testing':
specifier: ^0.1.6
version: 0.1.6(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
@@ -333,6 +336,9 @@ packages:
'@antfu/utils@0.7.10':
resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
'@apache-arrow/ts@17.0.0':
resolution: {integrity: sha512-+NrpPoCEanJ29CRvo284yoyuIEOia1rsNavnczH3CgsFQG8SOyRX5hnfWa9MMWtiQZ/fhrELWEfO/7Hw1I2Heg==}
'@babel/helper-string-parser@7.24.8':
resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
engines: {node: '>=6.9.0'}
@@ -3646,6 +3652,18 @@ snapshots:
'@antfu/utils@0.7.10': {}
'@apache-arrow/ts@17.0.0':
dependencies:
'@swc/helpers': 0.5.13
'@types/command-line-args': 5.2.3
'@types/command-line-usage': 5.0.4
'@types/node': 20.16.5
command-line-args: 5.2.1
command-line-usage: 7.0.1
flatbuffers: 24.3.25
json-bignum: 0.0.3
tslib: 2.7.0
'@babel/helper-string-parser@7.24.8': {}
'@babel/helper-validator-identifier@7.24.7': {}