Mapex 184 stop capability group pages from overwriting capability pag…

…es (#80) * move capability_groups into folder, fix back link to change versions * fix ATT&CK website links * small css fixes --------- Co-authored-by: arobbins <[email protected]>
center-for-threat-informed-defense · Feb 19, 2024 · 162b995 · 162b995
1 parent b793d44
commit 162b995
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 26 deletions.
diff --git a/src/mappings_explorer/site_builder.py b/src/mappings_explorer/site_builder.py
@@ -536,7 +536,7 @@ def build_external_landing(
         {url_prefix}attack/attack-{attack_version}/domain-{attack_domain.lower()}/techniques/"""
     external_prefix = f"""
         {url_prefix}external/{project.id}/attack-{attack_version}/domain-{attack_domain.lower()}/{project.id}-{project_version}/"""
-
+    capability_group_prefix = f"{external_prefix}capability-groups/"
     headers = [
         ("capability_id", "Capability ID", "capability_id", external_prefix),
         (
@@ -573,8 +573,8 @@ def build_external_landing(
     )
 
     capability_group_headers = [
-        ("id", "ID", "id", external_prefix),
-        ("label", "Capability Group Name", "id", external_prefix),
+        ("id", "ID", "id", capability_group_prefix),
+        ("label", "Capability Group Name", "id", capability_group_prefix),
         ("num_mappings", "Number of Mappings"),
         ("num_capabilities", "Number of Capabilities"),
     ]
@@ -622,30 +622,33 @@ def build_external_landing(
         ("label", "Capability Name", "id", external_prefix),
         ("num_mappings", "Number of Mappings"),
     ]
+    capability_group_dir = domain_dir / "capability-groups"
+    previous_link = external_prefix
     for capability_group in project.capability_groups:
         nav = breadcrumbs + [
             (
-                f"{external_prefix}{capability_group.id}/",
+                f"{external_prefix}capability-groups/{capability_group.id}/",
                 f"{capability_group.label} Capability Group",
             )
         ]
         build_capability_group(
             project=project,
             capability_group=capability_group,
             url_prefix=url_prefix,
-            parent_dir=domain_dir,
+            parent_dir=capability_group_dir,
             project_version=project_version,
             attack_version=attack_version,
             headers=headers,
             attack_domain=attack_domain,
             breadcrumbs=nav,
             capability_group_headers=capability_group_headers,
+            previous_link=previous_link,
         )
     for capability in project.capabilities:
         if capability.capability_group:
             capability_nav = breadcrumbs + [
                 (
-                    f"{external_prefix}{capability.capability_group.id}/",
+                    f"{external_prefix}capability-groups/{capability.capability_group.id}/",
                     f"{capability.capability_group.label} Capability Group",
                 ),
                 (
@@ -663,6 +666,7 @@ def build_external_landing(
                 capability=capability,
                 attack_domain=attack_domain,
                 breadcrumbs=capability_nav,
+                previous_link=previous_link,
             )
 
 
@@ -741,6 +745,7 @@ def build_capability_group(
     attack_domain,
     breadcrumbs,
     capability_group_headers,
+    previous_link,
 ):
     capability_group_id = capability_group.id
     dir = parent_dir / capability_group_id
@@ -768,6 +773,7 @@ def build_capability_group(
         headers=headers,
         breadcrumbs=breadcrumbs,
         capability_group_headers=capability_group_headers,
+        previous_link=previous_link,
     )
     stream.dump(str(output_path))
     logger.trace(
@@ -785,6 +791,7 @@ def build_external_capability(
     capability: Capability,
     attack_domain: str,
     breadcrumbs: list,
+    previous_link: str,
 ):
     """Builds a capability page for a given capability
 
@@ -798,7 +805,7 @@ def build_external_capability(
        capability: capability object that the page is being built for
        attack_domain: ATT&CK domain for the page
        breadcrumbs: the navigation tree above the page being built in this function
-
+        previous_link: link to go to in order to "change versions" on banner or badges
     """
     dir = parent_dir / capability.id
     dir.mkdir(parents=True, exist_ok=True)
@@ -823,6 +830,7 @@ def build_external_capability(
         headers=headers,
         capability=capability,
         breadcrumbs=breadcrumbs,
+        previous_link=previous_link,
     )
     stream.dump(str(output_path))
     logger.trace("          Created capability page {id}", id=capability.id)
@@ -1016,6 +1024,7 @@ def build_attack_pages(projects: list, url_prefix: str, breadcrumbs: list):
                 breadcrumbs=breadcrumbs,
                 non_mappables=non_mappables,
             )
+
             for technique in all_techniques:
                 external_dir = (
                     PUBLIC_DIR
@@ -1120,6 +1129,7 @@ def build_technique_page(
         mappings=technique.mappings,
         subtechniques=technique.subtechniques,
         breadcrumbs=nav,
+        previous_link=attack_prefix,
     )
     stream.dump(str(output_path))
     logger.trace("          Created technique page {id}", id=technique.id)
@@ -1147,6 +1157,7 @@ def build_tactic_page(
     attack_prefix = (
         f"{url_prefix}attack/attack-{attack_version}/domain-{attack_domain.lower()}/"
     )
+    previous_link = attack_prefix + "tactics/"
     nav = breadcrumbs + [
         (f"{attack_prefix}tactics/", "ATT&CK Tactics"),
         (f"{attack_prefix}tactics/{tactic.id}/", f"{tactic.id} {tactic.label}"),
@@ -1175,6 +1186,7 @@ def build_tactic_page(
         tactic=tactic,
         prev_page=prev_page,
         breadcrumbs=nav,
+        previous_link=previous_link,
     )
     stream.dump(str(output_path))
     logger.trace("          Created tactic page {id}", id=tactic.id)

diff --git a/src/mappings_explorer/templates/_badge_section.html.j2 b/src/mappings_explorer/templates/_badge_section.html.j2
@@ -11,13 +11,21 @@
         </button>
     {% endif %}
     <button class="icon-btn">
-        <a href="../" style="color: black">
+        {%- if previous_link -%}
+            <a href={{previous_link}} style="color: black">
+        {%- else -%}
+            <a href="../" style="color: black">
+        {%- endif -%}
             <img src="{{url_prefix}}static/img/gear.svg" alt="">
             Change Versions
         </a>
     </button>
     <button class="icon-btn-sm">
-        <a href="../" style="color: black">
+        {%- if previous_link -%}
+            <a href={{previous_link}} style="color: black">
+        {%- else -%}
+            <a href="../" style="color: black">
+        {%- endif -%}
             <img src="{{url_prefix}}static/img/gear.svg" alt="">
         </a>
     </button>

diff --git a/src/mappings_explorer/templates/_banner.html.j2 b/src/mappings_explorer/templates/_banner.html.j2
@@ -3,6 +3,8 @@
             {{attack_domain}}
             {%- if not versions -%}.{%-endif-%}
             {% if versions %} and {{control}} {{control_version}}.{% endif %}
-            <a class="banner-link" href="../">Change versions here.</a>
+            <span> </span>
+            {%- if previous_link -%}<a class="banner-link" href={{previous_link}}>Change versions here.</a>{%-endif-%}
+            {%- if not previous_link -%}<a class="banner-link" href="../">Change versions here.</a>{%-endif-%}
         </p>
     </div>
diff --git a/src/mappings_explorer/templates/matrix.html.j2 b/src/mappings_explorer/templates/matrix.html.j2
@@ -25,7 +25,7 @@
               </p>
             </div>
             <div
-              class="download-artifacts col-lg-4 col-md-2 col-sm-12 ml-20 text-end"
+              class="download-artifacts col-lg-4 col-md-2 col-sm-12 ml-20"
               v-if="attack_domain_versions_with_mappings[selectedDomain].includes(selectedAttackVersion)"
             >
               <h6>Download Mapping Artifacts:</h6>

diff --git a/src/mappings_explorer/templates/static/main.css b/src/mappings_explorer/templates/static/main.css
@@ -907,13 +907,13 @@ section#user-stories button.accordion-button div {
   padding-top: 180px;
 }
 
+.header-container .download-artifacts {
+  margin-top: 12px;
+}
+
 @media (min-width: 768px) {
   .header-container .download-artifacts {
-    margin-top: 12px;
-  }
-
-  .download-artifacts h6 {
-    font-weight: 600;
+    padding-left: 15px;
   }
 
   .header-container .download-artifacts .downloads {
@@ -926,6 +926,9 @@ section#user-stories button.accordion-button div {
   }
 }
 
+.download-artifacts h6 {
+  font-weight: 600;
+}
 .download-artifacts .downloads a img {
   margin-top: -5px;
 }
@@ -1009,7 +1012,7 @@ section#user-stories button.accordion-button div {
   background-color: white;
   padding: 40px;
   box-shadow: 2px 2px 4px #bdbdbd;
-  border-radius: 5px;
+  border-radius: 10px;
 }
 
 .mapping-table .table-outer input {
@@ -2533,9 +2536,8 @@ section#user-stories button.accordion-button div {
   margin: 5px 5px;
   padding: 0;
   border: none;
-  border-radius: 10px;
+  border-radius: 5px;
   display: block;
-  /* float: right; */
 }
 
 .custom-badge .white {
@@ -2545,6 +2547,7 @@ section#user-stories button.accordion-button div {
   height: 100%;
   padding: 8px 10px;
   box-shadow: 2px 2px 4px #bdbdbd;
+  cursor: default;
 }
 
 .custom-badge .purple {
@@ -2554,6 +2557,7 @@ section#user-stories button.accordion-button div {
   padding: 8px 10px;
   border-radius: 0 10px 10px 0;
   box-shadow: 2px 2px 4px #bdbdbd;
+  cursor: default;
 }
 
 .badge-section {
@@ -2570,7 +2574,6 @@ section#user-stories button.accordion-button div {
   box-shadow: 2px 2px 4px #bdbdbd;
   margin: 5px 0px 5px 5px;
   border: none;
-  /* float: right; */
 }
 
 .badge-section .icon-btn-sm {

diff --git a/src/mappings_explorer/templates/technique.html.j2 b/src/mappings_explorer/templates/technique.html.j2
@@ -14,7 +14,7 @@
           {%-markdown-%}
             {{technique.description}}
           {%-endmarkdown-%}
-          <a href="https://attack.mitre.org/versions/v{{attack_version.split('.')[0]}}/techniques/{{technique.id}}" target="_blank" rel="noopener noreferrer"">
+          <a href="https://attack.mitre.org/versions/v{{attack_version.split('.')[0]}}/techniques/{{technique.id.replace(".","/")}}" target="_blank" rel="noopener noreferrer"">
             View in MITRE ATT&CK®
           </a>
         </div>
@@ -24,13 +24,13 @@
   <section id="mappings-table" class="mapping-table">
     <div class="container" data-aos="fade-up">
       <div class="row justify-content-left">
-        <div class="row">
-            <div class="col-lg-4 col-md-12">
+        <div class="row" style="padding: 0;">
+          <div class="col-xl-4 col-lg-12">
             <h2 style="width: max-content">Mappings</h2>
-            </div>
-            <div class="col-lg-8 col-md-12" style="margin-left: auto;">
+          </div>
+          <div class="col-xl-8 col-lg-12 badges">
             {% include "_badge_section.html.j2" %}
-            </div>
+          </div>
         </div>
         <div class="col-12">
             {{ macros.table(headers, mappings, url_prefix) }}