Cam Proudlock
8666e0271c
The machine page now shows the PC that controls it. The endpoint was correct all along and returned both directions; AssetTriageBand discarded every peer whose type was not 'machine' and was mounted only on the PC page. The counterpart type, label and relationship types are now props. Fixed while adopting it more widely: every band chip linked to /assets/<id>, and there is no such route. The resolver that AssetRelationships.vue kept privately is now frontend/src/utils/assetRoute.js, used by both - and its type lookup is case-insensitive, because seed data capitalises the type names while this site's database does not. The legacy import is now safe to resume. The 409-resolve asked for per_page=10000 against a server that clamps to 100, so it silently searched the first 100 rows and dropped links past that on every re-run. The crosswalk is now bound to the database it describes, so one carried across a rebuild is refused rather than attaching rows to the wrong assets. Source database names are resolved from the environment, so the loader can be aimed without editing it. Full suite 2178 passed, frontend 280 passed.
424 lines
16 KiB
Vue
424 lines
16 KiB
Vue
<template>
|
|
<div class="detail-page" v-if="device">
|
|
<!--
|
|
The same page-header + header-actions block every other asset detail page
|
|
uses. This page had no header at all: Edit was tucked inside the hero
|
|
title row and there was no Print Label, no Retire and no way back to the
|
|
list, so managing a network device meant looking somewhere different from
|
|
every other asset type.
|
|
-->
|
|
<div class="page-header">
|
|
<h2>Network Device Details</h2>
|
|
<div class="header-actions">
|
|
<router-link :to="`/print/asset-label/network_device/${deviceId}`"
|
|
class="btn btn-secondary" target="_blank">Print Label</router-link>
|
|
<router-link v-if="authStore.isAuthenticated" :to="`/network/${deviceId}/edit`"
|
|
class="btn btn-primary">Edit</router-link>
|
|
<button v-if="authStore.isAuthenticated" @click="confirmRetire"
|
|
class="btn btn-danger">Retire</button>
|
|
<router-link to="/network" class="btn btn-secondary">Back to List</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-card">
|
|
<div class="hero-image">
|
|
<img v-if="device.networkdevice?.imageurl" :src="withBase(device.networkdevice.imageurl)" alt="Model photo" />
|
|
<div class="device-icon" v-else>
|
|
<span class="icon"><component :is="getDeviceIcon()" :size="24" /></span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-title-row">
|
|
<h1 class="hero-title">{{ device.networkdevice?.hostname || device.name || device.assetnumber }}</h1>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span class="badge" :style="colorStyle(device.statuscolor)">
|
|
{{ device.statusname || 'Unknown' }}
|
|
</span>
|
|
<span v-if="device.networkdevice?.networkdevicetypename" class="meta-item">
|
|
{{ device.networkdevice.networkdevicetypename }}
|
|
</span>
|
|
<span v-if="device.networkdevice?.vendorname" class="meta-item">
|
|
{{ device.networkdevice.vendorname }}
|
|
</span>
|
|
<span v-if="heroWarranty" class="badge" :style="{ background: heroWarranty.statuscolor, color: '#fff' }"
|
|
:title="heroWarranty.enddate ? `Warranty ends ${warrantyDate(heroWarranty.enddate)}` : 'Warranty'">
|
|
{{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
|
|
</span>
|
|
</div>
|
|
<!-- hero-detail / -label / -value are the styled classes every other
|
|
detail page uses. This page had its own detail-item / label / value
|
|
names, which match nothing in the stylesheet, so the label and the
|
|
value rendered as one run-together string. -->
|
|
<div class="hero-details">
|
|
<div class="hero-detail" v-if="device.assetnumber">
|
|
<span class="hero-detail-label">Asset #</span>
|
|
<span class="hero-detail-value">{{ device.assetnumber }}</span>
|
|
</div>
|
|
<div class="hero-detail" v-if="device.serialnumber">
|
|
<span class="hero-detail-label">Serial</span>
|
|
<span class="hero-detail-value mono">{{ device.serialnumber }}</span>
|
|
</div>
|
|
<div class="hero-detail" v-if="device.locationname">
|
|
<span class="hero-detail-label">Location</span>
|
|
<span class="hero-detail-value">{{ device.locationname }}</span>
|
|
</div>
|
|
<div class="hero-detail" v-if="device.businessunitname">
|
|
<span class="hero-detail-label">Business Unit</span>
|
|
<span class="hero-detail-value">{{ device.businessunitname }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The 6am band: what stops if this switch or AP goes down. A network
|
|
device is rarely interesting in itself; it matters because of what
|
|
sits behind it. -->
|
|
<AssetTriageBand
|
|
:assetid="device.assetid"
|
|
counterparttype="machine"
|
|
/>
|
|
<div class="hero-features" v-if="device.networkdevice">
|
|
<span v-if="device.networkdevice.ispoe" class="feature-badge poe">PoE</span>
|
|
<span v-if="device.networkdevice.ismanaged" class="feature-badge managed">Managed</span>
|
|
<span v-if="device.networkdevice.portcount" class="feature-badge ports">{{ device.networkdevice.portcount }} Ports</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Canonical card order: Identity -> type-specific -> status -> Location & Organization -> domain -> Custom Fields -> Warranty -> Relationships -> Notes -> audit footer -->
|
|
<div class="content-grid">
|
|
<div class="content-column">
|
|
<!-- Identity -->
|
|
<div class="section-card">
|
|
<h3 class="section-title">Identity</h3>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">Asset Number</span>
|
|
<span class="info-value">{{ device.assetnumber }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Name</span>
|
|
<span class="info-value">{{ device.name || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Serial Number</span>
|
|
<span class="info-value mono">{{ device.serialnumber || '-' }}</span>
|
|
</div>
|
|
<div class="info-row" v-if="isEnabled('gaugelabreference', 'network_device') && device.gaugelabreference">
|
|
<span class="info-label">Gauge Lab Reference</span>
|
|
<span class="info-value mono">{{ device.gaugelabreference }}</span>
|
|
</div>
|
|
<div class="info-row" v-if="isEnabled('maintenancereference', 'network_device') && device.maintenancereference">
|
|
<span class="info-label">Maintenance Reference</span>
|
|
<span class="info-value mono">{{ device.maintenancereference }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Vendor</span>
|
|
<span class="info-value">
|
|
{{ device.networkdevice?.vendorname || '-' }}
|
|
<!-- Inherited from the catalog model, not stored on this record. -->
|
|
<small v-if="device.networkdevice?.vendorfrommodel" class="text-muted">(from model)</small>
|
|
</span>
|
|
</div>
|
|
<div class="info-row" v-if="device.networkdevice?.modelname">
|
|
<span class="info-label">Model</span>
|
|
<span class="info-value">{{ device.networkdevice.modelname }}</span>
|
|
</div>
|
|
<!-- Only when it DIFFERS from the device's own type: the two are
|
|
separate tables but carry the same names in practice. -->
|
|
<div class="info-row"
|
|
v-if="device.networkdevice?.modeltypename && device.networkdevice.modeltypename !== device.networkdevice?.networkdevicetypename">
|
|
<span class="info-label">Model type</span>
|
|
<span class="info-value">{{ device.networkdevice.modeltypename }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Device Type</span>
|
|
<span class="info-value">{{ device.networkdevice?.networkdevicetypename || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Information (type-specific) -->
|
|
<div class="section-card">
|
|
<h3 class="section-title">Network Information</h3>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">Hostname</span>
|
|
<span class="info-value mono">{{ device.networkdevice?.hostname || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Firmware Version</span>
|
|
<span class="info-value">{{ device.networkdevice?.firmwareversion || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Port Count</span>
|
|
<span class="info-value">{{ device.networkdevice?.portcount || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Rack Unit</span>
|
|
<span class="info-value">{{ device.networkdevice?.rackunit || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">PoE Capable</span>
|
|
<span class="info-value">{{ device.networkdevice?.ispoe ? 'Yes' : 'No' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Managed Device</span>
|
|
<span class="info-value">{{ device.networkdevice?.ismanaged ? 'Yes' : 'No' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-column">
|
|
<!-- Location & Organization -->
|
|
<div class="section-card">
|
|
<h3 class="section-title">Location & Organization</h3>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">Location</span>
|
|
<span class="info-value">{{ device.locationname || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Business Unit</span>
|
|
<span class="info-value">{{ device.businessunitname || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Fields -->
|
|
<CustomFieldsSection :assetid="device.assetid" />
|
|
|
|
<!-- Warranty -->
|
|
<PluginAssetPanels :assetid="device.assetid" />
|
|
|
|
<!-- Relationships -->
|
|
<AssetRelationships
|
|
v-if="device.assetid"
|
|
:assetid="device.assetid"
|
|
/>
|
|
|
|
<!-- Notes -->
|
|
<div class="section-card" v-if="device.notes">
|
|
<h3 class="section-title">Notes</h3>
|
|
<div class="notes-content">{{ device.notes }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The manage actions live in the page header, where every other asset
|
|
detail page puts them. They used to sit down here instead, which is
|
|
why finding them on a network device meant looking somewhere else. -->
|
|
|
|
<!-- Audit Footer -->
|
|
<div class="audit-footer">
|
|
<span>Created {{ formatDate(device.createddate) }}<template v-if="device.createdby"> by {{ device.createdby }}</template></span>
|
|
<span>Modified {{ formatDate(device.modifieddate) }}<template v-if="device.modifiedby"> by {{ device.modifiedby }}</template></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="loading" class="loading-container">
|
|
<div class="loading">Loading device...</div>
|
|
</div>
|
|
|
|
<div v-else class="error-container">
|
|
<p>Device not found</p>
|
|
<router-link to="/network" class="btn btn-secondary">Back to Network Devices</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { colorStyle } from "@/utils/colorStyle"
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { Network, Router, Shield, Wifi, Camera, Server, Server as Rack, Globe } from 'lucide-vue-next'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { networkApi } from '@/api'
|
|
import { withBase } from '@/utils/basePath'
|
|
import AssetRelationships from '@/components/AssetRelationships.vue'
|
|
import AssetTriageBand from '@/components/AssetTriageBand.vue'
|
|
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
|
|
import PluginAssetPanels from '@/components/PluginAssetPanels.vue'
|
|
import { useWarrantyBadge } from '@/composables/warrantyBadge'
|
|
import { useIdentifierFlags } from '@/composables/identifierSettings'
|
|
import { useToast } from '@/composables/toast'
|
|
import { apiError } from '@/utils/apiError'
|
|
import { setRecordTitle } from '@/composables/pageTitle'
|
|
const toast = useToast()
|
|
|
|
const { isEnabled } = useIdentifierFlags()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const deviceId = route.params.id
|
|
const device = ref(null)
|
|
const { heroWarranty, warrantyDate } = useWarrantyBadge(() => device.value?.assetid)
|
|
const loading = ref(true)
|
|
|
|
onMounted(async () => {
|
|
await loadDevice()
|
|
})
|
|
|
|
async function loadDevice() {
|
|
loading.value = true
|
|
try {
|
|
const response = await networkApi.get(deviceId)
|
|
device.value = response.data.data
|
|
setRecordTitle(device.value?.assetnumber || device.value?.name)
|
|
} catch (error) {
|
|
console.error('Error loading device:', error)
|
|
device.value = null
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function getDeviceIcon() {
|
|
const type = device.value?.networkdevice?.networkdevicetypename?.toLowerCase() || ''
|
|
if (type.includes('switch')) return Network
|
|
if (type.includes('router')) return Router
|
|
if (type.includes('firewall')) return Shield
|
|
if (type.includes('access point') || type.includes('ap')) return Wifi
|
|
if (type.includes('camera')) return Camera
|
|
if (type.includes('server')) return Server
|
|
if (type.includes('idf') || type.includes('closet')) return Rack
|
|
return Globe
|
|
}
|
|
|
|
function getStatusClass(status) {
|
|
if (!status) return 'badge-info'
|
|
const s = status.toLowerCase()
|
|
if (s === 'in use' || s === 'active') return 'badge-success'
|
|
if (s === 'in repair' || s === 'maintenance') return 'badge-warning'
|
|
if (s === 'retired' || s === 'decommissioned') return 'badge-danger'
|
|
return 'badge-info'
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '-'
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
// Soft delete, like every other asset type: the record leaves the lists while
|
|
// its history and relationships stay put, and it can be restored by setting
|
|
// isactive back. Called Retire rather than Delete for exactly that reason.
|
|
async function confirmRetire () {
|
|
const label = device.value?.networkdevice?.hostname
|
|
|| device.value?.name || device.value?.assetnumber || 'this device'
|
|
if (!confirm(`Retire ${label}?\n\nIt will no longer appear in ShopDB. `
|
|
+ `History and relationships are kept, and it can be restored.`)) return
|
|
try {
|
|
await networkApi.delete(deviceId)
|
|
toast.success(`Retired ${label}`)
|
|
router.push('/network')
|
|
} catch (error) {
|
|
console.error('Error retiring network device:', error)
|
|
toast.error(apiError(error, 'Failed to retire network device'))
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.hero-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.device-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.device-icon .icon {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.hero-features {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feature-badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.feature-badge.poe {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.feature-badge.managed {
|
|
background: #e3f2fd;
|
|
color: #1565c0;
|
|
}
|
|
|
|
.feature-badge.ports {
|
|
background: var(--bg);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.mono {
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
}
|
|
|
|
.notes-content {
|
|
white-space: pre-wrap;
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.loading-container,
|
|
.error-container {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.feature-badge.poe {
|
|
background: #1e3a29;
|
|
color: #4ade80;
|
|
}
|
|
|
|
.feature-badge.managed {
|
|
background: #1e3a5f;
|
|
color: #60a5fa;
|
|
}
|
|
}
|
|
</style>
|