50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div class="glass-card p-5">
|
||
|
|
<h3 class="text-sm font-medium text-white/80 mb-4">Container Matrix</h3>
|
||
|
|
|
||
|
|
<div v-if="!nodes.length" class="text-white/40 text-sm py-4 text-center">
|
||
|
|
No nodes to display.
|
||
|
|
</div>
|
||
|
|
<div v-else class="overflow-x-auto">
|
||
|
|
<table class="fleet-matrix-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="fleet-matrix-header-cell">App</th>
|
||
|
|
<th
|
||
|
|
v-for="node in sortedNodes"
|
||
|
|
:key="node.node_id"
|
||
|
|
class="fleet-matrix-header-cell font-mono"
|
||
|
|
>
|
||
|
|
{{ node.node_id.slice(0, 6) }}
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="app in allAppIds" :key="app">
|
||
|
|
<td class="fleet-matrix-cell text-white/70">{{ app }}</td>
|
||
|
|
<td
|
||
|
|
v-for="node in sortedNodes"
|
||
|
|
:key="node.node_id"
|
||
|
|
class="fleet-matrix-cell text-center"
|
||
|
|
>
|
||
|
|
<span v-if="getContainerState(node, app) === 'running'" class="text-green-400">✓</span>
|
||
|
|
<span v-else-if="getContainerState(node, app) === 'stopped'" class="text-red-400">✗</span>
|
||
|
|
<span v-else class="text-white/20">—</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { type FleetNode, getContainerState } from './useFleetData'
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
nodes: FleetNode[]
|
||
|
|
sortedNodes: FleetNode[]
|
||
|
|
allAppIds: string[]
|
||
|
|
}>()
|
||
|
|
</script>
|