Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explain OVAL and CPE AL operators #192

Merged
merged 5 commits into from
Jul 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 27 additions & 7 deletions openscap_report/report_generators/html_templates/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ footer {

.tooltip-wrapper:hover .tooltip-box-right-side {
visibility: visible;
z-index: 10;
z-index: calc(var(--pf-c-tree-view--m-guides__list-item--ZIndex) + 1);
}

.tooltip-box-top-side {
Expand All @@ -195,23 +195,43 @@ footer {

#copy:active .tooltip-box-top-side {
visibility: visible;
z-index: 10;
z-index: calc(var(--pf-c-tree-view--m-guides__list-item--ZIndex) + 1);
}

.tooltip-wrapper:hover .tooltip-box-top-side {
visibility: visible;
z-index: calc(var(--pf-c-tree-view--m-guides__list-item--ZIndex) + 1);
}

.tooltip-wrapper {
text-decoration: underline dotted;
}

.tooltip-box-top-side-oval-operator {
top: unset;
bottom: 24px;
left: 8px;
width: fit-content;
}

.tooltip-wrapper-oval-operator {
position: relative;
}

.tooltip-wrapper:hover {
text-decoration: underline;
}

.tooltip__content-width {
width: 20vw;
.tooltip__text-algin-justify {
text-align: justify;
white-space: pre-line;
word-break: break-word;
hyphens: auto;
}

.tooltip__content-width-oval-operator {
width: 500px;
}

.pf-c-tooltip {
max-width: fit-content;
}

.clickable-element {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,17 @@ const COLOR_TRANSLATION = {
'pf-m-red': '--pf-global--danger-color--200',
'': ''
};
const OVAL_OPERATOR_EXPLANATION = {
'AND': 'The AND operator produces a true result if every argument is true. If one or more arguments are false, the result of the AND is false. If one or more of the arguments are unknown, and if none of the arguments are false, then the AND operator produces a result of unknown.',
'OR': 'The OR operator produces a true result if one or more arguments is true. If every argument is false, the result of the OR is false. If one or more of the arguments are unknown and if none of arguments are true, then the OR operator produces a result of unknown.',
'XOR': 'XOR is defined to be true if an odd number of its arguments are true, and false otherwise. If any of the arguments are unknown, then the XOR operator produces a result of unknown.',
'ONE': 'The ONE operator produces a true result if one and only one argument is true. If there are more than argument is true (or if there are no true arguments), the result of the ONE is false. If one or more of the arguments are unknown, then the ONE operator produces a result of unknown.',
'NOT': 'NOT is negation, then the true result is false and the false result is true, all other results remain the same.'
};
const CPE_AL_OPERATOR_EXPLANATION = {
'AND': 'The AND operator produces a true result if every argument is true. If one or more arguments are false, the result of the AND is false.',
'OR': 'The OR operator produces a true result if one or more arguments is true. If every argument is false, the result of the OR is false.'
};

const DIV = document.createElement("div");
const SPAN = document.createElement("span");
Expand Down Expand Up @@ -206,7 +217,7 @@ function base_operator_node(node_data, node_text) {
const html_icon = get_icon_as_html(negate_icon);
node.appendChild(html_icon);
if (node_data.negation) {
node.appendChild(get_bold_text("NOT"));
node.appendChild(get_operator_label_with_tooltip("NOT", OVAL_OPERATOR_EXPLANATION));
html_icon.classList.add("icon-space");
}
return { node, color, icon };
Expand All @@ -215,7 +226,8 @@ function base_operator_node(node_data, node_text) {
function get_CPE_AL_operator_node(node_data) {
const { operator_node, node_text } = get_operator_node();
const { node, color, icon } = base_operator_node(node_data, node_text);
node.appendChild(get_bold_text(` ${node_data.node_type} `));

node.appendChild(get_operator_label_with_tooltip(node_data.node_type, CPE_AL_OPERATOR_EXPLANATION));
node_text.appendChild(get_label(color, "CPE AL operator", undefined, "cpe-label"," cpe-label__content"));
const span_space = SPAN.cloneNode();
span_space.innerText = "\u00A0";
Expand Down Expand Up @@ -312,7 +324,7 @@ function render_OVAL_test(node_data) {
const html_icon = get_icon_as_html(negate_icon);
node.appendChild(html_icon);
if (node_data.negation) {
node.appendChild(get_bold_text("NOT"));
node.appendChild(get_operator_label_with_tooltip("NOT", OVAL_OPERATOR_EXPLANATION));
html_icon.classList.add("icon-space");
}

Expand Down Expand Up @@ -387,7 +399,7 @@ function get_tooltip(text) {
tooltip_div.appendChild(tooltip_arrow_div);

const tooltip_content_div = DIV.cloneNode();
tooltip_content_div.className = "pf-c-tooltip__content tooltip__content-width";
tooltip_content_div.className = "pf-c-tooltip__content tooltip__text-algin-justify";
tooltip_content_div.textContent = text;
tooltip_div.appendChild(tooltip_content_div);

Expand Down Expand Up @@ -469,11 +481,42 @@ function get_operator_node() {
return { operator_node, node_text };
}

function add_tooltip_on_mouse_enter_to_oval_operator(self, text) { // eslint-disable-line no-unused-vars
const tooltip_div = DIV.cloneNode();
tooltip_div.className = "pf-c-tooltip pf-m-top-left tooltip-box-top-side tooltip-box-top-side-oval-operator";
tooltip_div.setAttribute("role", "tooltip");
self.appendChild(tooltip_div);

const tooltip_arrow_div = DIV.cloneNode();
tooltip_arrow_div.className = "pf-c-tooltip__arrow";
tooltip_div.appendChild(tooltip_arrow_div);

const tooltip_content_div = DIV.cloneNode();
tooltip_content_div.className = "pf-c-tooltip__content tooltip__text-algin-justify tooltip__content-width-oval-operator";
tooltip_content_div.textContent = text;
tooltip_div.appendChild(tooltip_content_div);
}


function remove_tooltip_on_mouse_leave_from_oval_operator(self) { // eslint-disable-line no-unused-vars
self.removeChild(self.lastChild);
}

function get_operator_label_with_tooltip(node_type, explanations) {
const span = SPAN.cloneNode();
span.className = "tooltip-wrapper tooltip-wrapper-oval-operator";
span.appendChild(get_bold_text(` ${node_type} `));

span.setAttribute("onmouseenter", `add_tooltip_on_mouse_enter_to_oval_operator(this, "${explanations[node_type]}")`);
span.setAttribute("onmouseleave", "remove_tooltip_on_mouse_leave_from_oval_operator(this)");
return span;
}

function get_OVAL_tree_operator_node(node_data) {
const { operator_node, node_text } = get_operator_node();
const { node, color, icon } = base_operator_node(node_data, node_text);

node.appendChild(get_bold_text(` ${node_data.node_type} `));
node.appendChild(get_operator_label_with_tooltip(node_data.node_type, OVAL_OPERATOR_EXPLANATION));
node_text.appendChild(get_label(color, node_data.tag));
node_text.appendChild(get_label(color, node_data.value, get_icon_as_html(icon)));
node_text.appendChild(get_note(`\u00A0\u00A0${node_data.comment ? node_data.comment : ""}`));
Expand Down