Update hdf2html mapper

apps/frontend/package.json

@@ -121,6 +121,7 @@
     "@vue/test-utils": "^1.0.3",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
+    "html-loader": "^5.0.0",
     "jest": "^27.0.6",
     "jest-useragent-mock": "^0.1.1",
     "sinon": "^18.0.0",

libs/hdf-converters/.gitignore

@@ -3,3 +3,4 @@ converted_jsons
 lib
 mitre-hdf-converters-v*.tgz
 sample_jsons/*/output_report/*.xml
+*.css

libs/hdf-converters/package.json

@@ -8,16 +8,17 @@
   ],
   "main": "src/index.ts",
   "publishConfig": {
-    "main": "lib/index.js"
+    "main": "lib/bundle.js"
   },
   "scripts": {
     "prepack": "yarn build && node prepack.js",
     "postpack": "run-script-os",
     "postpack:darwin:linux": "mv package.json.orig package.json",
     "postpack:win32": "move package.json.orig package.json",
-    "build": "run-script-os",
-    "build:darwin:linux": "../../node_modules/.bin/tsc -p ./tsconfig.build.json && cp -R ./data ./lib",
-    "build:win32": "../../node_modules/.bin/tsc -p ./tsconfig.build.json && xcopy data lib",
+    "build": "yarn build:tailwind && webpack --config ./webpack.config.js --mode production && run-script-os",
+    "build:tailwind": "tailwindcss -i ./tailwind.css -o ./src/converters-from-hdf/html/style.css --minify",
+    "build:darwin:linux": "cp -R ./data ./lib",
+    "build:win32": "xcopy data lib",
     "lint": "eslint \"**/*.ts\" --fix",
     "lint:ci": "eslint \"**/*.ts\" --max-warnings 0",
     "test": "jest",
@@ -51,7 +52,7 @@
     "run-script-os": "^1.1.6",
     "semver": "^7.6.0",
     "tailwindcss": "^3.3.3",
-    "tw-elements": "^1.0.0-beta2",
+    "tw-elements": "^1.1.0",
     "winston": "^3.6.0",
     "xml-formatter": "^3.6.2",
     "xml-parser-xo": "^4.1.1",
@@ -62,11 +63,16 @@
     "@types/jest": "^27.0.0",
     "@types/lodash": "^4.14.161",
     "@types/node": "^20.1.0",
+    "html-loader": "^5.0.0",
     "jest": "^27.0.6",
     "quicktype": "^15.0.260",
+    "raw-loader": "^4.0.2",
     "ts-jest": "^29.1.0",
+    "ts-loader": "^9.5.1",
     "tsx": "^4.7.1",
-    "typedoc": "^0.25.0"
+    "typedoc": "^0.25.0",
+    "webpack": "^5.92.0",
+    "webpack-cli": "^5.1.4"
   },
   "jest": {
     "moduleNameMapper": {

libs/hdf-converters/prepack.js

@@ -7,4 +7,4 @@ const input = JSON.parse(fs.readFileSync(packageFile, 'utf8'))
 
 input.main = 'lib/index.js'
 
-fs.writeFileSync(packageFile, JSON.stringify(input, null, 2))
+fs.writeFileSync(packageFile, JSON.stringify(input, null, 2))

libs/hdf-converters/src/converters-from-hdf/html/reverse-html-mapper.ts

@@ -7,7 +7,7 @@ import {
   mdiEqualBox,
   mdiMinusCircle
 } from '@mdi/js';
-import axios from 'axios';
+import fs from 'fs';
 import {
   ContextualizedControl,
   ContextualizedEvaluation,
@@ -24,6 +24,11 @@ import {
   IResultSeverity,
   IResultStatus
 } from './html-types';
+import path from 'path';
+import axios from 'axios';
+//import myHtml from './template.html';
+const myHtml = require('./template.html')
+//import myCss from './style.css';
 
 type InputData = {
   data: ContextualizedEvaluation | string;
@@ -40,7 +45,7 @@ type ProcessedData = {
 };
 
 // All selectable export types for an HTML export
-enum FileExportTypes {
+export enum FileExportTypes {
   Executive = 'Executive',
   Manager = 'Manager',
   Administrator = 'Administrator'
@@ -517,29 +522,58 @@ export class FromHDFToHTMLMapper {
     return text;
   }
 
-  // Prompt HTML generation from data pulled from file during constructor initialization
-  // Requires path to prompt location of needed files relative to function call location
-  async toHTML(path: string): Promise<string> {
+  /** Prompt HTML generation from data pulled from file during constructor initialization
+  @param dependencyDir Optional path for if template dependencies are stored on server **/
+  async toHTML(dependencyDir?: string): Promise<string> {
     // Pull export template + styles and create outputData object containing data to fill template with
-    const templateRequest = axios.get<string>(`${path}template.html`);
-    const tailwindStylesRequest = axios.get<string>(`${path}style.css`);
-    const tailwindElementsRequest = axios.get<string>(
-      `${path}tw-elements.min.js`
-    );
-    const responses = await axios.all([
-      templateRequest,
-      tailwindStylesRequest,
-      tailwindElementsRequest
-    ]);
 
-    const template = responses[0].data;
-    this.outputData.tailwindStyles = responses[1].data;
-    // Remove source map reference in TW Elements library
-    this.outputData.tailwindElements = responses[2].data.replace(
-      '//# sourceMappingURL=tw-elements.umd.min.js.map',
-      ''
-    );
+    let template: string;
+    if (dependencyDir) {
+      const templateRequest = axios.get<string>(
+        `${dependencyDir}template.html`
+      );
+      const tailwindStylesRequest = axios.get<string>(
+        `${dependencyDir}style.css`
+      );
+      const tailwindElementsRequest = axios.get<string>(
+        `${dependencyDir}tw-elements.min.js`
+      );
+      const responses = await axios.all([
+        templateRequest,
+        tailwindStylesRequest,
+        tailwindElementsRequest
+      ]);
+
+      template = responses[0].data;
+      this.outputData.tailwindStyles = responses[1].data;
+      // Remove source map reference in TW Elements library
+      this.outputData.tailwindElements = responses[2].data.replace(
+        '//# sourceMappingURL=tw-elements.umd.min.js.map',
+        ''
+      );
+    } else if (!('readFileSync' in fs)) {
+      throw new Error(
+        'Cannot access server files from client. Please specify path to template files within the <project-root>/public/ folder'
+      );
+    } else {
+      template = fs
+        .readFileSync(path.join(__dirname, 'template.html'), 'utf8')
+        .toString();
+      require.resolve('tw-elements/dist/js/tw-elements.umd.min.js');
+      this.outputData.tailwindStyles = fs
+        .readFileSync(path.join(__dirname, 'style.css'), 'utf8')
+        .toString();
+      this.outputData.tailwindElements = fs
+        .readFileSync(
+          require.resolve('tw-elements/dist/js/tw-elements.umd.min.js'),
+          'utf8'
+        )
+        .toString()
+        .replace('//# sourceMappingURL=tw-elements.umd.min.js.map', '');
+    }
+
     // Render template and return generated HTML file
-    return Mustache.render(template, this.outputData);
+    //return Mustache.render(template, this.outputData);
+    return myHtml + " this came from here";
   }
 }

libs/hdf-converters/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [
+    './src/converters-from-hdf/html/template.html',
+    './node_modules/tw-elements/dist/js/**/*.js'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: [require('tw-elements/dist/plugin.cjs')]
+};

libs/hdf-converters/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

libs/hdf-converters/test/mappers/reverse/html_reverse_mapper.spec.ts

@@ -0,0 +1,68 @@
+import fs from 'fs';
+import {FileExportTypes, FromHDFToHTMLMapper} from '../../../index';
+//import {version as hdfConvertersVersion} from '../../../package.json';
+
+describe('HTML Reverse Mapper', () => {
+  it('Successfully converts RHEL7 HDF into HTML (administrator output type)', () => {
+    const inputData = [
+      {
+        data: fs.readFileSync(
+          'sample_jsons/caat_reverse_mapper/sample_input_report/red_hat_good.json',
+          {encoding: 'utf-8'}
+        ),
+        fileName: 'red_hat_good.json',
+        fileID: '0'
+      }
+    ];
+    const mapper = new FromHDFToHTMLMapper(
+      inputData,
+      'Administrator' as FileExportTypes
+    );
+
+    const converted = mapper.toHTML();
+    const expected = fs.readFileSync(
+      'sample_jsons/html_reverse_mapper/red_hat_good_html.html',
+      'utf-8'
+    );
+
+    converted.then((c) => {
+      expect(c).toEqual(expected);
+    });
+  });
+
+  it('Successfully combines two HDF inputs into a single output html (manager output type)', () => {
+    const inputData = [
+      {
+        data: fs.readFileSync(
+          'sample_jsons/caat_reverse_mapper/sample_input_report/triple_overlay_profile_example.json',
+          {encoding: 'utf-8'}
+        ),
+        fileName: 'triple_overlay_profile_example.json',
+        fileID: '0'
+      },
+      {
+        data: fs.readFileSync(
+          'sample_jsons/caat_reverse_mapper/sample_input_report/red_hat_good.json',
+          {encoding: 'utf-8'}
+        ),
+        fileName: 'red_hat_good.json',
+        fileID: '1'
+      }
+    ];
+
+    const mapper = new FromHDFToHTMLMapper(
+      inputData,
+      'Manager' as FileExportTypes
+    );
+
+    const converted = mapper.toHTML();
+
+    const expected = fs.readFileSync(
+      'sample_jsons/html_reverse_mapper/combined_hdf_output_html.html',
+      'utf-8'
+    );
+    converted.then((c) => {
+      expect(c).toEqual(expected);
+    });
+  });
+});

libs/hdf-converters/tsconfig.json

@@ -10,6 +10,7 @@
     "outDir": "./lib",
     "strict": true,
     "esModuleInterop": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "declaration": true
   }
 }

libs/hdf-converters/types/templates.ts

@@ -0,0 +1,17 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+declare module '*.css' { 
+    const content: string;
+    export default content;
+}
+
+/*declare var require: {
+    <T>(path: string): T;
+    (paths: string[], callback: (...modules: any[]) => void): void;
+    ensure: (
+      paths: string[],
+      callback: (require: <T>(path: string) => T) => void
+    ) => void;
+  };*/

libs/hdf-converters/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+
+module.exports = {
+    target: 'node',
+    entry: './index.ts',
+    module: {
+      rules: [
+        {
+            test: /\.ts$/,
+            use: [
+                {
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: 'tsconfig.build.json'
+                    }
+                }
+            ],
+            exclude: /node_modules/
+        },
+        {
+            test: /\.html$/i,
+            loader: "html-loader",
+        },
+        {
+            test: /\.css$/i,
+            type: 'asset/resource'            
+        }
+      ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.html', '.css'] // might need .html to generate the file
+        //extensions: ['.html'] // might need .html to generate the file
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'lib')
+    }
+};

webpack.config.js

@@ -0,0 +1,27 @@
+const path = require("path");
+
+module.exports = {
+    target: "node",
+    entry: './index.ts',
+    module: {
+      rules: [
+        {
+            test: /\.html$/,
+            use: 'html-loader',
+            exclude: /node_modules/
+        },
+        {
+            test: /\.ts?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/
+        }
+      ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.html']
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'lib')
+    }
+};