Migrate frontend to plugin-based asset architecture
- Add equipmentApi and computersApi to replace legacy machinesApi - Add controller vendor/model fields to Equipment model and forms - Fix map marker navigation to use plugin-specific IDs (equipmentid, computerid, printerid, networkdeviceid) instead of assetid - Fix search to use unified Asset table with correct plugin IDs - Remove legacy printer search that used non-existent field names - Enable optional JWT auth for detail endpoints (public read access) - Clean up USB plugin models (remove unused checkout model) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
@@ -3,7 +3,7 @@
|
||||
<div class="page-header">
|
||||
<h2>Equipment Details</h2>
|
||||
<div class="header-actions">
|
||||
<router-link :to="`/machines/${machine?.machineid}/edit`" class="btn btn-primary" v-if="machine">
|
||||
<router-link :to="`/machines/${equipment?.equipment?.equipmentid}/edit`" class="btn btn-primary" v-if="equipment">
|
||||
Edit
|
||||
</router-link>
|
||||
<router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
|
||||
@@ -12,41 +12,38 @@
|
||||
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else-if="machine">
|
||||
<template v-else-if="equipment">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-image" v-if="machine.model?.imageurl">
|
||||
<img :src="machine.model.imageurl" :alt="machine.model?.modelnumber" />
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
<h1>{{ machine.machinenumber }}</h1>
|
||||
<span v-if="machine.alias" class="hero-alias">{{ machine.alias }}</span>
|
||||
<h1>{{ equipment.assetnumber }}</h1>
|
||||
<span v-if="equipment.name" class="hero-alias">{{ equipment.name }}</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span class="badge badge-lg" :class="getCategoryClass(machine.machinetype?.category)">
|
||||
{{ machine.machinetype?.category || 'Unknown' }}
|
||||
<span class="badge badge-lg badge-primary">
|
||||
{{ equipment.assettype_name || 'Equipment' }}
|
||||
</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(machine.status?.status)">
|
||||
{{ machine.status?.status || 'Unknown' }}
|
||||
<span class="badge badge-lg" :class="getStatusClass(equipment.status_name)">
|
||||
{{ equipment.status_name || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-detail" v-if="machine.machinetype?.machinetype">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.equipmenttype_name">
|
||||
<span class="hero-detail-label">Type</span>
|
||||
<span class="hero-detail-value">{{ machine.machinetype.machinetype }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.equipmenttype_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.vendor?.vendor">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.vendor_name">
|
||||
<span class="hero-detail-label">Vendor</span>
|
||||
<span class="hero-detail-value">{{ machine.vendor.vendor }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.vendor_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.model?.modelnumber">
|
||||
<div class="hero-detail" v-if="equipment.equipment?.model_name">
|
||||
<span class="hero-detail-label">Model</span>
|
||||
<span class="hero-detail-value">{{ machine.model.modelnumber }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.equipment.model_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="machine.location?.location">
|
||||
<div class="hero-detail" v-if="equipment.location_name">
|
||||
<span class="hero-detail-label">Location</span>
|
||||
<span class="hero-detail-value">{{ machine.location.location }}</span>
|
||||
<span class="hero-detail-value">{{ equipment.location_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,20 +58,16 @@
|
||||
<h3 class="section-title">Identity</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Machine Number</span>
|
||||
<span class="info-value">{{ machine.machinenumber }}</span>
|
||||
<span class="info-label">Asset Number</span>
|
||||
<span class="info-value">{{ equipment.assetnumber }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.alias">
|
||||
<span class="info-label">Alias</span>
|
||||
<span class="info-value">{{ machine.alias }}</span>
|
||||
<div class="info-row" v-if="equipment.name">
|
||||
<span class="info-label">Name</span>
|
||||
<span class="info-value">{{ equipment.name }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.hostname">
|
||||
<span class="info-label">Hostname</span>
|
||||
<span class="info-value mono">{{ machine.hostname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.serialnumber">
|
||||
<div class="info-row" v-if="equipment.serialnumber">
|
||||
<span class="info-label">Serial Number</span>
|
||||
<span class="info-value mono">{{ machine.serialnumber }}</span>
|
||||
<span class="info-value mono">{{ equipment.serialnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,47 +78,73 @@
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Type</span>
|
||||
<span class="info-value">{{ machine.machinetype?.machinetype || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.equipmenttype_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ machine.vendor?.vendor || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.vendor_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ machine.model?.modelnumber || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="machine.operatingsystem">
|
||||
<span class="info-label">Operating System</span>
|
||||
<span class="info-value">{{ machine.operatingsystem.osname }}</span>
|
||||
<span class="info-value">{{ equipment.equipment?.model_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PC Information (if PC) -->
|
||||
<div class="section-card" v-if="isPc">
|
||||
<h3 class="section-title">PC Status</h3>
|
||||
<!-- Controller Section (for CNC machines) -->
|
||||
<div class="section-card" v-if="equipment.equipment?.controller_vendor_name || equipment.equipment?.controller_model_name">
|
||||
<h3 class="section-title">Controller</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="machine.loggedinuser">
|
||||
<span class="info-label">Logged In User</span>
|
||||
<span class="info-value">{{ machine.loggedinuser }}</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ equipment.equipment?.controller_vendor_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Reported</span>
|
||||
<span class="info-value">{{ formatDate(machine.lastreporteddate) }}</span>
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ equipment.equipment?.controller_model_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equipment Configuration -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Configuration</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Boot</span>
|
||||
<span class="info-value">{{ formatDate(machine.lastboottime) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Features</span>
|
||||
<span class="info-label">Requires Manual Config</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: machine.isvnc }">VNC</span>
|
||||
<span class="feature-tag" :class="{ active: machine.iswinrm }">WinRM</span>
|
||||
<span class="feature-tag" :class="{ active: machine.isshopfloor }">Shopfloor</span>
|
||||
<span class="feature-tag" :class="{ active: equipment.equipment?.requiresmanualconfig }">
|
||||
{{ equipment.equipment?.requiresmanualconfig ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Location Only</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: equipment.equipment?.islocationonly }">
|
||||
{{ equipment.equipment?.islocationonly ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Maintenance Section -->
|
||||
<div class="section-card" v-if="equipment.equipment?.lastmaintenancedate || equipment.equipment?.nextmaintenancedate">
|
||||
<h3 class="section-title">Maintenance</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="equipment.equipment?.lastmaintenancedate">
|
||||
<span class="info-label">Last Maintenance</span>
|
||||
<span class="info-value">{{ formatDate(equipment.equipment.lastmaintenancedate) }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="equipment.equipment?.nextmaintenancedate">
|
||||
<span class="info-label">Next Maintenance</span>
|
||||
<span class="info-value">{{ formatDate(equipment.equipment.nextmaintenancedate) }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="equipment.equipment?.maintenanceintervaldays">
|
||||
<span class="info-label">Interval</span>
|
||||
<span class="info-value">{{ equipment.equipment.maintenanceintervaldays }} days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,31 +159,31 @@
|
||||
<span class="info-label">Location</span>
|
||||
<span class="info-value">
|
||||
<LocationMapTooltip
|
||||
v-if="machine.mapleft != null && machine.maptop != null"
|
||||
:left="machine.mapleft"
|
||||
:top="machine.maptop"
|
||||
:machineName="machine.machinenumber"
|
||||
v-if="equipment.mapleft != null && equipment.maptop != null"
|
||||
:left="equipment.mapleft"
|
||||
:top="equipment.maptop"
|
||||
:machineName="equipment.assetnumber"
|
||||
>
|
||||
<span class="location-link">{{ machine.location?.location || 'On Map' }}</span>
|
||||
<span class="location-link">{{ equipment.location_name || 'On Map' }}</span>
|
||||
</LocationMapTooltip>
|
||||
<span v-else>{{ machine.location?.location || '-' }}</span>
|
||||
<span v-else>{{ equipment.location_name || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Business Unit</span>
|
||||
<span class="info-value">{{ machine.businessunit?.businessunit || '-' }}</span>
|
||||
<span class="info-value">{{ equipment.businessunit_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connected PC (for Equipment) -->
|
||||
<div class="section-card" v-if="isEquipment">
|
||||
<!-- Connected PC -->
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Connected PC</h3>
|
||||
<div v-if="!controllingPc" class="empty-message">
|
||||
No controlling PC assigned
|
||||
</div>
|
||||
<div v-else class="connected-device">
|
||||
<router-link :to="getRelatedRoute(controllingPc)" class="device-link">
|
||||
<router-link :to="`/pcs/${controllingPc.plugin_id || controllingPc.assetid}`" class="device-link">
|
||||
<div class="device-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||
@@ -173,66 +192,31 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<span class="device-name">{{ controllingPc.relatedmachinenumber }}</span>
|
||||
<span class="device-alias" v-if="controllingPc.relatedmachinealias">{{ controllingPc.relatedmachinealias }}</span>
|
||||
<span class="device-name">{{ controllingPc.assetnumber }}</span>
|
||||
<span class="device-alias" v-if="controllingPc.name">{{ controllingPc.name }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<span class="connection-type">{{ controllingPc.relationshiptype }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controlled Equipment (for PCs) -->
|
||||
<div class="section-card" v-if="isPc && controlledMachines.length > 0">
|
||||
<h3 class="section-title">Controlled Equipment</h3>
|
||||
<div class="equipment-list">
|
||||
<router-link
|
||||
v-for="rel in controlledMachines"
|
||||
:key="rel.relationshipid"
|
||||
:to="getRelatedRoute(rel)"
|
||||
class="equipment-item"
|
||||
>
|
||||
<div class="equipment-info">
|
||||
<span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
|
||||
<span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
|
||||
</div>
|
||||
<span class="connection-tag">{{ rel.relationshiptype }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network -->
|
||||
<div class="section-card" v-if="machine.communications?.length">
|
||||
<h3 class="section-title">Network</h3>
|
||||
<div class="network-list">
|
||||
<div v-for="comm in machine.communications" :key="comm.communicationid" class="network-item">
|
||||
<div class="network-primary">
|
||||
<span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
|
||||
<span v-if="comm.isprimary" class="primary-badge">Primary</span>
|
||||
</div>
|
||||
<div class="network-secondary" v-if="comm.macaddress">
|
||||
<span class="mac-address">{{ comm.macaddress }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="connection-type">{{ controllingPc.relationshipType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="section-card" v-if="machine.notes">
|
||||
<div class="section-card" v-if="equipment.notes">
|
||||
<h3 class="section-title">Notes</h3>
|
||||
<p class="notes-text">{{ machine.notes }}</p>
|
||||
<p class="notes-text">{{ equipment.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Footer -->
|
||||
<div class="audit-footer">
|
||||
<span>Created {{ formatDate(machine.createddate) }}<template v-if="machine.createdby"> by {{ machine.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(machine.modifieddate) }}<template v-if="machine.modifiedby"> by {{ machine.modifiedby }}</template></span>
|
||||
<span>Created {{ formatDate(equipment.createddate) }}<template v-if="equipment.createdby"> by {{ equipment.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(equipment.modifieddate) }}<template v-if="equipment.modifiedby"> by {{ equipment.modifiedby }}</template></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="card">
|
||||
<p style="text-align: center; color: var(--text-light);">Machine not found</p>
|
||||
<p style="text-align: center; color: var(--text-light);">Equipment not found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -240,55 +224,63 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { machinesApi } from '../../api'
|
||||
import { equipmentApi, assetsApi } from '../../api'
|
||||
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const machine = ref(null)
|
||||
const relationships = ref([])
|
||||
|
||||
const isPc = computed(() => {
|
||||
return machine.value?.machinetype?.category === 'PC'
|
||||
})
|
||||
|
||||
const isEquipment = computed(() => {
|
||||
return machine.value?.machinetype?.category === 'Equipment'
|
||||
})
|
||||
const equipment = ref(null)
|
||||
const relationships = ref({ incoming: [], outgoing: [] })
|
||||
|
||||
const controllingPc = computed(() => {
|
||||
return relationships.value.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
|
||||
})
|
||||
// For equipment, find a related computer in any "Controls" relationship
|
||||
// Check both incoming (computer controls this) and outgoing (legacy data may have equipment -> computer)
|
||||
|
||||
const controlledMachines = computed(() => {
|
||||
return relationships.value.filter(r => r.direction === 'controls')
|
||||
// First check incoming - computer as source controlling this equipment
|
||||
for (const rel of relationships.value.incoming || []) {
|
||||
if (rel.source_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
|
||||
return {
|
||||
...rel.source_asset,
|
||||
relationshipType: rel.relationship_type_name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Also check outgoing - legacy data may have equipment -> computer Controls relationships
|
||||
for (const rel of relationships.value.outgoing || []) {
|
||||
if (rel.target_asset?.assettype_name === 'computer' && rel.relationship_type_name === 'Controls') {
|
||||
return {
|
||||
...rel.target_asset,
|
||||
relationshipType: rel.relationship_type_name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await machinesApi.get(route.params.id)
|
||||
machine.value = response.data.data
|
||||
const response = await equipmentApi.get(route.params.id)
|
||||
equipment.value = response.data.data
|
||||
|
||||
const relResponse = await machinesApi.getRelationships(route.params.id)
|
||||
relationships.value = relResponse.data.data || []
|
||||
// Load relationships using asset ID
|
||||
if (equipment.value?.assetid) {
|
||||
try {
|
||||
const relResponse = await assetsApi.getRelationships(equipment.value.assetid)
|
||||
relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
|
||||
} catch (e) {
|
||||
console.log('Relationships not available')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading machine:', error)
|
||||
console.error('Error loading equipment:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function getCategoryClass(category) {
|
||||
if (!category) return 'badge-info'
|
||||
const c = category.toLowerCase()
|
||||
if (c === 'equipment') return 'badge-primary'
|
||||
if (c === 'pc') return 'badge-info'
|
||||
if (c === 'network') return 'badge-warning'
|
||||
if (c === 'printer') return 'badge-secondary'
|
||||
return 'badge-info'
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (!status) return 'badge-info'
|
||||
const s = status.toLowerCase()
|
||||
@@ -302,17 +294,31 @@ function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleString()
|
||||
}
|
||||
|
||||
function getRelatedRoute(rel) {
|
||||
const category = rel.relatedcategory?.toLowerCase() || ''
|
||||
const routeMap = {
|
||||
'equipment': '/machines',
|
||||
'pc': '/pcs',
|
||||
'printer': '/printers'
|
||||
}
|
||||
const basePath = routeMap[category] || '/machines'
|
||||
return `${basePath}/${rel.relatedmachineid}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Uses global detail page styles from style.css -->
|
||||
<style scoped>
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.feature-tag.active {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.feature-tag.active {
|
||||
background: #1e3a5f;
|
||||
color: #60a5fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user