Skip to content

Commit

Permalink
[#70019] frontend: Add more details to packages/devices lists in groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaciejWas
MaciejWas committed Dec 11, 2024
1 parent 3fa6a9f commit f730d15
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 21 deletions.
83 changes: 74 additions & 9 deletions frontend/src/components/groups/GroupsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,22 @@ Component wraps functionality for displaying and working with rdfm groups.
<div class="title" v-else>{{ group.packages.length }} Packages</div>
<div class="values">
<div v-for="pckg in group.packages" :key="pckg" class="item">
#{{ pckg }}
<div class="item-layout">
<p title="Package version">
{{
findPackage(pckg)?.metadata[
'rdfm.software.version'
] || ' - '
}}
</p>
<p title="Device type">
{{
findPackage(pckg)?.metadata[
'rdfm.hardware.devtype'
] || ' - '
}}
</p>
</div>
</div>
</div>
</div>
Expand All @@ -223,14 +238,38 @@ Component wraps functionality for displaying and working with rdfm groups.
<div class="title" v-if="group.devices.length == 1">1 Device</div>
<div class="title" v-else>{{ group.devices.length }} Devices</div>
<div class="values">
<div v-for="device in group.devices" :key="device" class="item">
#{{ device }} - {{ findDevice(device) }}
<button
class="action-button red small-padding"
@click="patchDevicesRequest(group.id, [], [device])"
>
<Cross></Cross>
</button>
<div
v-for="device in group.devices.map((d) => ({
id: d,
...findDevice(d),
}))"
:key="device.id"
class="item"
>
<div class="item-layout grid">
<div>
<p title="MAC address">
{{ device.mac_address || ' - ' }}
</p>
<p title="Device type">
{{
device.metadata?.['rdfm.hardware.devtype'] ||
' - '
}}
</p>
</div>
<div>
<button
style="margin: 10px"
class="action-button red small-padding"
@click="
patchDevicesRequest(group.id, [], [device.id])
"
>
<Cross></Cross>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -316,6 +355,32 @@ Component wraps functionality for displaying and working with rdfm groups.
margin: 0.25em 1em;
padding: 0.25em 0.5em;
display: inline-block;

.item-layout.grid {
display: grid;
grid-template-columns: auto 35px;
}

.item-layout {
font-family: monospace;
font-size: large;
margin-left: 2px;

& > div {
align-content: center;
}

p {
line-height: 1.25em;
height: 1.25em;
margin: 0px;
text-align: left;
}

p:nth-child(2) {
color: var(--gray-700);
}
}
}
}

Expand Down
16 changes: 4 additions & 12 deletions frontend/src/components/groups/groups.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,11 @@ export const groupResources = resourcesGetter<Group[]>(GROUPS_ENDPOINT);
export const packagesResources = resourcesGetter<Package[]>(PACKAGES_ENDPOINT);
export const devicesResources = resourcesGetter<RegisteredDevice[]>(DEVICES_ENDPOINT);

export const findPackage = (packageId: number) => {
if (packagesResources.resources.value === undefined) return 'NOT FOUND';
export const findPackage = (packageId: number) =>
packagesResources.resources.value?.find((pckg) => pckg.id === packageId);

const pckg = packagesResources.resources.value.find((pckg) => pckg.id === packageId);
return pckg!.id;
};

export const findDevice = (deviceId: number) => {
if (devicesResources.resources.value === undefined) return 'NOT FOUND';

const device = devicesResources.resources.value.find((device) => device.id === deviceId);
return device!.mac_address;
};
export const findDevice = (deviceId: number) =>
devicesResources.resources.value?.find((device) => device.id === deviceId);

/**
* Request specified in
Expand Down

0 comments on commit f730d15

Please sign in to comment.