1
0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-24 06:28:42 +01:00

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

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

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>