@device-management-toolkit/ui-toolkit-react 4.0.2

package/README.md

@@ -0,0 +1,81 @@
+# UI Toolkit React
+
+![CodeQL](https://img.shields.io/github/actions/workflow/status/device-management-toolkit/ui-toolkit-react/codeql-analysis.yml?style=for-the-badge&label=CodeQL&logo=github)
+![Build](https://img.shields.io/github/actions/workflow/status/device-management-toolkit/ui-toolkit-react/ci.yml?style=for-the-badge&logo=github)
+![Codecov](https://img.shields.io/codecov/c/github/device-management-toolkit/ui-toolkit-react?style=for-the-badge&logo=codecov)
+[![OSSF-Scorecard Score](https://img.shields.io/ossf-scorecard/github.com/device-management-toolkit/ui-toolkit-react?style=for-the-badge&label=OSSF%20Score)](https://api.securityscorecards.dev/projects/github.com/open-amt-cloud-toolkit/ui-toolkir-react)
+[![Discord](https://img.shields.io/discord/1063200098680582154?style=for-the-badge&label=Discord&logo=discord&logoColor=white&labelColor=%235865F2&link=https%3A%2F%2Fdiscord.gg%2FDKHeUNEWVH)](https://discord.gg/DKHeUNEWVH)
+
+
+> Disclaimer: Production viable releases are tagged and listed under 'Releases'.  All other check-ins should be considered 'in-development' and should not be used in production
+
+> IMPORTANT: For now, we are continuing to publish both @device-management-toolkit/ui-toolkit-react and @open-amt-cloud-toolkit/ui-toolkit-react npm packages to avoid a breaking change. Please update your package.json at your earliest convenience for when we cease to publish @open-amt-cloud-toolkit/ui-toolkit-react. This is in effort to support the renaming of the toolkit.
+
+
+The UI Toolkit provides prebuilt, React-based components for integrating remote management features such as a keyboard, video, mouse (KVM) control into a web-based management console UI. The controls have a reference UI and layout that can be customized further to seamlessly integrate with existing management console solutions.
+
+**For detailed documentation** about [Getting Started with the UI Toolkit](https://device-management-toolkit.github.io/docs/2.0/Tutorials/uitoolkit) or other features of the Device Management Toolkit, see the [docs](https://device-management-toolkit.github.io/docs/).
+
+
+## Prerequisites
+
+To succesfully deploy the UI Toolkit using React, the following software must be installed on your development system:
+
+- [Node.js* LTS 18.x.x or newer](https://nodejs.org/en/)
+- [git](https://git-scm.com/downloads)
+- [Visual Studio Code](https://code.visualstudio.com/) or any other IDE of choice
+
+
+## Create a New React App
+
+The React app can be created in any preferred development directory. The MPS can continue to run while creating and running the app.
+
+1. In a Command Prompt or Terminal, go to your preferred development directory. 
+
+2. Run the following commands to create sample React app named `my-app`.
+
+    ``` bash
+    npx create-react-app my-app && cd my-app
+    ```
+
+## Add UI Toolkit
+
+1. Run the following command to add the UI Toolkit and install the required dependencies:
+
+    ``` bash
+    npm install @device-management-toolkit/ui-toolkit-react
+    ```
+
+2. Run the following commands to start the web UI locally:
+
+    ``` bash
+    npm start
+    ```
+
+3. By default, React apps run on port `3000`. If port `3000` is already used by the MPS server or any other application, you'll be prompted to use another port. If this happens, enter 'Y'.
+
+    Sample Output:
+
+    ```
+    You can now view my-app in the browser.
+    Local: http://localhost:3000
+    On Your Network: http://172.16.17.4:3000
+    ```
+
+
+## Additional Resources
+
+- For detailed documentation and Getting Started, [visit the docs site](https://device-management-toolkit.github.io/docs).
+
+- Looking to contribute? [Find more information here about contribution guidelines and practices](.\CONTRIBUTING.md).
+
+- Find a bug? Or have ideas for new features? [Open a new Issue](https://github.com/device-management-toolkit/ui-toolkit-react/issues).
+
+- Need additional support or want to get the latest news and events about Open AMT? Connect with the team directly through Discord.
+
+    [![Discord Banner 1](https://discordapp.com/api/guilds/1063200098680582154/widget.png?style=banner2)](https://discord.gg/DKHeUNEWVH)
+
+## License Note
+
+If you are distributing the FortAwesome Icons, please provide attribution to the source per the [CC-by 4.0](https://creativecommons.org/licenses/by/4.0/deed.ast) license obligations.
+

package/dist/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@device-management-toolkit/ui-toolkit-react",
+  "version": "4.0.2",
+  "description": "React UI controls for Intel AMT features",
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "npx mkdirp dist && cp package.json dist",
+    "start": "webpack serve --config webpack.config.dev.js",
+    "build": "webpack --config webpack.config.prod.js",
+    "build-ext": "npm run build-types && webpack --config webpack.config.externals.js",
+    "lint": "eslint . --ext .ts",
+    "test": "jest --detectOpenHandles --logHeapUsage --ci --no-cache --runInBand --updateSnapshot",
+    "coverage": "jest --coverage  --detectOpenHandles --logHeapUsage --ci --no-cache --runInBand ",
+    "test-kvm": "tsc && node ./dist/test/kvmui.test.ws.js",
+    "build-types": "tsc --emitDeclarationOnly -p tsconfig.build.json"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/device-management-toolkit/ui-toolkit-react/issues"
+  },
+  "homepage": "https://github.com/device-management-toolkit/ui-toolkit-react#readme",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@device-management-toolkit/ui-toolkit": "^3.3.3",
+    "@xterm/xterm": "^5.5.0",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "md5": "^2.2.1",
+    "moment": "^2.29.4",
+    "react-i18next": "^15.5.2",
+    "sass": "^1.56.1",
+    "styled-components": "^6.1.18",
+    "winston": "^3.0.0",
+    "ws": "^8.18.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.3",
+    "@types/md5": "^2.3.2",
+    "@types/node": "^22.15.23",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/ws": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "css-loader": "^7.1.1",
+    "eslint": "^8.27.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "filereader": "^0.10.3",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1  ",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-junit": "^16.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass-loader": "^16.0.0",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "typescript": "^5.0.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.0.1",
+    "webpack-node-externals": "^3.0.0"
+  }
+}

package/i18n.d.ts

@@ -0,0 +1,6 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+import i18n from 'i18next';
+export default i18n;

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@device-management-toolkit/ui-toolkit-react",
+  "version": "4.0.2",
+  "description": "React UI controls for Intel AMT features",
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "npx mkdirp dist && cp package.json dist",
+    "start": "webpack serve --config webpack.config.dev.js",
+    "build": "webpack --config webpack.config.prod.js",
+    "build-ext": "npm run build-types && webpack --config webpack.config.externals.js",
+    "lint": "eslint . --ext .ts",
+    "test": "jest --detectOpenHandles --logHeapUsage --ci --no-cache --runInBand --updateSnapshot",
+    "coverage": "jest --coverage  --detectOpenHandles --logHeapUsage --ci --no-cache --runInBand ",
+    "test-kvm": "tsc && node ./dist/test/kvmui.test.ws.js",
+    "build-types": "tsc --emitDeclarationOnly -p tsconfig.build.json"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/device-management-toolkit/ui-toolkit-react/issues"
+  },
+  "homepage": "https://github.com/device-management-toolkit/ui-toolkit-react#readme",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@device-management-toolkit/ui-toolkit": "^3.3.3",
+    "@xterm/xterm": "^5.5.0",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "md5": "^2.2.1",
+    "moment": "^2.29.4",
+    "react-i18next": "^15.5.2",
+    "sass": "^1.56.1",
+    "styled-components": "^6.1.18",
+    "winston": "^3.0.0",
+    "ws": "^8.18.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.3",
+    "@types/md5": "^2.3.2",
+    "@types/node": "^22.15.23",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/ws": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "css-loader": "^7.1.1",
+    "eslint": "^8.27.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "filereader": "^0.10.3",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1  ",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-junit": "^16.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass-loader": "^16.0.0",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "typescript": "^5.0.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.0.1",
+    "webpack-node-externals": "^3.0.0"
+  }
+}

package/reactjs/IDER/AttachDiskImage.d.ts

@@ -0,0 +1,18 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2023
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+import React from 'react';
+export declare class AttachDiskImage extends React.Component<{
+    deviceId: string | null;
+    mpsServer: string | null;
+    authToken?: string;
+}, {
+    selectedFile: File | null;
+    iderState: number;
+}> {
+    constructor(props: any);
+    handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    updateIderState: (newState: any) => void;
+    render(): React.JSX.Element;
+}

package/reactjs/IDER/ider.d.ts

@@ -0,0 +1,40 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2023
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+import { AMTRedirector, AMTIDER } from '@device-management-toolkit/ui-toolkit/core';
+import React from 'react';
+export interface IDERProps {
+    iderState: number;
+    updateIderState: (newState: number) => void;
+    iderData: IDERData | null;
+    cdrom: File | null;
+    floppy: File | null;
+    mpsServer: string | null;
+    authToken?: string;
+    deviceId: string | null;
+}
+export interface IDERState {
+    iderState: number;
+    iderData: IDERData | null;
+}
+export interface IDERData {
+    floppyRead: number;
+    floppyWrite: number;
+    cdromRead: number;
+    cdromWrite: number;
+}
+export declare class IDER extends React.Component<IDERProps, IDERState> {
+    redirector: AMTRedirector | null;
+    ider: AMTIDER | null;
+    constructor(props: IDERProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onConnectionStateChange: (redirector: any, state: number) => void;
+    componentDidUpdate(prevProps: any): void;
+    startIder: () => void;
+    stopIder(): void;
+    cleanup(): void;
+    iderSectorStats(mode: any, dev: any, total: any, start: any, len: any): void;
+    render(): null;
+}

package/reactjs/IDER/index.d.ts

@@ -0,0 +1,5 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2023
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+export {};

package/reactjs/KVM/ConnectButton.d.ts

@@ -0,0 +1,13 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ **********************************************************************/
+import React from 'react';
+import './ConnectButton.scss';
+export interface ConnectProps {
+    kvmstate: number;
+    handleConnectClick: (e: any) => void;
+}
+export declare class ConnectButton extends React.Component<ConnectProps, {}> {
+    render(): React.ReactNode;
+}

package/reactjs/KVM/DesktopSettings.d.ts

@@ -0,0 +1,17 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ **********************************************************************/
+import React from 'react';
+export interface IDesktopSettings {
+    changeDesktopSettings: (settings: any) => void;
+    getConnectState: () => number;
+}
+export declare class DesktopSettings extends React.Component<IDesktopSettings> {
+    desktopsettings: {
+        encoding: number;
+    };
+    constructor(props: IDesktopSettings);
+    changeEncoding(encoding: number): void;
+    render(): React.ReactNode;
+}

package/reactjs/KVM/EncodingOptions.d.ts

@@ -0,0 +1,17 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ **********************************************************************/
+import React from 'react';
+import './EncodingOptions.scss';
+export interface IEncodingOptions {
+    changeEncoding: (encoding: number) => void;
+    getConnectState: () => number;
+}
+export declare class EncodingOptions extends React.Component<IEncodingOptions, {
+    value: number;
+}> {
+    constructor(props: IEncodingOptions);
+    onEncodingChange(e: any): void;
+    render(): React.ReactNode;
+}

package/reactjs/KVM/Header.d.ts

@@ -0,0 +1,17 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ **********************************************************************/
+import React from 'react';
+import './Header.scss';
+export interface IHeaderProps {
+    kvmstate: number;
+    deviceId: string | null;
+    server: string | null;
+    handleConnectClick: (e: any) => void;
+    changeDesktopSettings: (settings: any) => void;
+    getConnectState: () => number;
+}
+export declare class Header extends React.Component<IHeaderProps> {
+    render(): JSX.Element;
+}

package/reactjs/KVM/PureCanvas.d.ts

@@ -0,0 +1,19 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ * Author : Ramu Bachala
+ **********************************************************************/
+import React from 'react';
+import './PureCanvas.scss';
+export interface PureCanvasProps {
+    contextRef: (ctx: CanvasRenderingContext2D) => void;
+    mouseDown: (event: React.MouseEvent) => void;
+    mouseUp: (event: React.MouseEvent) => void;
+    mouseMove: (event: React.MouseEvent) => void;
+    canvasHeight: string;
+    canvasWidth: string;
+}
+export declare class PureCanvas extends React.Component<PureCanvasProps, {}> {
+    shouldComponentUpdate(): boolean;
+    render(): React.ReactNode;
+}

package/reactjs/KVM/UI.d.ts

@@ -0,0 +1,45 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ * Author : Ramu Bachala
+ **********************************************************************/
+import { IDataProcessor, IKvmDataCommunicator, Desktop, MouseHelper, KeyBoardHelper } from '@device-management-toolkit/ui-toolkit/core';
+import React from 'react';
+import './UI.scss';
+export interface KVMProps {
+    deviceId: string | null;
+    mpsServer: string | null;
+    mouseDebounceTime: number;
+    canvasHeight: string;
+    canvasWidth: string;
+    autoConnect?: boolean;
+    authToken: string;
+}
+export declare class KVM extends React.Component<KVMProps, {
+    kvmstate: number;
+    encodingOption: number;
+}> {
+    module: Desktop | any;
+    dataProcessor: IDataProcessor | any;
+    redirector: IKvmDataCommunicator | any;
+    mouseHelper: MouseHelper | any;
+    keyboard: KeyBoardHelper | any;
+    desktopSettingsChange: boolean;
+    ctx: CanvasRenderingContext2D;
+    fr: FileReader;
+    constructor(props: KVMProps);
+    saveContext(ctx: CanvasRenderingContext2D): void;
+    init(): void;
+    cleanUp(): void;
+    componentWillUnmount(): void;
+    onRedirectorError(): void;
+    reset(): void;
+    OnConnectionStateChange(redirector: any, state: number): any;
+    changeDesktopSettings(settings: any): void;
+    startKVM(): void;
+    stopKVM(): void;
+    getRenderStatus(): any;
+    handleConnectClick(e: any): void;
+    componentDidUpdate(prevProps: any): void;
+    render(): React.ReactNode;
+}

package/reactjs/KVM/index.d.ts

@@ -0,0 +1 @@
+export {};

package/reactjs/SerialOverLAN/Sol.d.ts

@@ -0,0 +1,53 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+import React from 'react';
+import '@xterm/xterm/css/xterm.css';
+import './sol.scss';
+export interface SOLProps {
+    deviceId: string | null;
+    mpsServer: string | null;
+    autoConnect?: boolean;
+    authToken: string;
+}
+export interface SOLStates {
+    isConnected: boolean;
+    SOLstate: number;
+    powerState: number;
+    showSuccess: boolean;
+    message: string;
+    isSelected: boolean;
+    type: string;
+    solNotEnabled: string;
+    deviceOnSleep: string;
+    isPowerStateLoaded: boolean;
+}
+/** container class for SOL */
+export declare class Sol extends React.Component<SOLProps, SOLStates> {
+    redirector: any;
+    terminal: any;
+    logger: any;
+    dataProcessor: any;
+    callback: any;
+    term: any;
+    fr: FileReader;
+    constructor(props: SOLProps);
+    init: () => void;
+    cleanUp: () => void;
+    componentDidMount(): void;
+    /** write the processed data from webscoket in to xterm */
+    handleWriteToXterm: (str: any) => any;
+    handleClearTerminal: () => any;
+    /** capture the data on xterm key press */
+    handleKeyPress: (domEvent: any) => any;
+    handleKeyDownPress: (domEvent: any) => any;
+    startSOL: () => void;
+    stopSOL: () => void;
+    handleSOLConnect: (e: any) => void;
+    onTerminalStateChange: (redirector: any, state: number) => void;
+    /** callback functions from child components to update the state values */
+    handleFeatureStatus: (value: any) => void;
+    getSOLState: () => any;
+    render(): React.ReactNode;
+}

package/reactjs/SerialOverLAN/Terminal.d.ts

@@ -0,0 +1,16 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+import React from 'react';
+export interface IPropTerminal {
+    handleKeyPress: any;
+    xterm: any;
+    handleKeyDownPress: any;
+}
+declare class Term extends React.Component<IPropTerminal> {
+    mountedWorkaround: boolean;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}
+export default Term;

package/reactjs/SerialOverLAN/index.d.ts

@@ -0,0 +1,5 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+export {};

package/reactjs/services/HttpClient.d.ts

@@ -0,0 +1,10 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+export declare const HttpClient: {
+    get(url: string, options?: {}): Promise<any>;
+    post(url: string, body?: {}, options?: {}): Promise<any>;
+    delete(url: string, options?: {}): Promise<any>;
+    fetch(url: string, options?: {}): Promise<any>;
+};

package/reactjs/shared/Methods.d.ts

@@ -0,0 +1,13 @@
+/*********************************************************************
+* Copyright (c) Intel Corporation 2019
+* SPDX-License-Identifier: Apache-2.0
+**********************************************************************/
+/** function to get the static tranlation texts from translation.json
+ * @param: text - contains the path to the text in translation.json
+*/
+export declare const translateText: (text: string) => string;
+/** function to get the translation text when there are dynamic values to be rendered in translation
+ * @param: text - contains the path to the text in translation.json
+ * @param: translate - object containing dynamic values. The keys to be used inside translation.json
+ */
+export declare const translateDynamicText: (text: string, translate: any) => string;

package/reactjs/shared/Utilities.d.ts

@@ -0,0 +1,8 @@
+/*********************************************************************
+ * Copyright (c) Intel Corporation 2019
+ * SPDX-License-Identifier: Apache-2.0
+ **********************************************************************/
+/** utility function to join the css class names */
+export declare const joinClasses: (...classNames: any[]) => any;
+export declare const prepareHeaders: () => any;
+export declare const isFalsy: (value: any) => boolean;