Merge pull request #468 from mitre-attack/develop

Update website to 4.0.6

.gitignore

@@ -15,10 +15,11 @@ output/
 reports/
 
 attack-theme/templates/general/base.html
-attack-theme/templates/contribute
+attack-theme/templates/benefactors
 attack-theme/templates/datasources
 attack-theme/templates/groups
 attack-theme/templates/campaigns
+attack-theme/templates/assets
 attack-theme/templates/matrices
 attack-theme/templates/mitigations
 attack-theme/templates/resources
@@ -28,6 +29,7 @@ attack-theme/templates/techniques
 attack-theme/templates/website_build
 attack-theme/templates/versions
 attack-theme/static/scripts/settings.js
+attack-theme/templates/general/sidebar-resources.html
 content/
 data/pelican_settings.json
 

.python-version

@@ -0,0 +1 @@
+3.10.11

CHANGELOG.md

@@ -1,5 +1,10 @@
+# v4.0.6 (2023-10-31)
 
-<!-- TOWNCRIER -->
+## Features
+
+* Data sources table can now be sorted and filtered based on domains. [#454](https://github.com/mitre-attack/attack-website/issues/454)
+* Release [ATT&CK content version 14.0](https://github.com/mitre/cti/releases/tag/ATT%26CK-v14.0).
+  See the release notes [here](https://attack.mitre.org/resources/updates/updates-october-2023/).
 
 # v4.0.5 (2023-09-01)
 

attack-search/src/settings.js

@@ -2,6 +2,7 @@ const baseURL = ''; // TODO migrate from base_url (generated via Pelican)
 
 const searchFilePaths = [
     "campaigns.json",
+    "assets.json",
     "datasources.json",
     "groups.json",
     "matrices.json",

attack-theme/static/scripts/domain_table.js

@@ -0,0 +1,105 @@
+// this function filters table rows based on the selection
+function filter_row(selected) {
+    let col_index = 3
+    const rows = document.querySelectorAll("#ds-table tbody tr");
+    let count = 0;
+    rows.forEach((row) => {
+        let row_count = 0
+        let row_visited = false;
+        let row_data = row.querySelector("td:nth-child(" + col_index + ")").innerHTML
+        for(let i = 0; i<selected.length; i++){
+            let filter_value = selected[i];
+            let display_row = true;
+            if (row_data.indexOf(filter_value) == -1 && !row_visited) {
+                display_row = false;
+            }
+            if (display_row) {
+                row.style.display = "table-row";
+                row_visited = "true";
+                row_count = row_count + 1;
+            } else {
+                row.style.display = "none"
+            }
+        }
+        if(row_count > 0){
+            count = count + 1;
+        }
+    })
+    let filter_count = document.querySelector(".table-object-count")
+    filter_count.innerHTML = `Data Sources: ${count}`
+}
+
+$(document).ready(function() {
+    let arrow_up = document.getElementById("arrow-up-0");
+    let arrow_down = document.getElementById("arrow-down-0");
+    arrow_down.style.display = "inline-block";
+    arrow_up.style.display = "none";
+    arrow_up = document.getElementById("arrow-up-1");
+    arrow_down = document.getElementById("arrow-down-1");
+    arrow_down.style.display = "inline-block";
+    arrow_up.style.display = "none";
+    showDomain();
+});
+
+// this function determines which domain options were checked
+function showDomain() {
+    let selected = [];
+    if($("#filterMenu input:checked").length <= 0){
+        $('#filterMenu input:checkbox').each(function() {
+            selected.push($(this).attr('id'));
+            $(this).prop("checked", "true");
+        });
+    }
+    else{
+        $('#filterMenu input:checked').each(function() {
+            selected.push($(this).attr('id'));
+
+        });
+    }
+    filter_row(selected);
+}
+
+// this function sorts the table based on either ID or Name
+function sortTable(col_no) {
+    let table = document.getElementById("ds-table");
+    let direction = "asc";
+    let table_switching = true;
+    let asc_direction = false;
+    let arrow_up = document.getElementById("arrow-up-"+col_no);
+    let arrow_down = document.getElementById("arrow-down-"+col_no);
+    arrow_down.style.display = "inline-block";
+    arrow_up.style.display = "none";
+    let rows = table.rows;
+    while (table_switching) {
+        table_switching = false;
+        if (direction == "desc"){
+            for (let i = 1; i <= (rows.length - 1); i++) {
+                for (let j = 1; j <= (rows.length - i - 1); j++) {
+                    let x = rows[j].getElementsByTagName("TD")[col_no];
+                    let y = rows[j + 1].getElementsByTagName("TD")[col_no];
+                    if(x.innerText.toLowerCase() < y.innerText.toLowerCase()){
+                        rows[j].parentNode.insertBefore(rows[j + 1], rows[j]);
+                    }
+                }
+            }
+            arrow_up.style.display = "inline-block";
+            arrow_down.style.display = "none";
+        }
+        else{
+            for (let i = 1; i <= (rows.length - 1); i++) {
+                for (let j = 1; j <= (rows.length - i - 1); j++) {
+                    let x = rows[j].getElementsByTagName("TD")[col_no];
+                    let y = rows[j + 1].getElementsByTagName("TD")[col_no];
+                    if(x.innerText.toLowerCase() > y.innerText.toLowerCase()){
+                        rows[j].parentNode.insertBefore(rows[j + 1], rows[j]);
+                        asc_direction = true;
+                    }
+                }
+            }
+        }
+        if (direction == "asc" && !asc_direction) {
+            direction = "desc";
+            table_switching = true;
+        }
+    }
+}

attack-theme/static/scripts/mobileview-datasources.js

@@ -0,0 +1,16 @@
+// This code is for creating a collapsable sidebar for the mobile view
+let mediaQuery = window.matchMedia('(max-width: 47.9875rem)')
+
+function mobileSidenav(e) {
+  if (e.matches) {
+      $('#sidebar-collapse').collapse('hide')
+  }
+  else{
+      $('#sidebar-collapse').collapse('show')
+  }
+}
+$(document).ready(function() {
+  mobileSidenav(mediaQuery)
+});
+
+mediaQuery.addEventListener('change', mobileSidenav)

attack-theme/static/scripts/resizer.js

@@ -31,21 +31,4 @@ function resizeSidebar_mouseupHandler() {
 }
 
 resizer.addEventListener("mousedown", resizeSidebar_mousedownHandler);
-}
-
-//This code is for creating a collapsable sidebar for the mobile view
-const mediaQuery = window.matchMedia('(max-width: 47.9875rem)')
-
-function mobileSidenav(e) {
-  if (e.matches) {
-      $('#sidebar-collapse').collapse('hide')
-  }
-  else{
-      $('#sidebar-collapse').collapse('show')
-  }
-}
-$(document).ready(function() {
-  mobileSidenav(mediaQuery)
-});
-
-mediaQuery.addEventListener('change', mobileSidenav)
+}

attack-theme/static/scripts/sidebar-load-all.js

@@ -0,0 +1,52 @@
+let mod_name = window.location.pathname.split("/")
+let mod_entry = "/" + mod_name[1] + "/sidebar-" + mod_name[1]
+if (mod_name.includes('contact')){
+    mod_entry = "/" + "resources/sidebar-resources"
+}
+$("#sidebars").load(mod_entry, function() {
+    let navElements = document.querySelectorAll('.sidenav-head > a');
+    let winlocation;
+    navElements.forEach(function(element){
+    if(!element.href.includes('changelog.html')){
+        if(!window.location.href.endsWith("/")){
+            winlocation = window.location.href + "/";
+        }
+        else{
+            winlocation = window.location.href
+        }
+        if(!element.href.endsWith("/")){
+            element.href = element.href + "/";
+        }
+    }
+    else{
+        winlocation = window.location.href
+    }
+    if(element.href == winlocation){
+        $(element.parentNode).addClass("active")
+    }});
+
+    //This code is for creating a collapsable sidebar for the mobile view
+    let mediaQuery = window.matchMedia('(max-width: 47.9875rem)')
+    function mobileSidenav(e) {
+        if (e.matches) {
+            $('#sidebar-collapse').collapse('hide')
+        }
+        else{
+            $('#sidebar-collapse').collapse('show')
+        }
+    }
+    $(document).ready(function() {
+        mobileSidenav(mediaQuery)
+        let sidenav = $(".sidenav-list");
+        let sidenav_active_elements = $(".sidenav .active");
+        if (sidenav_active_elements.length > 0) setTimeout(() => { //setTimeout gives bootstrap time to execute first
+            let offsetValue = sidenav_active_elements[0].offsetTop;
+            if (offsetValue <= 0){
+                offsetValue = sidenav_active_elements[sidenav_active_elements.length - 1].offsetTop;
+            }
+            sidenav[0].scrollTop = offsetValue - 60;
+        });
+    });
+
+    mediaQuery.addEventListener('change', mobileSidenav)
+});

attack-theme/static/style/_layouts.scss

@@ -388,6 +388,10 @@ a {
     }
 }
 
+.tables-mobile {
+    overflow-y: auto;
+}
+
 .table-bordered, .blog-post table, .changelog table {
     &, & td, & th {
         border: 1px solid border-color(body);
@@ -619,6 +623,19 @@ pre {
 }
 /******/
 
+.nestedlist {
+    counter-reset: item;
+}
+
+.nestedlist-item {
+    display: block;
+}
+
+.nestedlist-item::before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+}
+
 /*CALLOUTS*/
 // callouts style in the Contribute page
 .bs-callout {
@@ -1051,6 +1068,11 @@ pre {
 
 /******/
 
+// how to display the sidebar
+div#sidebars {
+    display: contents
+}
+
 /*Plus/Minus expand icons*/
 // used in the expandable list items in the side navigation and in the expandable gray blocks in ATT&CKCON
 .expand-icon {
@@ -1137,6 +1159,10 @@ pre {
     }
 }
 
+.contact-center {
+    margin-block-start: 20vh;
+}
+
 /*Card Blocks*/
 // container of groups of cards
 .expand-panel {

attack-theme/static/style/_nav.scss

@@ -220,6 +220,10 @@
     background-color: #dfdfdf;
  }
 
+ .data-sources-menu {
+    padding-top: 15px;
+ }
+
 .sidebar.nav {
     // max-height: 60vh;
     overflow-y: auto;

attack-theme/templates/general/attack-index.html

@@ -68,7 +68,7 @@
                                 <center>
                                     <hr>
                                     <h2 class="attack-box-heading">
-                                        ATT&amp;CK v14 is coming <strong>October 31st</strong>.
+                                        ATT&amp;CK v14 has been released.
                                         <br>
                                         We hope everyone will enjoy our latest treats!
                                     </h2>

attack-theme/templates/general/attackcon-overview.html

@@ -5,9 +5,7 @@
 {% import 'macros/navigation.html' as navigation %}
 
 {% block innerleft %}
-<div id="v-tab" role="tablist" aria-orientation="vertical" class="h-100">
-    {{navigation.sidenav(RESOURCE_NAV, output_file)}} 
-</div>
+<div id="sidebars"></div>
 {% endblock %}
 
 {% block innerright %}
@@ -117,5 +115,5 @@ <h2>Sponsors</h2>
 {% block scripts %}
 {{ super() }}
 <!--SCRIPTS-->
-<script src="/theme/scripts/navigation.js"></script>
+<script src="/theme/scripts/sidebar-load-all.js"></script>
 {% endblock %}

attack-theme/templates/general/base-template.html

@@ -161,7 +161,6 @@
     <script src="/theme/scripts/site.js?{{ range(1, 9002) | random }}"></script>
     <script src="/theme/scripts/settings.js?{{ range(1, 9002) | random }}"></script>
     <script src="/theme/scripts/search_bundle.js"></script>
-    <script src="/theme/scripts/resizer.js"></script>
 {% endblock %}
 </body>
 </html>