Skip to content

Commit

Permalink
feat: show the extended hardware info
Browse files Browse the repository at this point in the history 
Display the extendend hardware information that was added via siderolabs/sidero#735 in the Theila UI

Signed-off-by: Gerard de Leeuw <[email protected]>
  • Loading branch information
@lion7
lion7 committed Mar 31, 2022
1 parent e10547b commit 5f7c114
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 11 deletions.
2 changes: 1 addition & 1 deletion frontend/src/api/resources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const kubernetes = {
node: "nodes.v1",
cluster: `clusters.${capiVersion}.cluster.x-k8s.io`,
machine: `machines.${capiVersion}.cluster.x-k8s.io`,
sideroServers: "servers.v1alpha1.metal.sidero.dev",
sideroServers: "servers.v1alpha2.metal.sidero.dev",
crd: "customresourcedefinitions.v1.apiextensions.k8s.io",
};

Expand Down
99 changes: 89 additions & 10 deletions frontend/src/views/Servers/components/TServersContentListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,71 @@
/>
<div class="list__item-data">
<p class="list__item-name">{{ item?.metadata?.uid }}</p>
<p v-if="item?.spec?.system" class="list__item-description">
<span>{{ item?.spec?.system?.manufacturer }}&nbsp;</span>
<span>{{ item?.spec?.system?.productName }}&nbsp;</span>
<span>{{ cpu }}</span>
<p v-if="item?.spec?.hardware" class="list__item-description">
<span v-if="item.spec.hardware.system">{{ item.spec.hardware.system.manufacturer }} {{ item.spec.hardware.system.productName }}</span>
<span v-if="item.spec.hardware.compute">, {{ item.spec.hardware.compute.totalCoreCount }} CPUs</span>
<span v-if="item.spec.hardware.memory">, {{ item.spec.hardware.memory.totalSize }} RAM</span>
<span v-if="item.spec.hardware.storage">, {{ item.spec.hardware.storage.totalSize }} storage</span>
</p>
</div>
<div class="list__item-info">
<popover class="relative">
<popover-button><t-icon icon="info" class="list__item-info-icon" /></popover-button>
<popover-panel class="absolute z-10">
<div class="list__item-hardware">
<template v-if="item?.spec?.hardware?.system">
<p class="list__item-hardware-title">System information</p>
<p class="list__item-hardware-description">
<span>Manufacturer: {{ item.spec.hardware.system.manufacturer }}<br/></span>
<span>Product name: {{ item.spec.hardware.system.productName }}<br/></span>
<span v-if="item.spec.hardware.system.version">Version: {{ item.spec.hardware.system.version }}<br/></span>
<span v-if="item.spec.hardware.system.serialNumber">Serial number: {{ item.spec.hardware.system.serialNumber }}<br/></span>
</p>
</template>
<template v-if="item?.spec?.hardware?.compute">
<p class="list__item-hardware-title">Compute information</p>
<p class="list__item-hardware-description">
<span>Total core count: {{ item.spec.hardware.compute.totalCoreCount }}<br/></span>
<span>Total thread count: {{ item.spec.hardware.compute.totalThreadCount }}<br/></span>
<span>Number of processors: {{ item.spec.hardware.compute.processorCount }}<br/></span>
<span v-bind:key="index" v-for="(cpu, index) in item.spec.hardware.compute.processors">
CPU {{index}}: {{ cpu.manufacturer }} {{cpu.productName}} ({{cpu.coreCount}} cores @ {{cpu.speed}} MHz, {{cpu.threadCount}} threads)<br/>
</span>
</p>
</template>
<template v-if="item?.spec?.hardware?.memory">
<p class="list__item-hardware-title">Memory information</p>
<p class="list__item-hardware-description">
<span>Total memory size: {{ item.spec.hardware.memory.totalSize }}<br/></span>
<span>Number of memory modules: {{ item.spec.hardware.memory.moduleCount }}<br/></span>
<span v-bind:key="index" v-for="(mem, index) in item.spec.hardware.memory.modules">
Memory module {{index}}: {{mem.size}} MB {{mem.type}} @ {{mem.speed}} Mhz<br/>
</span>
</p>
</template>
<template v-if="item?.spec?.hardware?.storage">
<p class="list__item-hardware-title">Storage information</p>
<p class="list__item-hardware-description">
<span>Total storage size: {{ item.spec.hardware.storage.totalSize }}<br/></span>
<span>Number of storage devices: {{ item.spec.hardware.storage.deviceCount }}<br/></span>
<span v-bind:key="index" v-for="(dev, index) in item.spec.hardware.storage.devices">
Storage device {{dev.deviceName}}: {{dev.size / 1024 / 1024 / 1024}} GB {{dev.type}}<br/>
</span>
</p>
</template>
<template v-if="item?.spec?.hardware?.network">
<p class="list__item-hardware-title">Network information</p>
<p class="list__item-hardware-description">
<span>Number of network interfaces: {{ item.spec.hardware.network.interfaceCount }}<br/></span>
<span v-bind:key="index" v-for="(ifc, index) in item.spec.hardware.network.interfaces">
Network interface {{ ifc.name }}: {{ifc.mac }} = {{ ifc.addresses || [] }}<br/>
</span>
</p>
</template>
</div>
</popover-panel>
</popover>
</div>
<div class="list__item-created">{{ created }}</div>
<div class="list__item-status">
<t-status :title="item?.status?.ready ? 'Ready' : 'Failed'" />
Expand Down Expand Up @@ -97,9 +156,10 @@ import { KubernetesResourceType } from "@/api/resources";
import { Runtime } from "@/api/common/theila.pb";
import { showError } from "@/modal";
import TButton from "@/components/common/Button/TButton.vue";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
export default {
components: { TSlideDownWrapper, TStatus, TActionsBox, TIcon, TTag, TButton },
components: { TSlideDownWrapper, TStatus, TActionsBox, TIcon, TTag, TButton, Popover, PopoverButton, PopoverPanel },
props: {
item: Object,
},
Expand All @@ -112,13 +172,9 @@ export default {
.setLocale("eng")
.toRelative();
});
const cpu = computed(() => {
return (item.value!["spec"]["cpu"] || {})["version"];
});
return {
isDropdownOpened,
created,
cpu,
acceptServer: async () => {
if (item.value!["spec"]["accepted"]) return;
Expand Down Expand Up @@ -181,7 +237,16 @@ export default {
}
.list__item-data {
@apply flex flex-col pr-1;
width: 38.3%;
width: calc(38.3% - 24px - 0.5rem);
}
.list__item-info {
@apply flex flex-col pr-1;
padding-right: 0.5rem;
}
.list__item-info-icon {
@apply fill-current text-naturals-N11 hover:bg-naturals-N7 transition-all rounded duration-300 cursor-pointer mr-1 self-start;
width: 24px;
height: 24px;
}
.list__item-name {
@apply text-xs text-naturals-N14 overflow-ellipsis overflow-hidden whitespace-nowrap w-full;
Expand All @@ -203,6 +268,20 @@ export default {
.list__item-power {
width: 17%;
}
.list__item-hardware {
border: 2px solid rgb(125, 125, 133);
border-radius: 5px;
background-color: rgba(19, 20, 28, var(--tw-bg-opacity));
padding: 0.5rem;
}
.list__item-hardware-title {
@apply text-xs text-naturals-N12;
margin-bottom: 3px;
}
.list__item-hardware-description {
@apply text-xs text-naturals-N9 overflow-ellipsis overflow-hidden whitespace-nowrap w-full;
padding-bottom: 9px;
}
.list__action-box {
@apply absolute right-5;
top: calc(50% - 12px);
Expand Down

0 comments on commit 5f7c114

Please sign in to comment.