Skip to content

Quickstart - To Bundle AuditLog control

This document shows how to bundle only Audit Log control and display it on a sample html page for testing.

  • How to customize the control
  • How to create a bundle for only auditlog control
  • How to add to sample html file
  • How to add a new language for Internalization

Prerequisites

In order to deploy and make changes, the following tools and application has to be installed on your development machine - Git - Visual Studio Code or any other IDE - Node.js - MPS stands for Management Presence Server - Build and deploy MPS MicroService locally - Intel AMT device is configured and connected to MPS. See the MPS for documentation. - Chrome Browser

Download and Install MPS UI Toolkit

At a command prompt, run the following commands: 

git clone https://github.com/open-amt-cloud-toolkit/ui-toolkit
cd UI_Toolkit
npm install

Customize the control

To add new changes and test the changes instantly before bundling the control, webpack dev server can be used

After making the changes, open a command prompt and navigate to the root of ui-toolkit, run the below command.

npm start
  • Open the browser and navigate to http://localhost:8080/auditLog.htm?deviceId=&server=

Note: By default webpack dev server runs on port 8080. If port 8080 is already in use, webpack automatically runs on the next immediate available port

Create Bundle for AuditLog

At a command prompt navigate to the root of UI_Toolkit, run the below command.

Note: Remove or rename the existing auditlog.core.min.js in dist/ 

npm run build
A new auditlog.core.min.js will be created in dist/ directory.

To bundle the audit log control without node_modules, run the below command in a command prompt on the root of ui-toolkit,

npm run built-ext
Note: The bundle generated using build-ext command can be used in react apps as an independent control

Add to sample html page

To display the auditlog control on a sample web page, update following changes to the existing src/sample/sampleAuditLog.htm page.

<body>
<div id="auditlog"></div>
<script src="../../dist/auditlog.core.min.js"></script>
</body>

Test the sample page

At a command prompt navigate to the root of UI_Toolkit, run the below command. 

npx serve
Open Chrome browser, navigate to the following url 
http://<localhost>:5000/src/sample/sampleAuditLog.htm?deviceId=<device GUID>&server=<mps IPaddress>:<mps port>
You will see the errors in the following scenario's: - compilation errors if ui-toolkit has not downloaded and installed to your react app. - MPS server not running - MPS server running and device not connected.

Add a new Language for Internationalization

Please refer to Localization docs