60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="app-shell">
|
||
|
|
<TopBar />
|
||
|
|
<router-view
|
||
|
|
:lab-data="labData"
|
||
|
|
:lab-status="labStatus"
|
||
|
|
:service-data="serviceData"
|
||
|
|
:network-data="networkData"
|
||
|
|
:metrics-data="metricsData"
|
||
|
|
:loading="statusLoading"
|
||
|
|
:error="statusError"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import TopBar from "./components/TopBar.vue";
|
||
|
|
import { fallbackHardware, fallbackServices, fallbackNetwork, fallbackMetrics } from "./data/sample.js";
|
||
|
|
|
||
|
|
const labData = ref(fallbackHardware());
|
||
|
|
const labStatus = ref(null);
|
||
|
|
const serviceData = ref(fallbackServices());
|
||
|
|
const networkData = ref(fallbackNetwork());
|
||
|
|
const metricsData = ref(fallbackMetrics());
|
||
|
|
|
||
|
|
const statusLoading = ref(true);
|
||
|
|
const statusError = ref("");
|
||
|
|
|
||
|
|
async function refreshLabStatus() {
|
||
|
|
try {
|
||
|
|
const resp = await fetch("/api/lab/status", { headers: { Accept: "application/json" } });
|
||
|
|
if (!resp.ok) throw new Error(`status ${resp.status}`);
|
||
|
|
labStatus.value = await resp.json();
|
||
|
|
statusError.value = "";
|
||
|
|
} catch (err) {
|
||
|
|
labStatus.value = null;
|
||
|
|
statusError.value = "Live data unavailable";
|
||
|
|
} finally {
|
||
|
|
statusLoading.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
refreshLabStatus();
|
||
|
|
window.setInterval(refreshLabStatus, 30000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.app-shell {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: radial-gradient(circle at 8% 12%, rgba(55, 135, 255, 0.08), transparent 20%),
|
||
|
|
radial-gradient(circle at 90% 20%, rgba(0, 255, 182, 0.07), transparent 25%),
|
||
|
|
radial-gradient(circle at 18% 84%, rgba(255, 75, 135, 0.06), transparent 24%),
|
||
|
|
var(--bg-deep);
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
</style>
|