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
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<div class="page-header">
|
||||
<h2>PC Details</h2>
|
||||
<h2>Computer Details</h2>
|
||||
<div class="header-actions">
|
||||
<router-link :to="`/pcs/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
|
||||
<router-link to="/pcs" class="btn btn-secondary">Back to List</router-link>
|
||||
@@ -10,39 +10,32 @@
|
||||
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else-if="pc">
|
||||
<template v-else-if="computer">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-image" v-if="pc.model?.imageurl">
|
||||
<img :src="pc.model.imageurl" :alt="pc.model?.modelnumber" />
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
<h1>{{ pc.machinenumber }}</h1>
|
||||
<span v-if="pc.alias" class="hero-alias">{{ pc.alias }}</span>
|
||||
<h1>{{ computer.assetnumber }}</h1>
|
||||
<span v-if="computer.computer?.hostname" class="hero-alias">{{ computer.computer.hostname }}</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span class="badge badge-lg badge-info">PC</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(pc.status?.status)">
|
||||
{{ pc.status?.status || 'Unknown' }}
|
||||
<span class="badge badge-lg badge-info">Computer</span>
|
||||
<span class="badge badge-lg" :class="getStatusClass(computer.status_name)">
|
||||
{{ computer.status_name || 'Unknown' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-detail" v-if="pc.pctype">
|
||||
<span class="hero-detail-label">PC Type</span>
|
||||
<span class="hero-detail-value">{{ pc.pctype.pctype || pc.pctype }}</span>
|
||||
<div class="hero-detail" v-if="computer.computer?.computertype_name">
|
||||
<span class="hero-detail-label">Type</span>
|
||||
<span class="hero-detail-value">{{ computer.computer.computertype_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="pc.vendor?.vendor">
|
||||
<span class="hero-detail-label">Vendor</span>
|
||||
<span class="hero-detail-value">{{ pc.vendor.vendor }}</span>
|
||||
<div class="hero-detail" v-if="computer.computer?.os_name">
|
||||
<span class="hero-detail-label">OS</span>
|
||||
<span class="hero-detail-value">{{ computer.computer.os_name }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="pc.model?.modelnumber">
|
||||
<span class="hero-detail-label">Model</span>
|
||||
<span class="hero-detail-value">{{ pc.model.modelnumber }}</span>
|
||||
</div>
|
||||
<div class="hero-detail" v-if="ipAddress">
|
||||
<span class="hero-detail-label">IP Address</span>
|
||||
<span class="hero-detail-value mono">{{ ipAddress }}</span>
|
||||
<div class="hero-detail" v-if="computer.location_name">
|
||||
<span class="hero-detail-label">Location</span>
|
||||
<span class="hero-detail-value">{{ computer.location_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,20 +50,20 @@
|
||||
<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">{{ pc.machinenumber }}</span>
|
||||
<span class="info-label">Asset Number</span>
|
||||
<span class="info-value">{{ computer.assetnumber }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.alias">
|
||||
<span class="info-label">Alias</span>
|
||||
<span class="info-value">{{ pc.alias }}</span>
|
||||
<div class="info-row" v-if="computer.name">
|
||||
<span class="info-label">Name</span>
|
||||
<span class="info-value">{{ computer.name }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.hostname">
|
||||
<div class="info-row" v-if="computer.computer?.hostname">
|
||||
<span class="info-label">Hostname</span>
|
||||
<span class="info-value mono">{{ pc.hostname }}</span>
|
||||
<span class="info-value mono">{{ computer.computer.hostname }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.serialnumber">
|
||||
<div class="info-row" v-if="computer.serialnumber">
|
||||
<span class="info-label">Serial Number</span>
|
||||
<span class="info-value mono">{{ pc.serialnumber }}</span>
|
||||
<span class="info-value mono">{{ computer.serialnumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,21 +72,13 @@
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Hardware</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="pc.pctype">
|
||||
<span class="info-label">PC Type</span>
|
||||
<span class="info-value">{{ pc.pctype.pctype || pc.pctype }}</span>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Computer Type</span>
|
||||
<span class="info-value">{{ computer.computer?.computertype_name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Vendor</span>
|
||||
<span class="info-value">{{ pc.vendor?.vendor || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Model</span>
|
||||
<span class="info-value">{{ pc.model?.modelnumber || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="pc.operatingsystem">
|
||||
<span class="info-label">Operating System</span>
|
||||
<span class="info-value">{{ pc.operatingsystem.osname }}</span>
|
||||
<span class="info-value">{{ computer.computer?.os_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,18 +87,26 @@
|
||||
<div class="section-card">
|
||||
<h3 class="section-title">Status</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row" v-if="pc.loggedinuser">
|
||||
<div class="info-row" v-if="computer.computer?.loggedinuser">
|
||||
<span class="info-label">Logged In User</span>
|
||||
<span class="info-value">{{ pc.loggedinuser }}</span>
|
||||
<span class="info-value">{{ computer.computer.loggedinuser }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Features</span>
|
||||
<span class="info-value">
|
||||
<span class="feature-tag" :class="{ active: pc.isvnc }">VNC</span>
|
||||
<span class="feature-tag" :class="{ active: pc.iswinrm }">WinRM</span>
|
||||
<span class="feature-tag" :class="{ active: pc.isshopfloor }">Shopfloor</span>
|
||||
<span class="feature-tag" :class="{ active: computer.computer?.isvnc }">VNC</span>
|
||||
<span class="feature-tag" :class="{ active: computer.computer?.iswinrm }">WinRM</span>
|
||||
<span class="feature-tag" :class="{ active: computer.computer?.isshopfloor }">Shopfloor</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="computer.computer?.lastreporteddate">
|
||||
<span class="info-label">Last Reported</span>
|
||||
<span class="info-value">{{ formatDate(computer.computer.lastreporteddate) }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="computer.computer?.lastboottime">
|
||||
<span class="info-label">Last Boot</span>
|
||||
<span class="info-value">{{ formatDate(computer.computer.lastboottime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,36 +121,40 @@
|
||||
<span class="info-label">Location</span>
|
||||
<span class="info-value">
|
||||
<LocationMapTooltip
|
||||
v-if="pc.mapleft != null && pc.maptop != null"
|
||||
:left="pc.mapleft"
|
||||
:top="pc.maptop"
|
||||
:machineName="pc.machinenumber"
|
||||
v-if="computer.mapleft != null && computer.maptop != null"
|
||||
:left="computer.mapleft"
|
||||
:top="computer.maptop"
|
||||
:machineName="computer.assetnumber"
|
||||
>
|
||||
<span class="location-link">{{ pc.location?.location || 'On Map' }}</span>
|
||||
<span class="location-link">{{ computer.location_name || 'On Map' }}</span>
|
||||
</LocationMapTooltip>
|
||||
<span v-else>{{ pc.location?.location || '-' }}</span>
|
||||
<span v-else>{{ computer.location_name || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Business Unit</span>
|
||||
<span class="info-value">{{ computer.businessunit_name || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controlled Equipment -->
|
||||
<div class="section-card" v-if="controlledMachines.length > 0">
|
||||
<div class="section-card" v-if="controlledEquipment.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)"
|
||||
v-for="item in controlledEquipment"
|
||||
:key="item.relationshipid"
|
||||
:to="`/machines/${item.plugin_id || item.assetid}`"
|
||||
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>
|
||||
<span class="equipment-name">{{ item.assetnumber }}</span>
|
||||
<span class="equipment-alias" v-if="item.name">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="equipment-meta">
|
||||
<span class="category-tag">{{ rel.relatedcategory }}</span>
|
||||
<span class="connection-tag">{{ rel.relationshiptype }}</span>
|
||||
<span class="category-tag">{{ item.assettype_name }}</span>
|
||||
<span class="connection-tag">{{ item.relationshipType }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
@@ -184,43 +181,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network -->
|
||||
<div class="section-card" v-if="pc.communications?.length">
|
||||
<h3 class="section-title">Network Interfaces</h3>
|
||||
<div class="network-list">
|
||||
<div v-for="comm in pc.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 class="network-details" v-if="comm.subnetmask || comm.defaultgateway">
|
||||
<span v-if="comm.subnetmask">Subnet: {{ comm.subnetmask }}</span>
|
||||
<span v-if="comm.defaultgateway">Gateway: {{ comm.defaultgateway }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="section-card" v-if="pc.notes">
|
||||
<div class="section-card" v-if="computer.notes">
|
||||
<h3 class="section-title">Notes</h3>
|
||||
<p class="notes-text">{{ pc.notes }}</p>
|
||||
<p class="notes-text">{{ computer.notes }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Footer -->
|
||||
<div class="audit-footer">
|
||||
<span>Created {{ formatDate(pc.createddate) }}<template v-if="pc.createdby"> by {{ pc.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(pc.modifieddate) }}<template v-if="pc.modifiedby"> by {{ pc.modifiedby }}</template></span>
|
||||
<span>Created {{ formatDate(computer.createddate) }}<template v-if="computer.createdby"> by {{ computer.createdby }}</template></span>
|
||||
<span>Modified {{ formatDate(computer.modifieddate) }}<template v-if="computer.modifiedby"> by {{ computer.modifiedby }}</template></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="card">
|
||||
<p style="text-align: center; color: var(--text-light);">PC not found</p>
|
||||
<p style="text-align: center; color: var(--text-light);">Computer not found</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -228,60 +205,74 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { machinesApi, applicationsApi } from '../../api'
|
||||
import { computersApi, applicationsApi, assetsApi } from '../../api'
|
||||
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true)
|
||||
const pc = ref(null)
|
||||
const relationships = ref([])
|
||||
const computer = ref(null)
|
||||
const relationships = ref({ incoming: [], outgoing: [] })
|
||||
const installedApps = ref([])
|
||||
|
||||
const ipAddress = computed(() => {
|
||||
if (!pc.value?.communications) return null
|
||||
const primaryComm = pc.value.communications.find(c => c.isprimary) || pc.value.communications[0]
|
||||
return primaryComm?.ipaddress || primaryComm?.address || null
|
||||
})
|
||||
const controlledEquipment = computed(() => {
|
||||
// For computers, find related equipment in any "Controls" relationship
|
||||
const items = []
|
||||
|
||||
const controlledMachines = computed(() => {
|
||||
return relationships.value.filter(r => r.direction === 'controls')
|
||||
// Check outgoing - computer controls equipment
|
||||
for (const rel of relationships.value.outgoing || []) {
|
||||
if (rel.target_asset?.assettype_name === 'equipment' && rel.relationship_type_name === 'Controls') {
|
||||
items.push({
|
||||
...rel.target_asset,
|
||||
relationshipid: rel.relationshipid,
|
||||
relationshipType: rel.relationship_type_name
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Also check incoming - legacy data may have equipment -> computer Controls relationships
|
||||
for (const rel of relationships.value.incoming || []) {
|
||||
if (rel.source_asset?.assettype_name === 'equipment' && rel.relationship_type_name === 'Controls') {
|
||||
items.push({
|
||||
...rel.source_asset,
|
||||
relationshipid: rel.relationshipid,
|
||||
relationshipType: rel.relationship_type_name
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await machinesApi.get(route.params.id)
|
||||
pc.value = response.data.data
|
||||
const response = await computersApi.get(route.params.id)
|
||||
computer.value = response.data.data
|
||||
|
||||
const relResponse = await machinesApi.getRelationships(route.params.id)
|
||||
relationships.value = relResponse.data.data || []
|
||||
// Load relationships using asset ID
|
||||
if (computer.value?.assetid) {
|
||||
try {
|
||||
const relResponse = await assetsApi.getRelationships(computer.value.assetid)
|
||||
relationships.value = relResponse.data.data || { incoming: [], outgoing: [] }
|
||||
} catch (e) {
|
||||
console.log('Relationships not available')
|
||||
}
|
||||
}
|
||||
|
||||
// Load installed applications
|
||||
try {
|
||||
const appsResponse = await applicationsApi.getMachineApps(route.params.id)
|
||||
installedApps.value = appsResponse.data.data || []
|
||||
} catch (appError) {
|
||||
// Silently handle if no apps table yet
|
||||
console.log('No installed apps data:', appError.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading PC:', error)
|
||||
console.error('Error loading computer:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
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}`
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (!status) return 'badge-info'
|
||||
const s = status.toLowerCase()
|
||||
|
||||
Reference in New Issue
Block a user