@redhat-cloud-services/frontend-components-advisor-components 1.0.1 → 1.0.3

package/TemplateProcessor/TemplateProcessor.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var dot_1 = __importDefault(require("dot"));
+var marked_1 = require("marked");
+var sanitize_html_1 = __importStar(require("sanitize-html"));
+var DOT_SETTINGS = __assign(__assign({}, dot_1.default.templateSettings), { varname: 'pydata', strip: false });
+var TemplateProcessor = function (_a) {
+    var template = _a.template, definitions = _a.definitions, onError = _a.onError;
+    try {
+        var compiledDot = definitions ? dot_1.default.template(template, DOT_SETTINGS)(definitions) : template;
+        var compiledMd = (0, marked_1.marked)(compiledDot);
+        var sanitized = (0, sanitize_html_1.default)(compiledMd, {
+            allowedAttributes: { '*': ['href', 'target', 'class', 'style', 'rel'] },
+            allowedSchemes: ['https'],
+            transformTags: {
+                ul: (0, sanitize_html_1.simpleTransform)('ul', { class: 'pf-c-list', style: 'font-size: inherit' }),
+                a: (0, sanitize_html_1.simpleTransform)('a', { rel: 'noopener noreferrer', target: '_blank' }),
+            },
+        });
+        return (react_1.default.createElement("div", { dangerouslySetInnerHTML: {
+                __html: sanitized.replace(/<\/a>/gim, " <i class=\"fas fa-external-link-alt\"></i></a>"),
+            } }));
+    }
+    catch (error) {
+        console.warn(error, definitions, template);
+        onError && onError(error);
+        return (react_1.default.createElement("pre", null,
+            react_1.default.createElement("code", null, template)));
+    }
+};
+exports.default = TemplateProcessor;
+//# sourceMappingURL=TemplateProcessor.js.map

package/TemplateProcessor/TemplateProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateProcessor.js","sourceRoot":"","sources":["../src/TemplateProcessor/TemplateProcessor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,4CAAsB;AACtB,iCAAgC;AAChC,6DAA0D;AAQ1D,IAAM,YAAY,yBACb,aAAG,CAAC,gBAAgB,KACvB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,KAAK,GACb,CAAC;AAEF,IAAM,iBAAiB,GAAqC,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,OAAO,aAAA;IAC3F,IAAI;QACF,IAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,aAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/F,IAAM,UAAU,GAAG,IAAA,eAAM,EAAC,WAAW,CAAC,CAAC;QACvC,IAAM,SAAS,GAAG,IAAA,uBAAQ,EAAC,UAAU,EAAE;YACrC,iBAAiB,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE;YACvE,cAAc,EAAE,CAAC,OAAO,CAAC;YACzB,aAAa,EAAE;gBACb,EAAE,EAAE,IAAA,+BAAe,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC;gBAC9E,CAAC,EAAE,IAAA,+BAAe,EAAC,GAAG,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;aAC1E;SACF,CAAC,CAAC;QAEH,OAAO,CACL,uCACE,uBAAuB,EAAE;gBACvB,MAAM,EAAE,SAAS,CAAC,OAAO,CACvB,UAAU,EACV,iDAA+C,CAChD;aACF,GACD,CACH,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC3C,OAAO,IAAI,OAAO,CAAC,KAAc,CAAC,CAAC;QACnC,OAAO,CACL;YACE,4CAAO,QAAQ,CAAQ,CACnB,CACP,CAAC;KACH;AACH,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/TemplateProcessor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TemplateProcessor';
+export { default as TemplateProcessor } from './TemplateProcessor';

package/TemplateProcessor/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateProcessor = void 0;
+__exportStar(require("./TemplateProcessor"), exports);
+var TemplateProcessor_1 = require("./TemplateProcessor");
+Object.defineProperty(exports, "TemplateProcessor", { enumerable: true, get: function () { return __importDefault(TemplateProcessor_1).default; } });
+//# sourceMappingURL=index.js.map

package/TemplateProcessor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/TemplateProcessor/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,sDAAoC;AACpC,yDAAmE;AAA1D,uIAAA,OAAO,OAAqB"}

package/TemplateProcessor/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/TemplateProcessor/index.js","typings":"index.d.ts"}

package/ViewAffectedLink/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/ViewAffectedLink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/ViewAffectedLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC;AACnC,uDAAiE;AAAxD,qIAAA,OAAO,OAAoB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/ViewAffectedLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,qDAAmC;AACnC,uDAAiE;AAAxD,qIAAA,OAAO,OAAoB"}

package/common.d.ts

@@ -1,3 +1,7 @@
 import { RuleContentRhel, TopicRhel } from './types';
 export declare const barDividedList: (list: JSX.Element[]) => JSX.Element[];
 export declare const topicLinks: (rule: RuleContentRhel, topics: TopicRhel[], Link: any) => JSX.Element[];
+export declare const ExternalLink: ({ href, content }: {
+    href: string;
+    content: string;
+}) => JSX.Element;

package/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.topicLinks = exports.barDividedList = void 0;
+exports.ExternalLink = exports.topicLinks = exports.barDividedList = void 0;
 var react_1 = __importDefault(require("react"));
 var compact_1 = __importDefault(require("lodash/compact"));
 var intersection_1 = __importDefault(require("lodash/intersection"));
@@ -21,4 +21,12 @@ var topicLinks = function (rule, topics, Link) {
         : [];
 };
 exports.topicLinks = topicLinks;
+var ExternalLink = function (_a) {
+    var href = _a.href, content = _a.content;
+    return (react_1.default.createElement("a", { rel: "noopener noreferrer", target: "_blank", href: href },
+        content,
+        " ",
+        react_1.default.createElement("i", { className: "fas fa-external-link-alt" })));
+};
+exports.ExternalLink = ExternalLink;
 //# sourceMappingURL=common.js.map

package/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["src/common.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,2DAAqC;AACrC,qEAA+C;AAKxC,IAAM,cAAc,GAAG,UAAC,IAAmB;IAChD,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,OAAA,CAC3B,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;QACvB,OAAO;QACP,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,0CAAQ,SAAS,EAAC,iBAAiB,oBAA4B,CAC9E,CAClB,EAL4B,CAK5B,CAAC;AALF,CAKE,CAAC;AANQ,QAAA,cAAc,kBAMtB;AAEE,IAAM,UAAU,GAAG,UAAC,IAAqB,EAAE,MAAmB,EAAE,IAAS;IAC9E,OAAA,MAAM;QACJ,CAAC,CAAC,IAAA,iBAAO,EACL,MAAM,CAAC,GAAG,CACR,UAAC,KAAK;YACJ,OAAA,IAAA,sBAAY,EAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,CACjE,8BAAC,IAAI,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,kBAAW,KAAK,CAAC,IAAI,CAAE,IAAG,UAAG,KAAK,CAAC,IAAI,CAAE,CAAQ,CAC7E;QAFD,CAEC,CACJ,CACF;QACH,CAAC,CAAC,EAAE;AATN,CASM,CAAC;AAVI,QAAA,UAAU,cAUd"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["src/common.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,2DAAqC;AACrC,qEAA+C;AAKxC,IAAM,cAAc,GAAG,UAAC,IAAmB;IAChD,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,OAAA,CAC3B,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;QACvB,OAAO;QACP,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,0CAAQ,SAAS,EAAC,iBAAiB,oBAA4B,CAC9E,CAClB,EAL4B,CAK5B,CAAC;AALF,CAKE,CAAC;AANQ,QAAA,cAAc,kBAMtB;AAEE,IAAM,UAAU,GAAG,UAAC,IAAqB,EAAE,MAAmB,EAAE,IAAS;IAC9E,OAAA,MAAM;QACJ,CAAC,CAAC,IAAA,iBAAO,EACL,MAAM,CAAC,GAAG,CACR,UAAC,KAAK;YACJ,OAAA,IAAA,sBAAY,EAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,CACjE,8BAAC,IAAI,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,kBAAW,KAAK,CAAC,IAAI,CAAE,IAAG,UAAG,KAAK,CAAC,IAAI,CAAE,CAAQ,CAC7E;QAFD,CAEC,CACJ,CACF;QACH,CAAC,CAAC,EAAE;AATN,CASM,CAAC;AAVI,QAAA,UAAU,cAUd;AAEF,IAAM,YAAY,GAAG,UAAC,EAAoD;QAAlD,IAAI,UAAA,EAAE,OAAO,aAAA;IAA0C,OAAA,CACpF,qCAAG,GAAG,EAAC,qBAAqB,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI;QACpD,OAAO;;QAAE,qCAAG,SAAS,EAAC,0BAA0B,GAAG,CAClD,CACL;AAJqF,CAIrF,CAAC;AAJW,QAAA,YAAY,gBAIvB"}

package/cypress/cypress.webpack.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+
+module.exports = {
+  entry: '../src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        }
+      },
+      {
+        test: /\.s?[ac]ss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg)/,
+        type: 'asset/resource'
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

package/cypress/fixtures/messages.json

@@ -0,0 +1,16 @@
+{
+  "systemReboot": "System reboot is required.",
+  "knowledgebaseArticle": "Knowledgebase article",
+  "topicRelatedToRule": "Topics related to this recommendation",
+  "totalRisk": "Total risk",
+  "rulesDetailsTotalRiskBody": "The total risk of this remediation is low, based on the combination of likelihood and impact to remediate.",
+  "likelihoodLevel": "Low likelihood",
+  "likelihoodDescription": "The likelihood that this will be a problem is low.",
+  "impactLevel": "Low impact",
+  "impactDescription": "he impact of the problem would be low if it occurred.",
+  "riskOfChange": "Risk of change",
+  "riskOfChangeText": "The risk of change is low, because the change takes very little time to implement and there is minimal impact to system operations.",
+  "riskOfChangeLabel": "Low",
+  "ruleHelpful": "Is this recommendation helpful?",
+  "feedbackThankYou": "Thank you for your feedback!"
+}

package/cypress/fixtures/report.json

@@ -0,0 +1,39 @@
+{
+  "rule": {
+    "rule_id": "foobar_deprecated_something|FOOBAR_DEPRECATED_SOMETHING",
+    "node_id": "12345678",
+    "summary": "New Ansible Engine packages are inaccessible when dedicated Ansible repo is not enabled.\n",
+    "reason": "This system is running Red Hat Enterprise Linux with the following SAP\napplication{{?Object.keys(pydata.inst).length>=2}}s{{?}} but the `/etc/hosts`\nis not configured correctly, which results in some functions of SAP system failure.\n\n1. SAP applications running on this host.\n    {{~pydata.inst: e}}\n    * {{=e}}{{~}}\n1. Issues in the `/etc/hosts`:\n  {{?pydata.no_hn}}* The hostname of this host **{{=pydata.hostname}}** is not found.\n  {{?}}{{?pydata.line_127}}* The hostname of this host **{{=pydata.hostname}}** is associated with the IP address **127.0.0.1**\n    ~~~\n    {{~pydata.line_127: e}}{{=e}}\n    {{~}}\n    ~~~\n  {{?}}{{?pydata.line_hn}}* The FQDN is not in the second column or hostname is not followed\n    ~~~\n    {{~pydata.line_hn: e}}{{=e}}\n    {{~}}\n    ~~~\n  {{?}}{{?pydata.line_ip}}* The hostname of this host **{{=pydata.hostname}}** is associated with the IP address that does not belong to this host\n    ~~~\n    {{~pydata.line_ip: e}}{{=e}}\n    {{~}}\n    ~~~\n  {{?}}{{?pydata.before_local}}* The following {{?Object.keys(pydata.before_local).length>=2}}lines are{{??}}line is{{?}} before the line of **127.0.0.1** or the line of **{{=pydata.hostname}}**\n    ~~~\n    {{~pydata.before_local: e}}{{=e}}\n    {{~}}\n    ~~~{{?}}\n  {{?pydata.long_before_local}}\n  **Note:** There are more than 10 lines in the `/etc/hosts` impacted and only the first 10 are displayed here. Please check the full list of them manually in the `/etc/hosts`.\n  {{?}}\n \nThis host is running **kernel-{{=pydata.kernel}}** and {{?Object.keys(pydata.ipv6_dev_routes).length>1}}`IPv6` routes are added for IPv6 addresses, associated with the interfaces.{{??}}`IPv6` route is added for IPv6 address, associated with the interface.{{?}} Due to a known bug in the `kernel`, when `ip6_route_dev_notify` function receives a **NULL** pointer from `snmp6_alloc_dev` while unregistering the network device, kernel panic occurs. The `snmp6_alloc_dev` returns **NULL** when CPU allocation fails.\n\nThe following IPv6 enabled {{?Object.keys(pydata.ipv6_dev_routes).length>1}}interfaces are{{??}}interface is{{?}} present on this host:\n<table>\n  <tr>\n    <th>Interface</th>\n    <th>IPv6 Address</th>\n  </tr>\n{{ for (var key in pydata.ipv6_dev_routes) { }}\n<tr>\n    <td>{{=key}} </td>\n    <td>{{=pydata.ipv6_dev_routes[key]}} </td>\n</tr>\n{{ } }}\n</table>\n",
+    "more_info": "* For more information regarding the dedicated Ansible Engine channel, please refer to [Ansible deprecated in the Extras channel](https://access.redhat.com/articles/3359651). \n* For how to use the dedicated Ansible Engine channel, please refer to [How do I Download and Install Red Hat Ansible Engine?](https://access.redhat.com/articles/3174981).\n",
+    "resolution_set": [
+      {
+        "system_type": 105,
+        "resolution": "Red Hat recommends that you enable the dedicated Ansible repo and update `ansible` package to the latest version.\n  ~~~\n  # subscription-manager repos --enable rhel-7-server-ansible-2-rpms\n  # yum update ansible\n  ~~~\n",
+        "resolution_risk": {
+          "name": "Update Package",
+          "risk": 1
+        },
+        "has_playbook": true
+      }
+    ],
+    "total_risk": 2
+  },
+  "details": {
+    "type": "rule",
+    "package": "ansible-1.8.42-5.elre",
+    "kernel": "3.9.0-862.2.3.el1.x86_64",
+    "error_key": "FOOBAR_DEPRECATED_SOMETHING",
+    "rhsm_rset": null,
+    "ipv6_dev_routes": {
+      "eth0": "fe81::c547:c849:ee14:2bdc"
+    },
+    "fqdn": "iqe-patch-rhel-75-7c99fe69-eaca-2144-a7db-69c9c792ae",
+    "inst": ["D00", "D01", "D02"],
+    "rhel": "7.1",
+    "no_hn": true,
+    "hostname": "iqe-patch-rhel-42-7c22fe69-eaca-4242-a7db-69c913c792ae",
+    "subs": ["Applications"],
+    "mis_repos": ["rhel-sap-for-rhel-42-server-rpms"]
+  },
+  "resolution": "Red Hat recommends that you enable the dedicated Ansible repo and update `ansible` package to the latest version.\n  ~~~\n  # subscription-manager repos --enable rhel-7-server-ansible-2-rpms\n  # yum update ansible\n  ~~~\n \n {{?pydata.subs&&pydata.subs.indexOf('Solutions') != -1}}\nWhen running SAP HANA on RHEL it must be ensured that only OS packages provided\nfor the specific RHEL minor release are installed. For supportability it is\ntherefore required that only either the EUS or E4S repos are active on the\nsystem.\n{{?}}\nThe following {{?pydata.mis_repos.length>1}}repositories{{??}}repository{{?}} should be enabled on this host:\n{{~pydata.mis_repos: e}}* {{=e}}\n{{~}}\nRed Hat recommends that you perform the following steps to enable {{?pydata.mis_repos.length>1}}these repos{{??}}this repo{{?}}:\n1. Find the serial number for current subscription:\n  ~~~\n  # subscription-manager list --consumed\n  ~~~\n1. Remove the system from the current subscription:\n  ~~~\n  # subscription-manager remove --serial='SERIAL NUMBER'\n  ~~~\n1. Find the pool ID for the **RHEL for SAP** subscription:\n  ~~~\n  # subscription-manager list --available\n  ~~~\n1. Subscribe to **RHEL for SAP** using the pool ID:\n  ~~~\n  # subscription-manager attach --pool='XXXX'\n  ~~~\n1. Enable the recommended yum repositories:\n  ~~~\n  # subscription-manager repos{{~pydata.mis_repos: e}} --enable={{=e}}{{~}}\n  ~~~\n1. Review the yum repolist and ensure that **RHEL for SAP** is enabled:\n  ~~~\n  # yum repolist\n  ~~~\n"
+}

package/cypress/fixtures/rule.json

@@ -0,0 +1,18 @@
+{
+  "rule_id": "external.rules.rule|ERROR_KEY",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+  "generic": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+  "reason": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+  "resolution": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+  "more_info": "",
+  "total_risk": 2,
+  "risk_of_change": 1,
+  "impact": { "impact": 2 },
+  "likelihood": 3,
+  "publish_date": "2021-11-01T14:00:00Z",
+  "tags": ["fault_tolerance", "openshift", "sap"],
+  "rating": 1,
+  "impacted_clusters_count": 0,
+  "disabled": false,
+  "reboot_required": true
+}

package/cypress/plugins/index.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  if (config.testingType === 'component') {
+    const { startDevServer } = require('@cypress/webpack-dev-server')
+
+    // Your project's Webpack configuration
+    const webpackConfig = require('../cypress.webpack.config.js')
+
+    on('dev-server:start', (options) =>
+      startDevServer({ options, webpackConfig })
+    )
+  }
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/index.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@patternfly/patternfly/patternfly.scss';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.json

@@ -0,0 +1,9 @@
+{
+  "component": {
+    "componentFolder": "src/",
+    "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
+    "viewportHeight": 660,
+    "viewportWidth": 1000
+  },
+  "video": false
+}

package/esm/ReportDetails/ReportDetails.css

@@ -0,0 +1,47 @@
+.ins-c-report-details__cards-stack pre {
+  display: block;
+  color: var(--pf-global--Color--100);
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: var(--pf-global--BackgroundColor--light-200);
+  border: 1px solid var(--pf-global--BorderColor--100);
+  border-radius: 4px;
+  padding: 10px;
+  padding: 0.625rem;
+  margin: 10px 0px;
+  margin: 0.625rem 0rem;
+}
+.ins-c-report-details__cards-stack pre code {
+  white-space: pre-wrap;
+}
+.ins-c-report-details__cards-stack ol {
+  margin-top: 10px;
+  margin-top: 0.625rem;
+  margin-left: 15px;
+  margin-left: 0.9375rem;
+}
+.ins-c-report-details__cards-stack pre + p,
+.ins-c-report-details__cards-stack pre + ul {
+  margin-top: 10px;
+  margin-top: 0.625rem;
+}
+.ins-c-report-details__cards-stack .pf-c-list {
+  margin: 5px 0px;
+  margin: 0.3125rem 0rem;
+}
+.ins-c-report-details__cards-stack table {
+  width: 100%;
+  margin-top: 10px;
+  margin-top: 0.625rem;
+}
+.ins-c-report-details__cards-stack table tr {
+  border-bottom: 1px solid var(--pf-global--BorderColor--300);
+}
+.ins-c-report-details__cards-stack table th,
+.ins-c-report-details__cards-stack table td {
+  padding: 8px;
+  padding: 0.5rem;
+}
+.ins-c-report-details__icon {
+  margin-right: var(--pf-global--spacer--sm);
+}

package/esm/ReportDetails/ReportDetails.js

@@ -0,0 +1,56 @@
+import './ReportDetails.scss';
+import React, { useState } from 'react';
+import { Alert, Card, CardBody, CardHeader, Divider, Stack, StackItem } from '@patternfly/react-core';
+import { BullseyeIcon, InfoCircleIcon, LightbulbIcon, ThumbsUpIcon } from '@patternfly/react-icons';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/Skeleton';
+import { TemplateProcessor } from '../TemplateProcessor';
+import { ExternalLink } from '../common';
+var ReportDetails = function (_a) {
+    var report = _a.report, kbaDetail = _a.kbaDetail, kbaLoading = _a.kbaLoading;
+    var rule = report.rule, details = report.details, resolution = report.resolution;
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    var handleError = function (e) {
+        if (error === null) {
+            setError(e);
+        }
+    };
+    return (React.createElement(Card, { className: "ins-c-report-details", style: { boxShadow: 'none' } },
+        React.createElement(CardBody, null,
+            error && (React.createElement(React.Fragment, null,
+                React.createElement(Alert, { variant: "danger", title: "Sorry, there was an error rendering the content correctly.", isInline: true }),
+                React.createElement("br", null))),
+            React.createElement(Stack, { className: "ins-c-report-details__cards-stack", "widget-type": "InsightsRulesCard", hasGutter: true },
+                React.createElement(StackItem, null,
+                    React.createElement(Card, { isCompact: true, isPlain: true },
+                        React.createElement(CardHeader, null,
+                            React.createElement(BullseyeIcon, { className: "ins-c-report-details__icon" }),
+                            React.createElement("strong", null, "Detected issues")),
+                        React.createElement(CardBody, null, rule.reason && React.createElement(TemplateProcessor, { template: rule.reason, definitions: details, onError: handleError })))),
+                React.createElement(Divider, null),
+                React.createElement(StackItem, null,
+                    React.createElement(Card, { isCompact: true, isPlain: true },
+                        React.createElement(CardHeader, null,
+                            React.createElement(ThumbsUpIcon, { className: "ins-c-report-details__icon" }),
+                            React.createElement("strong", null, "Steps to resolve")),
+                        React.createElement(CardBody, null, resolution && React.createElement(TemplateProcessor, { template: resolution, definitions: details, onError: handleError })))),
+                rule.node_id && (React.createElement(React.Fragment, null,
+                    React.createElement(Divider, null),
+                    React.createElement(StackItem, null,
+                        React.createElement(Card, { className: "ins-c-report-details__kba", isCompact: true, isPlain: true },
+                            React.createElement(CardHeader, null,
+                                React.createElement(LightbulbIcon, { className: "ins-c-report-details__icon" }),
+                                React.createElement("strong", null, "Related Knowledgebase article")),
+                            React.createElement(CardBody, null, kbaLoading ? (React.createElement(Skeleton, { size: SkeletonSize.sm })) : (React.createElement(React.Fragment, null,
+                                React.createElement(ExternalLink, { href: "".concat(kbaDetail.view_uri), content: kbaDetail.publishedTitle ? kbaDetail.publishedTitle : "Knowledgebase article" }),
+                                "."))))))),
+                rule.more_info && (React.createElement(React.Fragment, null,
+                    React.createElement(Divider, null),
+                    React.createElement(StackItem, null,
+                        React.createElement(Card, { isCompact: true, isPlain: true },
+                            React.createElement(CardHeader, null,
+                                React.createElement(InfoCircleIcon, { className: "ins-c-report-details__icon" }),
+                                React.createElement("strong", null, "Additional info")),
+                            React.createElement(CardBody, null, React.createElement(TemplateProcessor, { template: rule.more_info, definitions: details, onError: handleError }))))))))));
+};
+export default ReportDetails;
+//# sourceMappingURL=ReportDetails.js.map

package/esm/ReportDetails/ReportDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportDetails.js","sourceRoot":"","sources":["../../src/ReportDetails/ReportDetails.tsx"],"names":[],"mappings":"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"}

package/esm/ReportDetails/ReportDetails.scss

@@ -0,0 +1,53 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_mixins';
+
+.ins-c-report-details {
+  &__cards-stack {
+    pre {
+      display: block;
+      color: var(--pf-global--Color--100);
+      word-break: break-all;
+      word-wrap: break-word;
+      background-color: var(--pf-global--BackgroundColor--light-200);
+      border: 1px solid var(--pf-global--BorderColor--100);
+      border-radius: 4px;
+      @include rem('padding', 10px);
+      @include rem('margin', (10px, 0));
+
+      code {
+        white-space: pre-wrap;
+      }
+    }
+
+    ol {
+      @include rem('margin-top', 10px);
+      @include rem('margin-left', 15px);
+    }
+
+    pre + p,
+    pre + ul {
+      @include rem('margin-top', 10px);
+    }
+
+    .pf-c-list {
+      @include rem('margin', 5px 0);
+    }
+
+    table {
+      width: 100%;
+      @include rem('margin-top', 10px);
+
+      tr {
+        border-bottom: 1px solid var(--pf-global--BorderColor--300);
+      }
+
+      th,
+      td {
+        @include rem('padding', 8px);
+      }
+    }
+  }
+
+  &__icon {
+    margin-right: var(--pf-global--spacer--sm);
+  }
+}

package/esm/ReportDetails/index.js

@@ -0,0 +1,3 @@
+export * from './ReportDetails';
+export { default as ReportDetails } from './ReportDetails';
+//# sourceMappingURL=index.js.map

package/esm/ReportDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ReportDetails/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/RuleDescription/RuleDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleDescription.js","sourceRoot":"","sources":["../../src/RuleDescription/RuleDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAQ3E,IAAM,eAAe,GAAmC,UAAC,EAAgC;QAA9B,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,aAAa,mBAAA;IAAO,OAAA,CAC5F,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CACjC,8BAAM,SAAS,EAAE,OAAO,KAAK,cAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QAC/F,oBAAC,QAAQ,IAAC,aAAa,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,IACjD,OAAO,KAAK,cAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrE,CACN,CACR,CACc,CAClB;AAV6F,CAU7F,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RuleDescription.js","sourceRoot":"","sources":["../../src/RuleDescription/RuleDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAQ3E,IAAM,eAAe,GAAmC,UAAC,EAAgC;QAA9B,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,aAAa,mBAAA;IAAO,OAAA,CAC5F,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAAC,IAAI,CAAC,OAAO,IAAK,IAAwB,CAAC,OAAO,CAAC,IAAI,CACtD,8BAAM,SAAS,EAAE,OAAO,KAAK,cAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QAC/F,oBAAC,QAAQ,IAAC,aAAa,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,IACjD,OAAO,KAAK,cAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAE,IAAwB,CAAC,OAAO,CAC1F,CACN,CACR,CACc,CAClB;AAV6F,CAU7F,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/RuleDetails/RuleDetails.js

@@ -12,23 +12,24 @@ import { ViewAffectedLink } from '../ViewAffectedLink';
 import { RuleDescription } from '../RuleDescription';
 var RuleDetails = function (_a) {
     var messages = _a.messages, product = _a.product, header = _a.header, rule = _a.rule, isDetailsPage = _a.isDetailsPage, topics = _a.topics, onVoteClick = _a.onVoteClick, showViewAffected = _a.showViewAffected, resolutionRisk = _a.resolutionRisk, resolutionRiskDesc = _a.resolutionRiskDesc, children = _a.children, Link = _a.linkComponent, knowledgebaseUrl = _a.knowledgebaseUrl;
-    return (React.createElement(Flex, { flexWrap: { default: 'nowrap' }, direction: { default: isDetailsPage ? 'column' : 'columnReverse', lg: 'row' } },
+    return (React.createElement(Flex, { className: "ins-c-rule-details", flexWrap: { default: 'nowrap' }, direction: { default: isDetailsPage ? 'column' : 'columnReverse', lg: 'row' } },
         React.createElement(FlexItem, null,
             React.createElement(Stack, { hasGutter: true },
-                header && React.createElement(StackItem, null, header),
-                React.createElement(StackItem, null,
+                header && React.createElement(StackItem, { className: "ins-c-rule-details__header" }, header),
+                React.createElement(StackItem, { className: "ins-c-rule-details__description" },
                     React.createElement(RuleDescription, { product: product, rule: rule, isDetailsPage: isDetailsPage })),
-                knowledgebaseUrl && (React.createElement(StackItem, null,
+                knowledgebaseUrl && (React.createElement(StackItem, { className: "ins-c-rule-details__kbs" },
                     React.createElement("a", { rel: "noopener noreferrer", target: "_blank", href: knowledgebaseUrl },
                         messages.knowledgebaseArticle,
                         "\u00A0",
                         React.createElement(ExternalLinkAltIcon, { size: "sm" })))),
-                topics && rule.tags && topicLinks(rule, topics, Link).length > 0 && (React.createElement(StackItem, null,
+                topics && rule.tags && topicLinks(rule, topics, Link).length > 0 && (React.createElement(StackItem, { className: "ins-c-rule-details__topics" },
                     React.createElement("strong", null, messages.topicRelatedToRule),
                     React.createElement("br", null),
                     barDividedList(topicLinks(rule, topics, Link)))),
-                isDetailsPage && onVoteClick && React.createElement(RuleRating, { messages: messages, ruleId: rule.rule_id, ruleRating: rule.rating, onVoteClick: onVoteClick }),
-                !isDetailsPage && showViewAffected && Link && (React.createElement(StackItem, null,
+                isDetailsPage && onVoteClick && (React.createElement(StackItem, { className: "ins-c-rule-details__vote" },
+                    React.createElement(RuleRating, { messages: messages, ruleId: rule.rule_id, ruleRating: rule.rating, onVoteClick: onVoteClick }))),
+                !isDetailsPage && showViewAffected && Link && (React.createElement(StackItem, { className: "ins-c-rule-details__view-affected" },
                     React.createElement(ViewAffectedLink, { messages: messages, rule: rule, product: product, linkComponent: Link }))))),
         React.createElement(FlexItem, { align: { lg: 'alignRight' } },
             React.createElement(Stack, null,
@@ -39,11 +40,11 @@ var RuleDetails = function (_a) {
                             React.createElement("strong", null, messages.totalRisk)),
                         React.createElement(FlexItem, null,
                             React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-                                React.createElement(FlexItem, null,
+                                React.createElement(FlexItem, { className: "ins-c-rule-details__total-risk" },
                                     React.createElement(InsightsLabel, { value: rule.total_risk, isCompact: true, className: "pf-m-compact", rest: {} })),
-                                React.createElement(FlexItem, { className: "ins-c-description-stack-override" },
+                                React.createElement(FlexItem, null,
                                     React.createElement(Stack, { hasGutter: true },
-                                        React.createElement(StackItem, null,
+                                        React.createElement(StackItem, { className: "ins-c-rule-details__total-risk-body" },
                                             React.createElement(TextContent, null,
                                                 React.createElement(Text, { component: TextVariants.p }, messages.rulesDetailsTotalRiskBody))),
                                         React.createElement(Stack, null,
@@ -58,13 +59,13 @@ var RuleDetails = function (_a) {
                             React.createElement(FlexItem, { className: "pf-u-display-inline-flex alignCenterOverride pf-u-pb-sm pf-u-pt-sm" },
                                 React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
                                     React.createElement(FlexItem, null,
-                                        React.createElement(InsightsLabel, { text: messages.riskOfChangeLabel, value: resolutionRisk, hideIcon: true, className: "pf-m-compact", rest: {} })),
-                                    React.createElement(FlexItem, { className: "ins-c-description-stack-override" },
+                                        React.createElement(InsightsLabel, { text: messages.riskOfChangeLabel, value: resolutionRisk, hideIcon: true, className: "ins-c-rule-details__risk-of-ch-label pf-m-compact", rest: {} })),
+                                    React.createElement(FlexItem, { className: "ins-c-rule-details__risk-of-ch-desc" },
                                         React.createElement(Stack, { hasGutter: true },
                                             React.createElement(StackItem, null,
                                                 React.createElement(TextContent, null,
                                                     React.createElement(Text, { component: TextVariants.p }, resolutionRiskDesc))),
-                                            product === AdvisorProduct.rhel && (React.createElement(StackItem, null,
+                                            product === AdvisorProduct.rhel && (React.createElement(StackItem, { className: "ins-c-rule-details__reboot" },
                                                 React.createElement(RebootRequired, { messages: messages, rebootRequired: rule.reboot_required })))))))))))))));
 };
 export default RuleDetails;