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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user