merging tooltips into subtechniques-2.1

Author: isaisabel

CHANGELOG.md

@@ -36,6 +36,8 @@
 ### Fixes
 - added internet explorer for sub-techniques matrix. Improved behavior of sub-techniques matrix in Edge browser. See issue [#114](https://github.com/mitre-attack/attack-website/issues/114).
 - added horizontal scroll indicators to matrices so that it's easier to tell when there's more to the left or right. See issue [#93](https://github.com/mitre-attack/attack-website/issues/93).
+- Added tooltips to all matrices to show tactic IDs, technique IDs, and subtechnique IDs when hovering over tactic names, technique names, and subtechnique names. See issue [#120](https://github.com/mitre-attack/attack-website/issues/120).
+- The site is now easier to rebrand; color themes and logos can now be changed with simple modifications to the site code. See issue[#80](https://github.com/mitre-attack/attack-website/issues/80)
 
 ## ATT&CK Website version 2.0
 ### New Features
@@ -65,7 +67,6 @@
 - Lists within data cards, e.g the platforms of a technique, are now in alphabetical order. See issue [#84](https://github.com/mitre-attack/attack-website/issues/84).
 - Matrix timestamps are now calculated from the modified date on the x-mitre-matrix STIX object. Additionally, said timestamps are now formatted the same as modified dates on other pages of the website. See issue [#27](https://github.com/mitre-attack/attack-website/issues/27).
 - Revisions to the layout of the matrix pages to improve readability when multiple matrices occur within a domain.
-- The site is now easier to rebrand; color themes and logos can now be changed with simple modifications to the site code. See issue[#80](https://github.com/mitre-attack/attack-website/issues/80)
 
 ## [ATT&CK Content version 7.0-beta](https://github.com/mitre/cti/tree/4d3f22d81af2424f3885b4390793ee8eb256d10d)
 See release notes [here](https://attack.mitre.org/beta/resources/updates/updates-march-2020/index.html).

attack-theme/templates/macros/matrix.html

@@ -99,7 +99,7 @@ <h3 class="text-center matrix-title">{{matrix.name}}</h3>
     <thead>
         <tr>
             {% for tactic in tactics %}
-                <td class="tactic name"><a href="{{tactic.url}}">{{tactic.name}}</a></td>
+                <td class="tactic name"><a href="{{tactic.url}}" data-toggle="tooltip" data-placement="top" title="{{tactic.external_id}}">{{tactic.name}}</a></td>
             {% endfor %}
         </tr>
         <tr>
@@ -158,7 +158,7 @@ <h3 class="text-center matrix-title">{{matrix.name}}</h3>
     <thead>
         <tr>
             {% for tactic in tactics %}
-                <td class="tactic name"><a href="{{tactic.url}}">{{tactic.name}}</a></td>
+                <td class="tactic name"><a href="{{tactic.url}}" data-toggle="tooltip" data-placement="top" title="{{tactic.external_id}}">{{tactic.name}}</a></td>
             {% endfor %}
         </tr>
         <tr>
@@ -228,7 +228,8 @@ <h3 class="text-center matrix-title">{{matrix.name}}</h3>
 
 <!-- Helper macro for creating a [sub]technique cell. Param is a Technique (defined above) and boolean noting whether or not it is a subtechnique-->
 {% macro technique_cell(technique, is_supertechnique) %}
+
 <div class="technique-cell {% if is_supertechnique %} supertechniquecell{% endif %}{% if technique.color %} colored{% endif %}" {% if technique.color %} style="background: {{technique.color}}"{% endif %}>
-    <a href="{{technique.url}}">{{technique.name}}{% if technique.subtechniques | length > 0 %}&nbsp;<sub>({{technique.subtechniques | length}})</sub>{% endif %}</a>
+    <a href="{{technique.url}}" data-toggle="tooltip" data-placement="top" title="{{technique.external_id}}">{{technique.name}}{% if technique.subtechniques | length > 0 %}&nbsp;<sub>({{technique.subtechniques | length}})</sub>{% endif %}</a>
 </div>
 {% endmacro %}

modules/matrix.py

@@ -90,7 +90,8 @@ def transform_technique(technique, tactic_id):
             "id": technique["id"],
             "name": technique["name"],
             "url": technique["external_references"][0]["url"].split("attack.mitre.org")[1],
-            "x_mitre_platforms": technique.get("x_mitre_platforms")
+            "x_mitre_platforms": technique.get("x_mitre_platforms"),
+            "external_id": technique["external_references"][0]["external_id"]
         }
 
         if technique["id"] in config.subtechniques_of:
@@ -129,6 +130,7 @@ def transform_tactic(tactic_id):
             "id": tactic_id,
             "name": tactic_obj["name"],
             "url": tactic_obj["external_references"][0]["url"].split("attack.mitre.org")[1],
+            "external_id": tactic_obj["external_references"][0]["external_id"],
             "techniques": techniques_in_tactic(tactic_id),
         }