[#23] Add example user interface implementation #25

michelleFranke · 2023-04-24T09:20:58Z

At this PR we have created an example user interface for a Google Cloud based deployment. The UI is able to communicate with the Device Registry API and the Device Communication API.

Added new module to support a user interface based on Angular 15
Added components for tenants, devices, credentials, configs and states
Added services for communicating with the APIs
Added Dockerfile
Updated Readme

calohmn · 2023-07-03T20:34:15Z

@michelleFranke Thanks for the PR, this looks very nice and very useful!
(I had done a local test, commenting the private googleService: GoogleService constructor parameter in api.service.ts and app.components.ts to skip the Google login.)

In fact, it would be good to have such a device-management UI in the Hono repository itself, being more prominent there.
For that however, I think the Google service integration and the usage of the Device Communication API would need to be made optional. What do you think about such changes?
An option could also be to first merge this PR here in Hono-extras like it is, then develop the above mentioned changes and, once done, move it to the Hono repository.

Another thing: could you add a copyright header to the source files (mainly the typescript files)?
The usual format would be like this:

/********************************************************************************
 * Copyright (c) 2023 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

At this PR we have created an example user interface for a Google Cloud based deployment. The UI is able to communicate with the Device Registry API and the Device Communication API. - Added new module to support a user interface based on Angular 15 - Added components for tenants, devices, credentials, configs and states - Added services for communicating with the APIs - Added Dockerfile - Updated Readme Signed-off-by: michelle <m.franke@sotec.eu>

fixed loader interceptor, updated unittest for device service, removed unnecessary variable in device modal add via in device detail view, remove functions in bound devices list remove gateway / device differentiation logic and add mocks update save functionality add body with via, add isGateway logic, add async call add gateway list component & functionality to filter for gateways remove gateways & devices under gateways in devices list show devices under gateway, optimize filter function add devices via functionality, fix wrong count of devices, add list all functionality Signed-off-by: michelle <m.franke@sotec.eu>

filter lists of selectable devices in modals fix bind after refactoring refactor bind device method - moved to device detail - adjusted button to match rest of the page remove delete device button in bound devices list fix list in bind devices modal - only devices that are not gateways are shown implement display of tooltip dependent on modal update list on modal close rename and replace subcomponent name refresh lists when changing tab devices gateways fix create device modal - fixed validation - fixed create function modals api calls - reworking the loop to use whole device so we can use the device via started changing to common reusable descriptions fixed modal closing console error fixed console error when dismissing modal extended Create Gateway Modal extending create gateway modal fix display gateway box when removing all items updated Device Detail Component to be reused - prepared for check if device is gateway - added Tab for bound devices - added function to switch out title and labels add tab nav to tenant detail - displaying Gateways and Devices via Tabs add create gateway modal add device list in bound devices tab add search for selecting device as gateway refactor Lists in Modal - extended Device class with optional parameter - implemented check uncheck function added component to create device modal - created new subcomponent - moved list and logic to subcomponent - check / uncheck not finished add area for checked devices used as gateways WIP gateways feature - extended Service - extended List Calls Signed-off-by: patrick <p.koelle@sotec.eu>

…al with a public key list-authentication delete bug fix and clean up fixed pagination in bind-devices-modal fixes due to the review change isGateway device registry query parameter bug fixed. gateway is displayed in the list directly after creation (creation time still missing) bind devices button deleted from the device detail page of devices that are already bound to a gateway added unbind devices functionality added bind devices functionality working on bind-devices-modal component bind-devices-modal component added bind and unbind devices edited tab "Bound Devices" for gateways overworked tab "Bound Devices" for gateways added Signed-off-by: Muhammed <m.oeztuerk@sotec.eu> Signed-off-by: Matthias Kaemmer <m.kaemmer@sotec.eu>

fix put request Signed-off-by: g.dimitropoulos <g.dimitropoulos@sotec.eu>

Fixed pagination bug Signed-off-by: Hoang Sa Nguyen <h.nguyen@sotec.eu>

Signed-off-by: julian <j.hauth@sotec.eu> Signed-off-by: Matthias Kaemmer <m.kaemmer@sotec.eu>

…ces-modal.component to create-and-bind-modal.component Signed-off-by: Muhammed <m.oeztuerk@sotec.eu>

sanguyen123 · 2023-08-25T07:20:09Z

Good morning @calohmn I took over this frontend PR from michelleFranke. The option you mentioned to first merge this PR into Hono-extras sounds good. Regarding the above mentioned changes to the optional google service integration, the optional device communication API and the moving of the UI to the Hono repository itself is a good idea in our opinion, that we can discuss at a later point together.

I will add the copyright headers to the source files. There are also some improvements in usabilty and support for gateways has been added. Those changes will be commited soon and will be part of this PR.

sanguyen123 · 2023-09-28T12:56:38Z

Hi @calohmn , I just pushed the recent changes, which mainly includes support for gateways, request-response commands, general UI improvements and including the header into the source files.

calohmn · 2023-10-05T20:14:53Z

@sanguyen123 Thanks for following up on this. As this is a quite large contribution, there is an IP check required. I've created a corresponding ticket. This will possibly take some days to be reviewed.

device-management-ui/src/assets/images/sort-up-solid.svg

Added copyright header to source files Added exact search in device/gateway list and service Signed-off-by: Hoang Sa Nguyen <h.nguyen@sotec.eu>

sanguyen123 · 2023-10-31T13:14:02Z

Hi @calohmn the two referenced SVGs fall under the free license of fontawesome and are open source / GPL friendly. I updated the SVGs to the newest svg-code from the offical website. Now it also states that it is Font Awesome Free. I hope this clarifies it.

For reference:

https://fontawesome.com/license/free
https://fontawesome.com/search?q=sort&o=r&m=free

calohmn · 2023-11-04T08:49:30Z

@sanguyen123 Thanks, the changes got approved in the IP check.

calohmn

LGTM, thanks a lot for the contribution!

calohmn · 2023-11-04T10:13:23Z

@sanguyen123 I've added #28 and #29 as follow-ups.

julian-sotec · 2023-11-08T15:20:48Z

Hi @calohmn - While it is great that the UI has been merged now - I have one little thing that I like to ask here:
We see that the commits have been squashed / merged together into one - which means the history of who did the changes / who is co author did not make it to the master. Is this something we can change after the merge? Any Ideas?

calohmn · 2023-11-08T18:47:48Z

@julian-sotec Sorry, as we usually squash PRs into one commit in Hono, I did so here as well, listing the individual authors in the commit message. If you prefer, I could add a commit that reverts the changes, so that you can then create a new PR based on the branch used here. That PR can then be completed without squashing.
One thing to note here though would be that, as discussed in the comments above, it would be good if we could move the UI code to the hono-repository after #28 and #29 have been resolved. Creating individual commits in the hono repo for each UI-related hono-extras commit would mean some effort then.

julian-sotec · 2023-11-13T09:51:02Z

@julian-sotec Sorry, as we usually squash PRs into one commit in Hono, I did so here as well, listing the individual authors in the commit message. If you prefer, I could add a commit that reverts the changes, so that you can then create a new PR based on the branch used here. That PR can then be completed without squashing. One thing to note here though would be that, as discussed in the comments above, it would be good if we could move the UI code to the hono-repository after #28 and #29 have been resolved. Creating individual commits in the hono repo for each UI-related hono-extras commit would mean some effort then.

Hi @calohmn - thank you for clarifying this for us - I usually would expect to have only one commit - and ideally a small one.
However since to us the history in this particular case is important We would prefere that you add a commit that reverts the changes so that we can complete the PR without squashing. Sorry for the additional effort.
To the second point when - I am afraid I have to ask what the additional effort with multiple commits when moving UI to hono would be in particular? Refering to "Creating individual commits in the hono repo for each UI-related hono-extras commit would mean some effort then."

calohmn · 2023-11-13T20:07:19Z

@julian-sotec The changes have been reverted now.

As for the 2nd point: My initial idea was, that just copying the UI files from the hono-extras repo to the Hono repo and then doing one commit there would be a lot easier than copying the commits somehow. But thinking more about it, the latter also seems rather straightforward (adding hono-extras repo as remote to the local hono repo, fetching, and then cherry-picking the commits with the UI changes).

julian-sotec · 2023-11-14T07:49:15Z

@calohmn sounds perfect to me, thanks!

calohmn added the enhancement New feature or request label Jul 3, 2023

julian-sotec force-pushed the feature/device-management-ui branch from 9690948 to f456ab4 Compare August 8, 2023 13:11

michelleFranke and others added 7 commits August 8, 2023 15:24

fix create function

30ff7d6

fix put request Signed-off-by: g.dimitropoulos <g.dimitropoulos@sotec.eu>

Fixed form break when deleting all the content of secret key

528c900

Fixed pagination bug Signed-off-by: Hoang Sa Nguyen <h.nguyen@sotec.eu>

Re-Add changes from base branch after rebase / squash commit

e211f56

Signed-off-by: julian <j.hauth@sotec.eu> Signed-off-by: Matthias Kaemmer <m.kaemmer@sotec.eu>

merging device-modal.component, gateway-modal.component and bind-devi…

02df08f

…ces-modal.component to create-and-bind-modal.component Signed-off-by: Muhammed <m.oeztuerk@sotec.eu>

sanguyen123 force-pushed the feature/device-management-ui branch from ec6493f to b4472d7 Compare September 29, 2023 14:17

calohmn reviewed Oct 28, 2023

View reviewed changes

device-management-ui/src/assets/images/sort-up-solid.svg Show resolved Hide resolved

Added request/response command capability

0c51c23

Added copyright header to source files Added exact search in device/gateway list and service Signed-off-by: Hoang Sa Nguyen <h.nguyen@sotec.eu>

sanguyen123 force-pushed the feature/device-management-ui branch from b4472d7 to 0c51c23 Compare October 31, 2023 13:05

calohmn approved these changes Nov 4, 2023

View reviewed changes

calohmn linked an issue Nov 4, 2023 that may be closed by this pull request

Add example User Interface #23

Closed

calohmn merged commit b2216e5 into eclipse-hono:master Nov 4, 2023
2 checks passed

This was referenced Nov 4, 2023

Device Management UI: Make Google service integration optional #28

Open

Device Management UI: Make usage of Device Communication API optional #29

Open

This was referenced Nov 18, 2023

Re-open [#23] Add example user interface implementation #25 #30

Merged

Icon files could be commercial licensed #31

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#23] Add example user interface implementation #25

[#23] Add example user interface implementation #25

michelleFranke commented Apr 24, 2023

calohmn commented Jul 3, 2023

sanguyen123 commented Aug 25, 2023

sanguyen123 commented Sep 28, 2023

calohmn commented Oct 5, 2023

sanguyen123 commented Oct 31, 2023

calohmn commented Nov 4, 2023

calohmn left a comment

calohmn commented Nov 4, 2023

julian-sotec commented Nov 8, 2023

calohmn commented Nov 8, 2023

julian-sotec commented Nov 13, 2023 •

edited

Loading

calohmn commented Nov 13, 2023

julian-sotec commented Nov 14, 2023

[#23] Add example user interface implementation #25

[#23] Add example user interface implementation #25

Conversation

michelleFranke commented Apr 24, 2023

calohmn commented Jul 3, 2023

sanguyen123 commented Aug 25, 2023

sanguyen123 commented Sep 28, 2023

calohmn commented Oct 5, 2023

sanguyen123 commented Oct 31, 2023

calohmn commented Nov 4, 2023

calohmn left a comment

Choose a reason for hiding this comment

calohmn commented Nov 4, 2023

julian-sotec commented Nov 8, 2023

calohmn commented Nov 8, 2023

julian-sotec commented Nov 13, 2023 • edited Loading

calohmn commented Nov 13, 2023

julian-sotec commented Nov 14, 2023

julian-sotec commented Nov 13, 2023 •

edited

Loading