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

TAT-125 create methodology page #15

Conversation

allisonrobbins
Copy link
Contributor

  • Build methodology page based off legacy website
  • Integrate math equations into site using MathJax and Latex (able to be read by screen readers)
  • Create graphs using CTID brand colors

@allisonrobbins allisonrobbins marked this pull request as ready for review May 16, 2024 18:06
Copy link

@allisonrobbins allisonrobbins marked this pull request as draft May 22, 2024 18:44
index.html Show resolved Hide resolved
src/components/MethodologySidebar.vue Outdated Show resolved Hide resolved
Copy link

Copy link

Copy link

github-actions bot commented Jun 3, 2024

Copy link

github-actions bot commented Jun 4, 2024

@allisonrobbins allisonrobbins marked this pull request as ready for review June 4, 2024 17:56
Copy link
Contributor

@mikecarenzo mikecarenzo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a few small requests, otherwise, it looks great! Thanks for fixing MathJax so the equations render immediately (instead of progressively after the initial page load).

At some point, it might be worth breaking each section of MethodologyDetails into its own component. This would really help make the component just a bit more manageable.

Then, in MethodologyPage, you could import these sections individually (like you ordinarily would). But, instead of referencing the components directly in the <template> you would include the name of each component to use in MethodologyList:

[
  {
    name: "Actionability",
    description: "The opportunity for a defender to detect or mitigate against each ATT&CK technique based on publicly available analytics and security controls",
    section: "ActionabilitySection"
  },
  {
    name: "Choke Point",
    description: "A specific technique where many other techniques converge or diverge, and eliminating that specific technique would cause disruption to an adversary",
    section: "ChokePointSection"
  },
  {
    name: "Prevalence",
    description: "The frequency of which an attacker uses a specific ATT&CK technique over a period of time",
    section: "PrevalenceSection"
  },
]

Then, in your template, you'd simply swap MethodologyDetails with a dynamic <component/>:

<MethodologyDetails :activeItemId="activeItemId" :methodologyList="methodologyList" />

to:

<component :is="methodologyList[activeItemId].section" />

If you want to keep passing the description of each section (from MethodologyList) to the component, you could define a description prop on each Section component and pass in the description like so:

<component :is="methodologyList[activeItemId].section" v-bind="{ description: methodologyList[activeItemId].description }" />

The benefit of this approach is that the current view and the available options are all dictated by MethodologyList. If you want to add, remove, or reorder sections, it's simply a matter of manipulating this one array.

src/components/MethodologySidebar.vue Outdated Show resolved Hide resolved
src/components/MethodologyDetails.vue Outdated Show resolved Hide resolved
src/views/MethodologyPage.vue Outdated Show resolved Hide resolved
Copy link

github-actions bot commented Jun 7, 2024

Copy link

github-actions bot commented Jun 7, 2024

Copy link

github-actions bot commented Jun 7, 2024

@allisonrobbins allisonrobbins merged commit 5a5460d into TAT-121-single-page-app-conversion Jun 13, 2024
2 checks passed
@allisonrobbins allisonrobbins deleted the TAT-125-create-methodology-page branch June 13, 2024 19:09
allisonrobbins added a commit that referenced this pull request Jul 10, 2024
* TAT-127 create shell for spa (#7)

* clone base vue template

* add all pages and navbar

* style navbar

* add package-lock

* remove md files from template

* make fixes to remove prettier

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* Tat 123 create homepage initial (#8)

* get hero section working

* initial hero structure

* update hero with design feedback

* set up content for small screens

* feat(TAT-123): final styling touches

* feat(#123): fix navbar responsiveness

* feat(TAT-123): update tailwind scheme to ctid scheme

* ci: install Azure website previews and `release-please`

* ci: re-enable linter

* bugfix(TAT-123): fix img parameters and component names

* refactor(TAT-123): fix css bug for mobile menu

* refactor(TAT-123): replace & with @amp;

---------

Co-authored-by: arobbins <arobbins@mitre.org>
Co-authored-by: Michael Carenzo <79934822+mikecarenzo@users.noreply.github.com>

* ci: build site previews on `TAT-121-single-page-app-conversion` and on `workflow_dispatch`

* TAT-138 create calculator pages (#11)

* feat(TAT-138): overall page structure

* feat(TAT-138): get filter section scaffolded out

* feat(TAT-138): reorganize files

* feat(TAT-138): add system config section

* feat(TAT-138): fine tune responsive design

* feat(TAT-138): finalize changes

* feat(TAT-124):  foundation for top ten list page

* fix (TAT-124): refactor to move calculator code into components and add mobile view

* style(TAT-124): added formatting for calculator accordion headers

* refactor(TAT-138): integrate two calculator screens and link between them

* style(TAT-124): format section selections on calculator page so user can see what they selected

* feat(TAT-124): add markdown library for technique descriptions

* refactor(TAT-124): reorganize css into component files

* refactor(TAT-138): pull in changes from homepage

* refactor(TAT-138): lint fix

* refactor(TAT-124): download technique list, persist filter selections, open markdown links in new tab

* refactor(TAT-124): clean up css and unused code

* refactor(TAT-138): requested wording fixes, remove logs, styling fix

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-139 Load ATT&CK data from Calculator spreadsheet into application (#12)

* feat(TAT-139): set up script to parse technique and score data from Calculator spreadsheet

* refactor(TAT-139): clean up console log, update some object types

* feat(TAT-139): parse mitigations to add to technique JSON

* refactor(TAT-139): remove unused code

* refactor(TAT-139): restructure build scripts to fix lint error

* feat(TAT-139): set filter options on calculator page from technique values

* refactor(TAT-139): restructure code in update_techniques to utilize asyn/await and add detection to subtechnique description

* refactor(TAT-139): define object types for calculator store

* refactor(TAT-139): add type definitions in new file, remove setTechniques() function

* refactor(TAT-139): fix spread operator error

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-144 apply scores and filters to technique list (#13)

* feat(TAT-144): Add select/deselect all functionality to NIST and CIS and apply scores to sort technique list

* feat(TAT-144): handle technique list less than ten items

* feat(TAT-144): apply system scores and filters to sorted top 10 list of techniques

* refactor(TAT-144): restructure filterPropertiesObject to synchronize variables, misc code improvements

* refactor(TAT-144): restructure select all to be an empty set if all filters are selected

* refactor(TAT-144): rework select all display for filters

* refactor(TAT-144): define props as required or default

* refactor(144): removing unnecessary if statements in filter logic

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-126): Build help page (#14)

* feat(TAT-126): add FAQ and step-by-step guide to using the calculator to help page

* style(TAT-126): make all router links scroll to top of page (remove error with FAQ link auto scrolling to middle of page)

* feat(TAT-126): add icon to links indicating it opens an external site

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-145 Top 10 JSON export format (#16)

* feat(TAT-145): remove some technique elements (supertechnique, cumulative_score, etc.) to optimize json export on calculator page

* feat(TAT-145): structure json export

* feat(TAT-97): add actionability, choke point, and prevalence scores to technique metadata

* feat(TAT-97): add prevalence, actionability, and choke point scores to JSON export

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-141 dynamic page titles (#17)

* feat(TAT-141): set dynamic page titles based on route

* feat(TAT-141): reference meta.title property to display page name instead of name property

* feat(TAT-141): use nextTick for dynamic page title code

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-148): add google tracking code to the inde.html (#20)

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-143 add footer to application pages (#18)

* feat(TAT-143): add footer to application pages

* feat(TAT-143): link to related external projects instead of to pages within SPA

* refactor(TAT143): fix attack flow spelling

* feat(TAT-143): update subject line of email link

* refactor(TAT-143): remove ampersand

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT(114): Updated calculator sheets to ATTCK version 14.0

* TAT-125 create methodology page (#15)

* feat(TAT-125): swt up methodology page structure with container and sidebar

* feat(TAT-125): add text for actionability and choke point

* feat(TAT-125): add text for prevalence

* feat(TAT-125): use mathjax wrapper to convert latex expressions to html text

* feat(TAT-125): adding graph images to methodology pages, delete unnecessary images

* feat(TAT-125): add remaining methodology graphs

* feat(TAT-125): write good alt text for the graphs on methodology pages

* refactor(TAT-125): fix lint error

* feat(TAT-125): use emit instead of referencing parent methods in methodology page and calculator page

* feat(TAT-125): fix mixed content error

* refactor(TAT-125): fix mixed content error

* feat(TAT-125): use static mathjax wrapper instead of importing library

* feat(TAT-125): split methodology details code into dynamic components

* refactor(TAT-125): remove unnecessary code

* feat(TAT-125): upgrade to MathJax 3, typeset on mounted hook

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-119): add detection and mitigation actionabilities to the exported JSON (#21)

* feat(TAT-119): add detection and mitigation actionabilities to the exported JSON

* feat(TAT-119): nest actionability scores for clarity when reading json

* feat(TAT-119): Deconstruct Technique and ExportedTechnique into sub interfaces

* feat(TAT-119): remove actionability from json download

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-92 export top techniques to navigator layer (#22)

* feat(TAT-92): use primevue SplitButton to add another download option to create navigator layers with top 10 technique scores

* feat(TAT-92): Add score information to navigator comments

* feat(TAT-92): break up strings for usability, fix typescript type error, and remove unnecessary code

* feat(TAT-92): fix bug after merging in change to actionability

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-146 put ransomware list on homepage (#19)

* feat(TAT-146): add static ransomware list to home, configure wrapper to reuse list components

* refactor(TAT-146): remove console statements, add comments to explain code

* refactor(TAT-146): fix lint errors

* feat(TAT-146): make text on homepage links different for each link section

* feat(TAT-147): add static lists to top 10 lists page

* style(TAT-146): add pipe or comma between filter/score items on top 10 results page for visual differentiation

* refactor(TAT-146): lint errors

* style(TAT-146): fix styling bug on homepage

* feat(TAT-146): use pipe instead of span, move static list definitions to store

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-114): add relationship and mitigation data for version 14 (#23)

* feat(TAT-114): add relationship and mitigation data for version 14 and update script to parse it

* feat(TAT-114): change any references to version 10

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-149): switch to hash based routing for azure blob (#26)

Co-authored-by: arobbins <arobbins@mitre.org>

* feat(TAT-135): update ransomware list to match latest spreadsheet update (#27)

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-150 fix spreadsheet logic (#30)

* bugfix(TAT-150): fix cells AF, AH, AJ, AL,AN to have formula that calculates score instead of setting to arbitrary static value

* bugfix(TAT-150): fix score adjustment to match spreadsheet equation and update technique list

---------

Co-authored-by: arobbins <arobbins@mitre.org>

* TAT-142 Add logo to site, 508 compliance, and misc formatting

* feat(TAT-142): Update favicon

* feat(TAT-142): add logo to homepage and footer, update default text on homepage

* feat(TAT-142): 508 compliance: add alt text to images, add labels to elements

* feat(TAT-142):more accessibility fixes, move css to scoped block

* bugfix(TAT-142): add conditional to delete icons for static lists, set attack version as a store value

* Edited some of the static text

* Pre-release repo cleanup and update README

* style(TAT-142): misc formatting to make site consistent across pages, improve 508 compliance and mobile view

* feat(TAT-142): apply markdown to all text blocks, fix errors with parsing spreadsheet (from updating to latest ATT&CK)

* style(TAT-142): set max width for footer

---------

Co-authored-by: arobbins <arobbins@mitre.org>
Co-authored-by: Mark E. Haase <mhaase@mitre.org>

---------

Co-authored-by: arobbins <arobbins@mitre.org>
Co-authored-by: Michael Carenzo <79934822+mikecarenzo@users.noreply.github.com>
Co-authored-by: jlasky2 <118202061+jlasky2@users.noreply.github.com>
Co-authored-by: Mark E. Haase <mhaase@mitre.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants