201 előtti mentés
This commit is contained in:
Roo
@@ -273,30 +273,51 @@
|
||||
|
||||
<!-- Total Assets -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="pa-4">
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="3"
|
||||
rounded="xl"
|
||||
:color="healthMonitor.loading ? 'grey-lighten-4' : 'surface'"
|
||||
:loading="healthMonitor.loading && !healthMonitor.metrics"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-database" class="mr-2"></v-icon>
|
||||
Total Assets
|
||||
<v-icon icon="mdi-car" class="mr-2" color="indigo-darken-2"></v-icon>
|
||||
Total Vehicles
|
||||
<v-spacer></v-spacer>
|
||||
<v-progress-circular
|
||||
v-if="healthMonitor.loading && !healthMonitor.metrics"
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
color="indigo"
|
||||
></v-progress-circular>
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h4 font-weight-bold text-primary">
|
||||
<v-card-text class="text-h3 font-weight-bold text-indigo-darken-2">
|
||||
{{ healthMonitor.metrics?.total_assets?.toLocaleString() || '--' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>Vehicles, services, and organizations</v-card-subtitle>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-database" size="small" class="mr-1"></v-icon>
|
||||
Seeded vehicles in database
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<v-icon icon="mdi-check-circle" color="success" size="small" class="mr-1"></v-icon>
|
||||
<span class="text-caption text-disabled">Live from PostgreSQL</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Total Organizations -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="pa-4">
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="3"
|
||||
rounded="xl"
|
||||
:color="healthMonitor.loading ? 'grey-lighten-4' : 'surface'"
|
||||
:loading="healthMonitor.loading && !healthMonitor.metrics"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-office-building" class="mr-2"></v-icon>
|
||||
<v-icon icon="mdi-office-building" class="mr-2" color="teal-darken-2"></v-icon>
|
||||
Organizations
|
||||
<v-spacer></v-spacer>
|
||||
<v-progress-circular
|
||||
@@ -304,129 +325,213 @@
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
color="teal"
|
||||
></v-progress-circular>
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h4 font-weight-bold text-success">
|
||||
<v-card-text class="text-h3 font-weight-bold text-teal-darken-2">
|
||||
{{ healthMonitor.metrics?.total_organizations?.toLocaleString() || '--' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>Registered business entities</v-card-subtitle>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-domain" size="small" class="mr-1"></v-icon>
|
||||
Registered business entities
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<v-icon icon="mdi-check-circle" color="success" size="small" class="mr-1"></v-icon>
|
||||
<span class="text-caption text-disabled">Real API data</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Active Users -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="3"
|
||||
rounded="xl"
|
||||
:color="healthMonitor.loading ? 'grey-lighten-4' : 'surface'"
|
||||
:loading="healthMonitor.loading && !healthMonitor.metrics"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-account-group" class="mr-2" color="emerald-darken-2"></v-icon>
|
||||
Active Users
|
||||
<v-spacer></v-spacer>
|
||||
<v-progress-circular
|
||||
v-if="healthMonitor.loading && !healthMonitor.metrics"
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
color="emerald"
|
||||
></v-progress-circular>
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h3 font-weight-bold text-emerald-darken-2">
|
||||
{{ healthMonitor.metrics?.active_users?.toLocaleString() || '--' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-account" size="small" class="mr-1"></v-icon>
|
||||
Total registered users
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<v-icon icon="mdi-check-circle" color="success" size="small" class="mr-1"></v-icon>
|
||||
<span class="text-caption text-disabled">Including superadmin</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Critical Alerts -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="pa-4">
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="3"
|
||||
rounded="xl"
|
||||
:color="healthMonitor.loading ? 'grey-lighten-4' : 'surface'"
|
||||
:loading="healthMonitor.loading && !healthMonitor.metrics"
|
||||
:border="healthMonitor.metrics?.critical_alerts_24h ? 'left' : false"
|
||||
:color-border="healthMonitor.metrics?.critical_alerts_24h ? 'error' : 'success'"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-alert" class="mr-2"></v-icon>
|
||||
Critical Alerts (24h)
|
||||
<v-icon
|
||||
:icon="healthMonitor.metrics?.critical_alerts_24h ? 'mdi-alert-octagon' : 'mdi-shield-check'"
|
||||
class="mr-2"
|
||||
:color="healthMonitor.metrics?.critical_alerts_24h ? 'error' : 'success'"
|
||||
></v-icon>
|
||||
System Health
|
||||
<v-spacer></v-spacer>
|
||||
<v-progress-circular
|
||||
v-if="healthMonitor.loading && !healthMonitor.metrics"
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
:color="healthMonitor.metrics?.critical_alerts_24h ? 'error' : 'success'"
|
||||
></v-progress-circular>
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h4 font-weight-bold" :class="healthMonitor.metrics?.critical_alerts_24h ? 'text-error' : 'text-info'">
|
||||
<v-card-text
|
||||
class="text-h3 font-weight-bold"
|
||||
:class="healthMonitor.metrics?.critical_alerts_24h ? 'text-error' : 'text-success'"
|
||||
>
|
||||
{{ healthMonitor.metrics?.critical_alerts_24h || 0 }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>
|
||||
<span v-if="healthMonitor.metrics?.critical_alerts_24h">Requires immediate attention</span>
|
||||
<span v-else>No critical issues</span>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon
|
||||
:icon="healthMonitor.metrics?.critical_alerts_24h ? 'mdi-alert' : 'mdi-check-circle'"
|
||||
size="small"
|
||||
class="mr-1"
|
||||
:color="healthMonitor.metrics?.critical_alerts_24h ? 'error' : 'success'"
|
||||
></v-icon>
|
||||
<span :class="healthMonitor.metrics?.critical_alerts_24h ? 'text-error' : 'text-success'">
|
||||
{{ healthMonitor.metrics?.critical_alerts_24h ? 'Critical alerts' : 'All systems operational' }}
|
||||
</span>
|
||||
</v-card-subtitle>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- System Uptime -->
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="pa-4">
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-heart-pulse" class="mr-2"></v-icon>
|
||||
System Uptime
|
||||
<v-spacer></v-spacer>
|
||||
<v-progress-circular
|
||||
v-if="healthMonitor.loading && !healthMonitor.metrics"
|
||||
indeterminate
|
||||
size="20"
|
||||
width="2"
|
||||
></v-progress-circular>
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h4 font-weight-bold text-warning">
|
||||
{{ healthMonitor.formattedUptime }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>
|
||||
Response: {{ healthMonitor.formattedResponseTime }}
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<v-icon
|
||||
v-if="healthMonitor.metrics?.response_time_ms < 100"
|
||||
icon="mdi-check"
|
||||
color="success"
|
||||
:icon="healthMonitor.metrics?.critical_alerts_24h ? 'mdi-clock-alert' : 'mdi-clock-check'"
|
||||
:color="healthMonitor.metrics?.critical_alerts_24h ? 'warning' : 'success'"
|
||||
size="small"
|
||||
class="ml-1"
|
||||
class="mr-1"
|
||||
></v-icon>
|
||||
<v-icon
|
||||
v-else-if="healthMonitor.metrics?.response_time_ms < 300"
|
||||
icon="mdi-alert"
|
||||
color="warning"
|
||||
size="small"
|
||||
class="ml-1"
|
||||
></v-icon>
|
||||
<v-icon
|
||||
v-else
|
||||
icon="mdi-alert-circle"
|
||||
color="error"
|
||||
size="small"
|
||||
class="ml-1"
|
||||
></v-icon>
|
||||
</v-card-subtitle>
|
||||
<span class="text-caption text-disabled">Last 24 hours</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Additional Metrics Row -->
|
||||
<v-row class="mt-2">
|
||||
<!-- Performance Metrics Row -->
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4">
|
||||
<v-card-title class="text-h6">
|
||||
<v-icon icon="mdi-account-group" class="mr-2"></v-icon>
|
||||
Active Users
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
color="surface-variant"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-speedometer" class="mr-2" color="deep-purple"></v-icon>
|
||||
System Uptime
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h3 font-weight-bold text-primary">
|
||||
{{ healthMonitor.metrics?.active_users?.toLocaleString() || '--' }}
|
||||
<v-card-text class="text-h2 font-weight-bold text-deep-purple-darken-2">
|
||||
{{ healthMonitor.formattedUptime }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>Currently logged in users</v-card-subtitle>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4">
|
||||
<v-card-title class="text-h6">
|
||||
<v-icon icon="mdi-database-export" class="mr-2"></v-icon>
|
||||
DB Connections
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h3 font-weight-bold" :class="getDbConnectionClass(healthMonitor.metrics?.database_connections)">
|
||||
{{ healthMonitor.metrics?.database_connections || '--' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>
|
||||
<span v-if="healthMonitor.metrics?.database_connections > 40" class="text-error">High load</span>
|
||||
<span v-else-if="healthMonitor.metrics?.database_connections > 20" class="text-warning">Moderate load</span>
|
||||
<span v-else class="text-success">Normal load</span>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-heart-pulse" size="small" class="mr-1"></v-icon>
|
||||
Service availability
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<span class="text-caption">Response time:</span>
|
||||
<span class="text-caption font-weight-medium" :class="getResponseTimeClass(healthMonitor.metrics?.response_time_ms)">
|
||||
{{ healthMonitor.formattedResponseTime }}
|
||||
<v-icon
|
||||
:icon="getResponseTimeIcon(healthMonitor.metrics?.response_time_ms)"
|
||||
size="small"
|
||||
class="ml-1"
|
||||
:color="getResponseTimeColor(healthMonitor.metrics?.response_time_ms)"
|
||||
></v-icon>
|
||||
</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4">
|
||||
<v-card-title class="text-h6">
|
||||
<v-icon icon="mdi-update" class="mr-2"></v-icon>
|
||||
Last Updated
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
color="surface-variant"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-database" class="mr-2" color="blue-grey"></v-icon>
|
||||
Database Status
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h5 font-weight-bold text-grey">
|
||||
<v-card-text class="text-h2 font-weight-bold" :class="getDbConnectionClass(healthMonitor.metrics?.database_connections)">
|
||||
{{ healthMonitor.metrics?.database_connections || '0' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-connection" size="small" class="mr-1"></v-icon>
|
||||
Active connections
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon
|
||||
:icon="getDbStatusIcon(healthMonitor.metrics?.database_connections)"
|
||||
:color="getDbStatusColor(healthMonitor.metrics?.database_connections)"
|
||||
size="small"
|
||||
class="mr-1"
|
||||
></v-icon>
|
||||
<span class="text-caption" :class="getDbStatusTextClass(healthMonitor.metrics?.database_connections)">
|
||||
{{ getDbStatusText(healthMonitor.metrics?.database_connections) }}
|
||||
</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card
|
||||
class="pa-4"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
color="surface-variant"
|
||||
>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-update" class="mr-2" color="amber"></v-icon>
|
||||
Data Freshness
|
||||
</v-card-title>
|
||||
<v-card-text class="text-h2 font-weight-bold text-amber-darken-2">
|
||||
{{ healthMonitor.lastUpdated ? formatTime(healthMonitor.lastUpdated) : 'Never' }}
|
||||
</v-card-text>
|
||||
<v-card-subtitle>
|
||||
<v-card-subtitle class="text-caption">
|
||||
<v-icon icon="mdi-clock-outline" size="small" class="mr-1"></v-icon>
|
||||
Auto-refresh every 30s
|
||||
Last API sync
|
||||
</v-card-subtitle>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<span class="text-caption">Auto-refresh:</span>
|
||||
<v-chip size="x-small" color="info" variant="outlined">
|
||||
<v-icon icon="mdi-autorenew" size="x-small" class="mr-1"></v-icon>
|
||||
30s
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -552,6 +657,57 @@ const formatTime = (value: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Response time helper functions
|
||||
const getResponseTimeClass = (responseTime: number | undefined) => {
|
||||
if (!responseTime) return 'text-grey'
|
||||
if (responseTime < 100) return 'text-success'
|
||||
if (responseTime < 300) return 'text-warning'
|
||||
return 'text-error'
|
||||
}
|
||||
|
||||
const getResponseTimeIcon = (responseTime: number | undefined) => {
|
||||
if (!responseTime) return 'mdi-help-circle'
|
||||
if (responseTime < 100) return 'mdi-check'
|
||||
if (responseTime < 300) return 'mdi-alert'
|
||||
return 'mdi-alert-circle'
|
||||
}
|
||||
|
||||
const getResponseTimeColor = (responseTime: number | undefined) => {
|
||||
if (!responseTime) return 'grey'
|
||||
if (responseTime < 100) return 'success'
|
||||
if (responseTime < 300) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
// Database status helper functions
|
||||
const getDbStatusIcon = (connections: number | undefined) => {
|
||||
if (!connections) return 'mdi-database-off'
|
||||
if (connections > 40) return 'mdi-alert-circle'
|
||||
if (connections > 20) return 'mdi-alert'
|
||||
return 'mdi-check-circle'
|
||||
}
|
||||
|
||||
const getDbStatusColor = (connections: number | undefined) => {
|
||||
if (!connections) return 'grey'
|
||||
if (connections > 40) return 'error'
|
||||
if (connections > 20) return 'warning'
|
||||
return 'success'
|
||||
}
|
||||
|
||||
const getDbStatusTextClass = (connections: number | undefined) => {
|
||||
if (!connections) return 'text-grey'
|
||||
if (connections > 40) return 'text-error'
|
||||
if (connections > 20) return 'text-warning'
|
||||
return 'text-success'
|
||||
}
|
||||
|
||||
const getDbStatusText = (connections: number | undefined) => {
|
||||
if (!connections) return 'No data'
|
||||
if (connections > 40) return 'High load'
|
||||
if (connections > 20) return 'Moderate load'
|
||||
return 'Normal load'
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
console.log('Dashboard mounted for user:', userEmail.value)
|
||||
|
||||
Reference in New Issue
Block a user