Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Warnings for Missing Interfaces in Device Introspection #486

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Warnings for Missing Interfaces in Device Introspection #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eab555f
Add Warnings for Missing Interfaces in Device Introspection
AmerMesanovic Dec 31, 2024
4521dd4
Fix Cypress tests on Device Page by adding delays
AmerMesanovic Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion cypress/e2e/device_page.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe('Device page tests', () => {
cy.intercept('GET', '/appengine/v1/*/groups', { data: allGroups });
cy.intercept('GET', '/appengine/v1/*/devices/*', { fixture: 'device' });
cy.visit(`/devices/${this.device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.contains('Device Info')
.next()
Expand Down Expand Up @@ -91,6 +92,7 @@ describe('Device page tests', () => {
it('successfully loads Device page for a detailed device', function () {
cy.intercept('GET', '/appengine/v1/*/devices/*', { fixture: 'device_detailed' });
cy.visit(`/devices/${this.deviceDetailed.data.id}/edit`);
cy.wait(1500);
cy.location('pathname').should('eq', `/devices/${this.deviceDetailed.data.id}/edit`);
cy.get('h2').contains('Device');
});
Expand Down Expand Up @@ -190,6 +192,7 @@ describe('Device page tests', () => {
deviceWithoutInhibitedCredentials,
);
cy.visit(`/devices/${this.device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content .card-header')
.contains('Device Info')
.parents('.card')
Expand Down Expand Up @@ -231,6 +234,7 @@ describe('Device page tests', () => {
deviceWithInhibitedCredentials,
);
cy.visit(`/devices/${this.device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content .card-header')
.contains('Device Info')
.parents('.card')
Expand Down Expand Up @@ -265,6 +269,7 @@ describe('Device page tests', () => {
body: '',
}).as('wipeCredentialsSecretRequest');
cy.visit(`/devices/${this.device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.contains('Wipe credential secret').should('exist').and('not.be.disabled').click();
});
Expand Down Expand Up @@ -295,6 +300,7 @@ describe('Device page tests', () => {
updatedDevice.data.aliases = { alias_key: 'alias_value' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Aliases')
Expand Down Expand Up @@ -345,6 +351,7 @@ describe('Device page tests', () => {
updatedDevice.data.aliases = { alias_key1: 'alias_value1' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Aliases')
Expand Down Expand Up @@ -398,6 +405,7 @@ describe('Device page tests', () => {
updatedDevice.data.aliases = { alias_key: 'alias_new_value' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Aliases')
Expand Down Expand Up @@ -451,6 +459,7 @@ describe('Device page tests', () => {
updatedDevice.data.attributes = { attribute_key: 'attribute_value' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Attributes')
Expand Down Expand Up @@ -504,6 +513,7 @@ describe('Device page tests', () => {
updatedDevice.data.attributes = { attribute_key1: 'attribute_value1' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Attributes')
Expand Down Expand Up @@ -558,6 +568,7 @@ describe('Device page tests', () => {
updatedDevice.data.attributes = { attribute_key: 'attribute_new_value' };
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Attributes')
Expand Down Expand Up @@ -615,6 +626,7 @@ describe('Device page tests', () => {
cy.intercept('GET', '/appengine/v1/*/groups', { data: allGroups });
cy.dynamicIntercept('getDeviceRequest', 'GET', '/appengine/v1/*/devices/*', device);
cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Groups')
Expand Down Expand Up @@ -664,6 +676,7 @@ describe('Device page tests', () => {
cy.intercept('GET', '/appengine/v1/*/groups', { data: allGroups });

cy.visit(`/devices/${device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content').within(() => {
cy.get('.card-header')
.contains('Groups')
Expand Down Expand Up @@ -703,7 +716,7 @@ describe('Device page tests', () => {
it('correctly renders Device Stats', function () {
cy.intercept('GET', '/appengine/v1/*/devices/*', { fixture: 'device_detailed' });
cy.visit(`/devices/${this.deviceDetailed.data.id}/edit`);

cy.wait(1500);
const formatBytes = (bytes) => {
if (bytes < 1024) {
return bytes + 'B';
Expand Down Expand Up @@ -759,6 +772,7 @@ describe('Device page tests', () => {
cy.intercept('GET', '/appengine/v1/*/devices/*', this.device);
cy.mockWebSocket({ url: wssUrl });
cy.visit(`/devices/${this.device.data.id}/edit`);
cy.wait(1500);
cy.get('.main-content .card-header')
.contains('Device Live Events')
.parents('.card')
Expand Down
92 changes: 69 additions & 23 deletions src/DeviceStatusPage/IntrospectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,23 @@
limitations under the License.
*/

import React from 'react';
import { Card, Table } from 'react-bootstrap';
import React, { useState, useEffect } from 'react';
import { Card, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { Link } from 'react-router-dom';

import type { AstarteDevice, AstarteDeviceInterfaceStats } from 'astarte-client';
import FullHeightCard from '../components/FullHeightCard';
import { useAstarte } from 'AstarteManager';

interface IntrospectionTableProps {
deviceId: string;
introspection: AstarteDeviceInterfaceStats[];
interfacesData: AstarteDeviceInterfaceStats[];
}

const IntrospectionTable = ({
deviceId,
introspection,
interfacesData,
}: IntrospectionTableProps): React.ReactElement => {
const astarte = useAstarte();

Expand All @@ -45,25 +46,54 @@ const IntrospectionTable = ({
</tr>
</thead>
<tbody>
{introspection.map((iface) => (
<tr key={iface.name}>
<td>
{astarte.token?.can(
'appEngine',
'GET',
`/devices/${deviceId}/interfaces/${iface.name}`,
) ? (
<Link to={`/devices/${deviceId}/interfaces/${iface.name}/${iface.major}`}>
{iface.name}
</Link>
) : (
iface.name
)}
</td>
<td>{iface.major}</td>
<td>{iface.minor}</td>
</tr>
))}
{introspection.map((iface) => {
const isInterfaceInstalled = interfacesData.some(
(interfaceData) => interfaceData.name === iface.name,
);
return (
<tr key={iface.name}>
<td>
{astarte.token?.can(
'appEngine',
'GET',
`/devices/${deviceId}/interfaces/${iface.name}`,
) ? (
!isInterfaceInstalled ? (
<>
<OverlayTrigger
placement="top"
overlay={
<Tooltip id={`tooltip-${iface.name}`}>
Interface not installed in the realm
</Tooltip>
}
>
<span
className="d-inline-flex align-items-center justify-content-center rounded-circle border border-danger bg-white text-danger fw-bold me-2"
style={{
width: '20px',
height: '20px',
}}
>
!
</span>
</OverlayTrigger>
{iface.name}
</>
) : (
<Link to={`/devices/${deviceId}/interfaces/${iface.name}/${iface.major}`}>
{iface.name}
</Link>
)
) : (
iface.name
)}
</td>
<td>{iface.major}</td>
<td>{iface.minor}</td>
</tr>
);
})}
</tbody>
</Table>
);
Expand All @@ -74,14 +104,30 @@ interface IntrospectionCardProps {
}

const IntrospectionCard = ({ device }: IntrospectionCardProps): React.ReactElement => {
const [interfacesData, setInterfacesData] = useState<AstarteDeviceInterfaceStats[]>([]);
const introspection = Array.from(device.introspection.values());
const astarte = useAstarte();

useEffect(() => {
const fetchData = async () => {
const data = await astarte.client.getInterfaces();
const formattedData = data.map((iface: string) => ({ name: iface }));
setInterfacesData(formattedData as AstarteDeviceInterfaceStats[]);
};

fetchData();
}, [astarte]);

return (
<FullHeightCard xs={12} md={6} className="mb-4">
<Card.Header as="h5">Interfaces</Card.Header>
<Card.Body className="d-flex flex-column">
{introspection.length > 0 ? (
<IntrospectionTable deviceId={device.id} introspection={introspection} />
<IntrospectionTable
deviceId={device.id}
introspection={introspection}
interfacesData={interfacesData}
/>
) : (
<p>No introspection info</p>
)}
Expand Down
Loading