Agent menu (#540)

* Add generate version module script * Remove Fork me on GitHub banner * Add app-version.ts * Revert "Add app-version.ts" This reverts commit fe1a37e631. * Add app-version.ts * Add agent icon class * Move settings component under agent folder * Add AboutComponent * Add agent routes * Add index.ts for agent folder * Fix agent folder imports in shared module * Add agent menu to side menu, with Settings and About pages under it * Fix agent icon alignment in side menu * Simplify About page * Make Agent menu 0 level in side menu * Remove bottom Settings menu * Fix Agent menu closing if My UHK is closed in side menu * Fix version text alignment in auto update settings * Remove github fork ribbon styles * use package.json instead of app-version.ts * fix OpenUrlInNewWindow naming * fix lint request * fix: firmware download url calculation
2018-01-13 18:10:21 +02:00
parent fdcf64d5c6
commit 3ee6c680a1
34 changed files with 199 additions and 137 deletions
--- a/package.json
+++ b/package.json
@@ -4,6 +4,10 @@
  "author": "Ultimate Gadget Laboratories",
  "main": "electron/dist/electron-main.js",
  "version": "1.0.4",
+  "firmwareVersion": "8.0.0",
+  "deviceProtocolVersion": "4.0.0",
+  "userConfigVersion": "4.0.0",
+  "hardwareConfigVersion": "1.0.0",
  "description": "Agent is the configuration application of the Ultimate Hacking Keyboard.",
  "repository": {
    "type": "git",
--- a/packages/uhk-agent/src/package.json
+++ b/packages/uhk-agent/src/package.json
@@ -15,9 +15,5 @@
  },
  "dependencies": {
    "node-hid": "0.5.7"
-  },
-  "firmwareVersion": "8.0.0",
-  "deviceProtocolVersion": "4.0.0",
-  "userConfigVersion": "4.0.0",
-  "hardwareConfigVersion": "1.0.0"
+  }
 }
--- a/packages/uhk-agent/src/services/app.service.ts
+++ b/packages/uhk-agent/src/services/app.service.ts
@@ -1,7 +1,5 @@
-import { BrowserWindow, ipcMain } from 'electron';
+import { BrowserWindow, ipcMain, shell } from 'electron';
 import { UhkHidDevice } from 'uhk-usb';
-import { readFile } from 'fs';
-import { join } from 'path';

 import { AppStartInfo, IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
@@ -18,53 +16,31 @@ export class AppService extends MainServiceBase {

        ipcMain.on(IpcEvents.app.getAppStartInfo, this.handleAppStartInfo.bind(this));
        ipcMain.on(IpcEvents.app.exit, this.exit.bind(this));
+        ipcMain.on(IpcEvents.app.openUrl, this.openUrl.bind(this));
        logService.info('[AppService] init success');
    }

    private async handleAppStartInfo(event: Electron.Event) {
        this.logService.info('[AppService] getAppStartInfo');

-        const packageJson = await this.getPackageJson();
-
        const response: AppStartInfo = {
            commandLineArgs: {
                addons: this.options.addons || false,
                autoWriteConfig: this.options['auto-write-config'] || false
            },
            deviceConnected: this.uhkHidDeviceService.deviceConnected(),
-            hasPermission: this.uhkHidDeviceService.hasPermission(),
-            agentVersionInfo: {
-                version: packageJson.version,
-                firmwareVersion: packageJson.firmwareVersion,
-                deviceProtocolVersion: packageJson.deviceProtocolVersion,
-                moduleProtocolVersion: packageJson.moduleProtocolVersion,
-                userConfigVersion: packageJson.userConfigVersion,
-                hardwareConfigVersion: packageJson.hardwareConfigVersion
-            }
+            hasPermission: this.uhkHidDeviceService.hasPermission()
        };
        this.logService.info('[AppService] getAppStartInfo response:', response);
        return event.sender.send(IpcEvents.app.getAppStartInfoReply, response);
    }

-    /**
-     * Read the package.json that delivered with the bundle. Do not use require('package.json')
-     * because the deploy process change the package.json after the build
-     * @returns {Promise<any>}
-     */
-    private async getPackageJson(): Promise<any> {
-        return new Promise((resolve, reject) => {
-            readFile(join(__dirname, 'package.json'), {encoding: 'utf-8'}, (err, data) => {
-                if (err) {
-                    return reject(err);
-                }
-
-                resolve(JSON.parse(data));
-            });
-        });
-    }
-
    private exit() {
        this.logService.info('[AppService] exit');
        this.win.close();
    }
+
+    private openUrl(event: Electron.Event, urls: Array<string>) {
+        shell.openExternal(urls[0]);
+    }
 }
--- a/packages/uhk-common/src/models/app-start-info.ts
+++ b/packages/uhk-common/src/models/app-start-info.ts
@@ -1,12 +1,7 @@
 import { CommandLineArgs } from './command-line-args';
-import { VersionInformation } from './version-information';

 export interface AppStartInfo {
    commandLineArgs: CommandLineArgs;
    deviceConnected: boolean;
    hasPermission: boolean;
-    /**
-     * This property contains the version information of the deployed agent components
-     */
-    agentVersionInfo: VersionInformation;
 }
--- a/packages/uhk-common/src/util/constants.ts
+++ b/packages/uhk-common/src/util/constants.ts
@@ -1,5 +1,3 @@
 export namespace Constants {
-    export const VENDOR_ID = 0x1D50;
-    export const PRODUCT_ID = 0x6122;
-    export const MAX_PAYLOAD_SIZE = 64;
+    export const AGENT_GITHUB_URL = 'https://github.com/UltimateHackingKeyboard/agent';
 }
--- a/packages/uhk-common/src/util/index.ts
+++ b/packages/uhk-common/src/util/index.ts
@@ -1,5 +1,6 @@
 export { IpcEvents } from './ipcEvents';
 export * from './log';
+export * from './constants';

 // Source: http://stackoverflow.com/questions/13720256/javascript-regex-camelcase-to-sentence
 export function camelCaseToSentence(camelCasedText: string): string {
--- a/packages/uhk-common/src/util/ipcEvents.ts
+++ b/packages/uhk-common/src/util/ipcEvents.ts
@@ -3,6 +3,7 @@ class App {
    public static readonly getAppStartInfo = 'app-get-start-info';
    public static readonly getAppStartInfoReply = 'app-get-start-info-reply';
    public static readonly exit = 'app-exit';
+    public static readonly openUrl = 'open-url';
 }

 class AutoUpdate {
--- a/packages/uhk-web/src/app/app.component.html
+++ b/packages/uhk-web/src/app/app.component.html
@@ -7,9 +7,6 @@
 <div id="main-content" class="main-content">
    <router-outlet></router-outlet>
 </div>
-<div class="github-fork-ribbon" *ngIf="!(runningInElectron$ | async)">
-    <a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
-</div>
 <notifier-container></notifier-container>
 <progress-button class="save-to-keyboard-button"
                 *ngIf="(saveToKeyboardState$ | async).showButton"
--- a/packages/uhk-web/src/app/app.component.scss
+++ b/packages/uhk-web/src/app/app.component.scss
@@ -1,36 +1,3 @@
-/* GitHub ribbon */
-.github-fork-ribbon {
-    background-color: #a00;
-    overflow: hidden;
-    white-space: nowrap;
-    position: fixed;
-    right: -50px;
-    bottom: 40px;
-    z-index: 2000;
-    /* stylelint-disable indentation */
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    -webkit-box-shadow: 0 0 10px #888;
-    -moz-box-shadow: 0 0 10px #888;
-    box-shadow: 0 0 10px #888;
-    /* stylelint-enable indentation */
-
-    a {
-        border: 1px solid #faa;
-        color: #fff;
-        display: block;
-        font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        margin: 1px 0;
-        padding: 10px 50px;
-        text-align: center;
-        text-decoration: none;
-        text-shadow: 0 0 5px #444;
-    }
-}
-
 main-app {
    min-height: 100%;
    height: 100%;
--- a/packages/uhk-web/src/app/app.routes.ts
+++ b/packages/uhk-web/src/app/app.routes.ts
@@ -12,7 +12,7 @@ import { UhkDeviceConnectedGuard } from './services/uhk-device-connected.guard';
 import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized.guard';
 import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
 import { MainPage } from './pages/main-page/main.page';
-import { settingsRoutes } from './components/settings/settings.routes';
+import { agentRoutes } from './components/agent/agent.routes';
 import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.page';
 import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
 import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
@@ -42,7 +42,7 @@ const appRoutes: Routes = [
            ...keymapRoutes,
            ...macroRoutes,
            ...addOnRoutes,
-            ...settingsRoutes
+            ...agentRoutes
        ]
    }
 ];
--- a/packages/uhk-web/src/app/components/agent/about/about.component.html
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.html
@@ -0,0 +1,10 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="uhk-icon uhk-icon-agent-icon"></i>
+        <span>About</span>
+    </h1>
+    <div class="col-xs-12">
+        <div class="agent-version">Agent version: <span class="text-bold">{{version}}</span></div>
+        <div><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
+    </div>
+</div>
--- a/packages/uhk-web/src/app/components/agent/about/about.component.scss
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.scss
@@ -0,0 +1,20 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.agent {
+    &-version {
+        margin-bottom: 1rem;
+
+        span {
+            font-weight: bold;
+        }
+    }
+}
+
+.link-github {
+    cursor: pointer;
+}
--- a/packages/uhk-web/src/app/components/agent/about/about.component.ts
+++ b/packages/uhk-web/src/app/components/agent/about/about.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Constants } from 'uhk-common';
+
+import { AppState } from '../../../store';
+import { getVersions } from '../../../util';
+import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
+
+@Component({
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class AboutComponent {
+    version: string = getVersions().version;
+
+    constructor(private store: Store<AppState>) {
+    }
+
+    openAgentGitHubPage(event) {
+        event.preventDefault();
+        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
+    }
+}
--- a/packages/uhk-web/src/app/components/agent/agent.routes.ts
+++ b/packages/uhk-web/src/app/components/agent/agent.routes.ts
@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+import { SettingsComponent } from './settings/settings.component';
+import { AboutComponent } from './about/about.component';
+
+export const agentRoutes: Routes = [
+    {
+        path: 'settings',
+        component: SettingsComponent
+    },
+    {
+        path: 'about',
+        component: AboutComponent
+    }
+];
--- a/packages/uhk-web/src/app/components/agent/index.ts
+++ b/packages/uhk-web/src/app/components/agent/index.ts
@@ -0,0 +1,3 @@
+export * from './agent.routes';
+export * from './about/about.component';
+export * from './settings/settings.component';
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.html
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.html
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss
--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
+++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';

-import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../store';
+import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../../store';
 import {
    CheckForUpdateNowAction,
    ToggleCheckForUpdateOnStartupAction,
    TogglePreReleaseFlagAction
-} from '../../store/actions/auto-update-settings';
-import { AutoUpdateSettings } from '../../models/auto-update-settings';
+} from '../../../store/actions/auto-update-settings';
+import { AutoUpdateSettings } from '../../../models/auto-update-settings';
+import { getVersions } from '../../../util';

@Component({
    selector: 'settings',
@@ -19,8 +20,7 @@ import { AutoUpdateSettings } from '../../models/auto-update-settings';
    }
 })
 export class SettingsComponent {
-    // TODO: From where do we get the version number? The electron gives back in main process, but the web...
-    version = '1.0.0';
+    version: string = getVersions().version;
    autoUpdateSettings$: Observable<AutoUpdateSettings>;
    checkingForUpdate$: Observable<boolean>;

--- a/packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html
+++ b/packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html
@@ -19,7 +19,7 @@
        <div class="form-group">
            <label class="col-sm-2 control-label">Version:</label>
            <div class="col-sm-10">
-                <p class="form-control-static">{{version}}</p>
+                <p>{{version}}</p>
            </div>
        </div>

--- a/packages/uhk-web/src/app/components/settings/index.ts
+++ b/packages/uhk-web/src/app/components/settings/index.ts
@@ -1,2 +0,0 @@
-export * from './settings.component';
-export * from './settings.routes';
--- a/packages/uhk-web/src/app/components/settings/settings.routes.ts
+++ b/packages/uhk-web/src/app/components/settings/settings.routes.ts
@@ -1,10 +0,0 @@
-import { Routes } from '@angular/router';
-
-import { SettingsComponent } from './settings.component';
-
-export const settingsRoutes: Routes = [
-    {
-        path: 'settings',
-        component: SettingsComponent
-    }
-];
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
@@ -117,14 +117,25 @@
                    </li>
                </ul>
            </li>
-
+        </ul>
+    </li>
+    <li class="sidebar__level-0--item" [routerLinkActive]="['active']">
+        <div class="sidebar__level-0">
+            <i class="uhk-icon uhk-icon-agent-icon"></i> Agent
+            <i class="fa fa-chevron-up pull-right"
+                (click)="toggleHide($event, 'agent')"></i>
+        </div>
+        <ul [@toggler]="animation['agent']">
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/settings']">Settings</a>
+                </div>
+            </li>
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/about']">About</a>
+                </div>
+            </li>
        </ul>
    </li>
 </ul>
-<ul class="menu--bottom" *ngIf="runInElectron$ | async">
-    <li class="sidebar__level-1--item" [routerLinkActive]="['active']">
-        <a class="sidebar__level-1" [routerLink]="['/settings']">
-            <i class="fa fa-gear"></i> Settings
-        </a>
-    </li>
-</ul>
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.scss
@@ -64,6 +64,10 @@ ul {
            display: none;
            cursor: pointer;
        }
+
+        .uhk-icon-agent-icon {
+            margin-left: -3px;
+        }
    }

    &__level-2 {
--- a/packages/uhk-web/src/app/services/app-renderer.service.ts
+++ b/packages/uhk-web/src/app/services/app-renderer.service.ts
@@ -26,6 +26,11 @@ export class AppRendererService {
        this.ipcRenderer.send(IpcEvents.app.exit);
    }

+    openUrl(url: string): void {
+        this.logService.info(`[AppRendererService] open url: ${url}`);
+        this.ipcRenderer.send(IpcEvents.app.openUrl, url);
+    }
+
    private registerEvents() {
        this.ipcRenderer.on(IpcEvents.app.getAppStartInfoReply, (event: string, arg: AppStartInfo) => {
            this.dispachStoreAction(new ProcessAppStartInfoAction(arg));
--- a/packages/uhk-web/src/app/shared.module.ts
+++ b/packages/uhk-web/src/app/shared.module.ts
@@ -43,7 +43,7 @@ import {
 } from './components/popover/tab';
 import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
 import { IconComponent } from './components/popover/widgets/icon';
-import { SettingsComponent } from './components/settings';
+import { AboutComponent, SettingsComponent } from './components/agent';
 import { SideMenuComponent } from './components/side-menu';
 import { SvgKeyboardComponent } from './components/svg/keyboard';
 import {
@@ -152,6 +152,7 @@ import { SliderWrapperComponent } from './components/slider-wrapper/slider-wrapp
        MacroTextTabComponent,
        MacroNotFoundComponent,
        AddOnComponent,
+        AboutComponent,
        SettingsComponent,
        KeyboardSliderComponent,
        CancelableDirective,
--- a/packages/uhk-web/src/app/store/actions/app.ts
+++ b/packages/uhk-web/src/app/store/actions/app.ts
@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';

-import { AppStartInfo, CommandLineArgs, HardwareConfiguration, Notification, type, VersionInformation } from 'uhk-common';
+import { AppStartInfo, CommandLineArgs, HardwareConfiguration, Notification, type } from 'uhk-common';
 import { ElectronLogEntry } from '../../models/xterm-log';

 const PREFIX = '[app] ';
@@ -16,8 +16,8 @@ export const ActionTypes = {
    UNDO_LAST_SUCCESS: type(PREFIX + 'undo last action success'),
    DISMISS_UNDO_NOTIFICATION: type(PREFIX + 'dismiss notification action'),
    LOAD_HARDWARE_CONFIGURATION_SUCCESS: type(PREFIX + 'load hardware configuration success'),
-    UPDATE_AGENT_VERSION_INFORMATION: type(PREFIX + 'update agent version information'),
-    ELECTRON_MAIN_LOG_RECEIVED: type(PREFIX + 'Electron main log received')
+    ELECTRON_MAIN_LOG_RECEIVED: type(PREFIX + 'Electron main log received'),
+    OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window')
 };

 export class AppBootsrappedAction implements Action {
@@ -66,18 +66,18 @@ export class LoadHardwareConfigurationSuccessAction implements Action {
    constructor(public payload: HardwareConfiguration) {}
 }

-export class UpdateAgentVersionInformationAction implements Action {
-    type = ActionTypes.UPDATE_AGENT_VERSION_INFORMATION;
-
-    constructor(public payload: VersionInformation) {}
-}
-
 export class ElectronMainLogReceivedAction implements Action {
    type = ActionTypes.ELECTRON_MAIN_LOG_RECEIVED;

    constructor(public payload: ElectronLogEntry) {}
 }

+export class OpenUrlInNewWindowAction implements Action {
+    type = ActionTypes.OPEN_URL_IN_NEW_WINDOW;
+
+    constructor(public payload: string) {}
+}
+
 export type Actions
    = AppStartedAction
    | AppBootsrappedAction
@@ -88,6 +88,6 @@ export type Actions
    | UndoLastSuccessAction
    | DismissUndoNotificationAction
    | LoadHardwareConfigurationSuccessAction
-    | UpdateAgentVersionInformationAction
    | ElectronMainLogReceivedAction
+    | OpenUrlInNewWindowAction
    ;
--- a/packages/uhk-web/src/app/store/effects/app.ts
+++ b/packages/uhk-web/src/app/store/effects/app.ts
@@ -16,19 +16,15 @@ import {
    ApplyCommandLineArgsAction,
    AppStartedAction,
    DismissUndoNotificationAction,
+    OpenUrlInNewWindowAction,
    ProcessAppStartInfoAction,
    ShowNotificationAction,
-    UndoLastAction,
-    UpdateAgentVersionInformationAction
+    UndoLastAction
 } from '../actions/app';
 import { AppRendererService } from '../../services/app-renderer.service';
 import { AppUpdateRendererService } from '../../services/app-update-renderer.service';
-import {
-    ActionTypes as DeviceActions,
-    ConnectionStateChangedAction,
-    SaveToKeyboardSuccessAction
-} from '../actions/device';
-import { AppState, autoWriteUserConfiguration } from '../index';
+import { ActionTypes as DeviceActions, ConnectionStateChangedAction, SaveToKeyboardSuccessAction } from '../actions/device';
+import { AppState, autoWriteUserConfiguration, runningInElectron } from '../index';

@Injectable()
 export class ApplicationEffects {
@@ -66,8 +62,7 @@ export class ApplicationEffects {
                new ConnectionStateChangedAction({
                    connected: appInfo.deviceConnected,
                    hasPermission: appInfo.hasPermission
-                }),
-                new UpdateAgentVersionInformationAction(appInfo.agentVersionInfo)
+                })
            ];
        });

@@ -85,6 +80,19 @@ export class ApplicationEffects {
            }
        });

+    @Effect({dispatch: false}) openUrlInNewWindow$ = this.actions$
+        .ofType<OpenUrlInNewWindowAction>(ActionTypes.OPEN_URL_IN_NEW_WINDOW)
+        .withLatestFrom(this.store.select(runningInElectron))
+        .do(([action, inElectron]) => {
+            const url = action.payload;
+
+            if (inElectron) {
+                this.appRendererService.openUrl(url);
+            } else {
+                window.open(url, '_blank');
+            }
+        });
+
    constructor(private actions$: Actions,
                private notifierService: NotifierService,
                private appUpdateRendererService: AppUpdateRendererService,
--- a/packages/uhk-web/src/app/store/reducers/app.reducer.ts
+++ b/packages/uhk-web/src/app/store/reducers/app.reducer.ts
@@ -7,6 +7,7 @@ import { ActionTypes, ShowNotificationAction } from '../actions/app';
 import { ActionTypes as UserConfigActionTypes } from '../actions/user-config';
 import { ActionTypes as DeviceActionTypes } from '../actions/device';
 import { KeyboardLayout } from '../../keyboard/keyboard-layout.enum';
+import { getVersions } from '../../util';

 export interface State {
    started: boolean;
@@ -27,7 +28,8 @@ export const initialState: State = {
    autoWriteUserConfiguration: false,
    navigationCountAfterNotification: 0,
    runningInElectron: runInElectron(),
-    configLoading: true
+    configLoading: true,
+    agentVersionInfo: getVersions()
 };

 export function reducer(state = initialState, action: Action & { payload: any }) {
@@ -116,11 +118,6 @@ export function reducer(state = initialState, action: Action & { payload: any })
            };
        }

-        case ActionTypes.UPDATE_AGENT_VERSION_INFORMATION:
-            return {
-                ...state,
-                agentVersionInfo: action.payload
-            };
        default:
            return state;
    }
--- a/packages/uhk-web/src/app/util/index.ts
+++ b/packages/uhk-web/src/app/util/index.ts
@@ -1,2 +1,3 @@
 export * from './html-helper';
 export * from './validators';
+export * from './version-helper';
--- a/packages/uhk-web/src/app/util/version-helper.ts
+++ b/packages/uhk-web/src/app/util/version-helper.ts
@@ -0,0 +1,22 @@
+import { VersionInformation } from 'uhk-common';
+
+const collectVersions = (): VersionInformation => {
+    const pkgJson = require('../../../../../package.json');
+    return {
+        version: pkgJson['version'],
+        firmwareVersion: pkgJson['firmwareVersion'],
+        deviceProtocolVersion: pkgJson['deviceProtocolVersion'],
+        moduleProtocolVersion: pkgJson['moduleProtocolVersion'],
+        userConfigVersion: pkgJson['userConfigVersion'],
+        hardwareConfigVersion: pkgJson['hardwareConfigVersion']
+    };
+};
+
+let versions: VersionInformation;
+
+export const getVersions = (): VersionInformation => {
+    if (!versions) {
+        versions = collectVersions();
+    }
+    return versions;
+};
--- a/packages/uhk-web/src/styles/uhk-icons/uhk-css.svg
+++ b/packages/uhk-web/src/styles/uhk-icons/uhk-css.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" viewBox="0 0 16 16" id="icon-0401-usb-stick" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM8.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/><path d="M11.5 5H11V.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V5h-.5a.5.5 0 0 0-.5.5v9.375c1 1.5 8 1.5 9 0V5.5a.5.5 0 0 0-.5-.5zM5 13.5a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0v6zM10 5H5V1h5v4z"/></svg></svg>
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="31" height="16" viewBox="0 0 31 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" viewBox="0 0 16 16" id="icon-0401-usb-stick" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM8.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5z"/><path d="M11.5 5H11V.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5V5h-.5a.5.5 0 0 0-.5.5v9.375c1 1.5 8 1.5 9 0V5.5a.5.5 0 0 0-.5-.5zM5 13.5a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0v6zM10 5H5V1h5v4z"/></svg><svg width="15" height="15" viewBox="0 0 15 15" id="icon-agent-icon" x="16" xmlns="http://www.w3.org/2000/svg"><path fill="#333" d="M3 0C1.338 0 0 1.338 0 3v9c0 1.662 1.338 3 3 3h9c1.662 0 3-1.338 3-3V3c0-1.662-1.338-3-3-3H3zM1.375 3.75a.36.36 0 0 1 .125 0H6c.375 0 .75.375.75.375s.375.375.75.375.75-.375.75-.375.375-.375.75-.375h4.5c.75 0 .75.75.75.75V6c0 2.25-1.5 2.25-1.5 2.25H9c-.375 0-.75-1.125-.75-1.125S7.875 6 7.5 6s-.75 1.125-.75 1.125S6.375 8.25 6 8.25H2.25S.75 8.25.75 6V4.5c0-.562.414-.715.625-.75z"/></svg></svg>
--- a/packages/uhk-web/src/styles/uhk-icons/uhk-icon.scss
+++ b/packages/uhk-web/src/styles/uhk-icons/uhk-icon.scss
@@ -6,3 +6,8 @@
    @extend %svg-common;
    background-position: 0 0;
 }
+
+.uhk-icon-agent-icon {
+    @extend %svg-common;
+    background-position: 100% 0;
+}
--- a/packages/uhk-web/src/svgs/icons/agent-icon.svg
+++ b/packages/uhk-web/src/svgs/icons/agent-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
+<path fill="#333333" d="M3,0C1.338,0,0,1.338,0,3v9c0,1.662,1.338,3,3,3h9c1.662,0,3-1.338,3-3V3c0-1.662-1.338-3-3-3H3z
+	 M1.375,3.75c0.07-0.012,0.125,0,0.125,0H6c0.375,0,0.75,0.375,0.75,0.375S7.125,4.5,7.5,4.5s0.75-0.375,0.75-0.375
+	S8.625,3.75,9,3.75h4.5c0.75,0,0.75,0.75,0.75,0.75V6c0,2.25-1.5,2.25-1.5,2.25H9c-0.375,0-0.75-1.125-0.75-1.125S7.875,6,7.5,6
+	S6.75,7.125,6.75,7.125S6.375,8.25,6,8.25H2.25c0,0-1.5,0-1.5-2.25V4.5C0.75,3.938,1.164,3.785,1.375,3.75z"/>
+</svg>
--- a/scripts/download-firmware.js
+++ b/scripts/download-firmware.js
@@ -35,7 +35,7 @@ async function downloadFile(url, output) {
 }

 (async function main() {
-    const agentJson = require('../packages/uhk-agent/src/package.json');
+    const agentJson = require('../package.json');

    const extractedFirmwareDir = path.join(__dirname, '../tmp/packages/firmware');
    await fse.emptyDir(extractedFirmwareDir);