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.

Sign up for GitHub

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

Jump to bottom

Better notifification when project smt differs from certified #1576

Merged
merged 1 commit into from
Apr 26, 2021
Merged

Better notifification when project smt differs from certified #1576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ v999 (April XX, 2021)

* Add control titles to component control listing pages.

* Better notify users when project implementation statement differs from certified by displaying notice in third column of control detail pages.

* Improve language notifying users that project implementation statement differs from certified. Only difference notice is clickable now.

**Bug fixes**

Expand Down
54 changes: 20 additions & 34 deletions templates/controls/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,6 @@ <h2 class="control-heading" style="">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#component_controls" aria-controls="component_controls" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-wrench"></span> Component Statements &nbsp;<div id="common-tab-count">{{ impl_smts|length }}</div></a></li>
<li role="presentation"><a href="#control" aria-controls="control" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"></span> Control</a></li>
<li role="presentation"><a href="#oscal" aria-controls="oscal" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-file"></span> OSCAL </a></li>
{% if enable_experimental_opencontrol %}
<li role="presentation"><a href="#opencontrol" aria-controls="opencontrol" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-file"></span> OpenControl </a></li>
{% endif %}
</ul>

<!-- Tab panels -->
Expand Down Expand Up @@ -175,14 +171,28 @@ <h2 class="control-heading" style="">
{% for smt in impl_smts %}
<div id="panel-{{ forloop.counter }}" class="smt-panel">
<div class="panel-heading" role="tab" id="document-{{ forloop.counter }}-title">

<div class="row statement-text">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<span id="producer_element-{{ forloop.counter }}-control" class="control-id-text">{{ smt.producer_element.name }}</span>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 statement-text-block">{% if smt.pid is not None and smt.pid != "" %}<div class="panel-heading-smt">{{ smt.pid }}.</div>{% endif %}{{ smt.body }}</div>
<div id="smt-edit-{{ forloop.counter }}" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 remark-text-block"><a role="button" class="glyphicon glyphicon-pencil pull-right" style="color: #aaa;" data-toggle="collapse" data-parent="#accordion" href="#document-{{ forloop.counter }}-body" aria-expanded="false" aria-controls="document-{{ forloop.counter }}-body"></a>Status: {% if smt.status != "" and smt.status is not None %}{{ smt.status }}{% else %}TBD{% endif %}
{% if smt.remarks %}<details><summary>Remarks</summary><div>{{ smt.remarks }}</div></details>{% endif %}
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 remark-text-block">
{% spaceless %}
<span>Status: {% if smt.status != "" and smt.status is not None %}{{ smt.status }}{% else %}TBD{% endif %}</span>
<span class="pull-right"><a role="button" class="glyphicon glyphicon-pencil" style="color: #aaa;" data-toggle="collapse" data-parent="#accordion" href="#document-{{ forloop.counter }}-body" aria-expanded="false" aria-controls="document-{{ forloop.counter }}-body"></a></span>
{% if smt.prototype_synched == 'not_synched' %}
<div id="diff_alert_{{ forloop.counter }}_notice">
<span href="#diff_{{ forloop.counter }}" class="" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;cursor: pointer;" onclick="alert('Your statement and component\'s certified statement have diverged.\n\nEdit statement for details.');return false;"><span class="glyphicon glyphicon-alert"></span> Differs from certified</span>
</div>
{% elif smt.prototype_synched == 'orphaned' %}
<div id="diff_alert_{{ forloop.counter }}">
<a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span class="glyphicon glyphicon-alert"></span> No related statement for component in library</a>
</div>
{% endif %}
<div>
{% if smt.remarks %}<details><summary>Remarks</summary><div>{{ smt.remarks }}</div></details>{% endif %}
</div>
{% endspaceless %}
</div>
</div>

Expand Down Expand Up @@ -212,17 +222,15 @@ <h4 id="panel-{{ forloop.counter }}-title" class="panel-title">
<input type="hidden" class="form-control" id="producer_element_name_{{ forloop.counter }}" name="producer_element_name" value="{{ smt.producer_element.name }}">
<div class="form-group">
<input type="hidden" id="producer_element_id" name="producer_element_id" value="{{ smt.producer_element.id }}">
<label for="component"><a href="/systems/{{ system.id }}/component/{{ smt.producer_element.id }}" style="color: black;">{{ smt.producer_element.name }}</a></label>
</div>
<div class="form-group">
<input type="hidden" id="smt_id" name="smt_id" value="{{ smt.id }}">
<label for="statement">What is the solution and how is it implemented?
<label for="statement">
{% if smt.prototype_synched == 'synched' %}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: green;"><span
class="glyphicon glyphicon-check"></span> Same as certified</a></span>
<span id="diff_alert_{{ forloop.counter }}" style="color: green; font-weight: normal;"><span class="glyphicon glyphicon-check"></span> Same as certified</a></span>
{% elif smt.prototype_synched == 'not_synched' %}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span
class="glyphicon glyphicon-alert"></span> Differs from certified</a></span>
class="glyphicon glyphicon-alert"></span> Click to see differences from certified statement</a></span>
{% elif smt.prototype_synched == 'orphaned' %}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span
class="glyphicon glyphicon-alert"></span> No related statement for component in library</a></span>
Expand Down Expand Up @@ -348,28 +356,6 @@ <h4 id="panel-{{ forloop.counter }}-title" class="panel-title">

</div>

<!-- Tab panel: oscal -->
<div role="tabpanel" class="tab-pane" id="oscal">
<!-- <p id="oscal_download" class="navbar-text navbar-right">
<a id="oscal_download_json_link"
class="navbar-link"
href={% url 'system_element_download_oscal_json' system_id=system.id element_id=element.id %}>
<span class="glyphicon glyphicon-download"></span>
Download ...
</a>
</p> -->
<div id="combined_smt" class="control-text"><h3>OSCAL</h3></div>
<div class="systems-element-oscal">{{ oscal }}</div>
</div>

<!-- Tab panel: opencontrol -->
{% if enable_experimental_opencontrol %}
<div role="tabpanel" class="tab-pane" id="opencontrol">
<div id="combined_smt" class="control-text"><h3>OpenControl (under development)</h3></div>
<div class="systems-element-opencontrol">{{ opencontrol }}</div>
</div>
{% endif %}

<!-- Modal -->
<form class="form-inline" method="post" action="/systems/{{ system.id }}/components/editor_autocomplete">
{% csrf_token %}
Expand Down
30 changes: 21 additions & 9 deletions templates/systems/element_detail_tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,22 @@ <h3>Component Description</h3>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<span id="producer_element-{{ forloop.counter }}-control" class="control-id-text">{{ smt.sid|upper }} {% if smt.pid %}{{ smt.pid }}.{% endif %} - {{ smt.control_title }}</span>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 statement-text-block">{{ smt.body }}</div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 remark-text-block"><a role="button" class="glyphicon glyphicon-pencil pull-right" style="color: #aaa;" data-toggle="collapse" data-parent="#accordion" href="#document-{{ forloop.counter }}-body" aria-expanded="false" aria-controls="document-{{ forloop.counter }}-body"></a>{% if smt.remarks %}<details><summary>Remarks</summary><div>{{ smt.remarks }}</div></details>{% endif %}</div></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 statement-text-block">{{ smt.body }}</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 remark-text-block">{% spaceless %}
{% if smt.prototype_synched == 'not_synched' %}
<span id="diff_alert_{{ forloop.counter }}_notice">
<span href="#diff_{{ forloop.counter }}" class="" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;cursor: pointer;" onclick="alert('Your statement and component\'s certified statement have diverged.\n\nEdit statement for details.');return false;"><span class="glyphicon glyphicon-alert"></span> Differs from certified</span>
</span>
{% elif smt.prototype_synched == 'orphaned' %}
<span id="diff_alert_{{ forloop.counter }}">
<a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span class="glyphicon glyphicon-alert"></span> No related statement for component in library</a>
</span>
{% endif %}
<span class="pull-right"><a role="button" class="glyphicon glyphicon-pencil" style="color: #aaa;" data-toggle="collapse" data-parent="#accordion" href="#document-{{ forloop.counter }}-body" aria-expanded="false" aria-controls="document-{{ forloop.counter }}-body"></a></span>
{% if smt.remarks %}<details><summary>Remarks</summary><div>{{ smt.remarks }}</div></details>{% endif %}
{% endspaceless %}
</div>
</div>

<h4 id="panel-{{ forloop.counter }}-title" class="panel-title">
&nbsp;
Expand All @@ -184,20 +199,17 @@ <h4 id="panel-{{ forloop.counter }}-title" class="panel-title">
<input type="hidden" class="form-control" id="producer_element_name_{{ forloop.counter }}" name="producer_element_name" value="{{ smt.producer_element.name }}">
<div class="form-group">
<input type="hidden" id="producer_element_id" name="producer_element_id" value="{{ smt.producer_element.id }}">
<label for="compoment"><a href="/systems/{{ system.id }}/component/{{ smt.producer_element.id }}" class="systems-link">{{ smt.producer_element.name }}</a></label>

</div>
<div class="form-group">
<input type="hidden" id="smt_id" name="smt_id" value="{{ smt.id }}">
<label for="statement">What is the solution and how is it implemented?
<label for="statement">
{% if smt.prototype_synched == 'synched'%}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: green;"><span
class="glyphicon glyphicon-check"></span> Same as certified</a></span>
<span id="diff_alert_{{ forloop.counter }}" style="color: green;font-weight: normal;"><span class="glyphicon glyphicon-check"></span> Same as certified</span>
{% elif smt.prototype_synched == 'not_synched' %}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span
class="glyphicon glyphicon-alert"></span> Differs from certified</a></span>
<span id="diff_alert_{{ forloop.counter }}" style="color: firebrick;"> <a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span class="glyphicon glyphicon-alert"></span> Click to see differences from certified statement</a></span></span>
{% elif smt.prototype_synched == 'orphaned' %}
<span id="diff_alert_{{ forloop.counter }}"><a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt; color: firebrick;"><span
class="glyphicon glyphicon-alert"></span> No related statement for component in library</a></span>
<span id="diff_alert_{{ forloop.counter }}" style="color: firebrick;"><span class="glyphicon glyphicon-alert"></span> No related statement for component in library <a href="#diff_{{ forloop.counter }}" class="" data-toggle="collapse" style="text-decoration: none;font-weight: normal; font-size: 9pt;">view</a></span>
{% endif %}
<div id="diff_{{ forloop.counter }}" class="collapse smt_diff" style="font-size:10pt; font-weight: normal; margin-top: 12px;color: #666;">
<div style="text-decoration: underline;font-weight: bold;">
Expand Down