addresses #400 -- adds Plan column to homepage with links to Vulcan (#…

…402) * addresses #400 -- adds Plan column to homepage with links to Vulcan Signed-off-by: Will Dower <[email protected]> * wordsmithing Signed-off-by: Will Dower <[email protected]> * added attributes to control column width on homepage, reduced icon sizes so that they look better on laptop-sized screens Signed-off-by: Will Dower <[email protected]> Signed-off-by: Will Dower <[email protected]>
mitre · Jan 13, 2023 · 585a3b1 · 585a3b1
1 parent d7cdfb8
commit 585a3b1
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 104 deletions.
diff --git a/src/assets/data/howitworks.json b/src/assets/data/howitworks.json
@@ -4,68 +4,48 @@
       "name": "GOAL",
       "data": [
         {
+          "svg": "Plan Icon",
+          "title": {
+            "text" : "<b>PLAN</b>",
+            "size" : "1.5rem"
+          },
+          "subtitle": "Choose, tailor, and create <b>security guidance</b> appropriate for your mission",
+          "link" : "https://vulcan.mitre.org/"
+        },{
           "svg": "Harden Icon",
           "title": {
             "text" : "<b>HARDEN</b>",
-            "size" : "2rem"
+            "size" : "1.5rem"
           },
           "subtitle": "<b>Implement security baselines</b> using our Ansible, Chef, and Terraform content",
-          "router_link" : "/harden",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/harden"
         },
         {
           "svg": "Validate Icon",
           "title": {
             "text" : "<b>VALIDATE</b>",
-            "size" : "2rem"
+            "size" : "1.5rem"
           },
           "subtitle": "<b>Generate detailed security testing results</b> throughout the lifecycle of a system via <b>automated tests</b> and <b>manual attestation</b>",
-          "router_link" : "/validate",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/validate"
         },
         {
           "svg": "Normalize Icon",
           "title": {
             "text" : "<b>NORMALIZE</b>",
-            "size" : "2rem"
+            "size" : "1.5rem"
           },
           "subtitle": "<b>Convert security results</b> from all your security tools into a common data format",
-          "router_link" : "/normalize",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "router_link" : "/normalize"
         },
         {
           "svg": "Visualize Icon",
           "title": {
             "text" : "<b>VISUALIZE</b>",
-            "size" : "2rem"
+            "size" : "1.5rem"
           },
           "subtitle": "<b>Identify overall security status</b> and deep-dive to solve specific security defects",
-          "link" : "https://heimdall-lite.mitre.org",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "link" : "https://heimdall-lite.mitre.org"
         }
       ],
       "row_height": "10rem"
@@ -78,49 +58,64 @@
             "text" : "<b>Based On Standards</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(STIGs, CIS Benchmarks, Agency Baselines)",
-          "cols": {
-            "xl" : "6",
-            "lg" : "6",
-            "md" : "6",
-            "sm" : "6",
-            "xs" : "12"
-          }
+          "subtitle": "(STIGs, CIS Benchmarks, Agency Baselines)"
         },
         {
           "title": {
             "text" : "<b>Security Tool Output</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(Code Analysis, Continuous Monitoring, Security Operations)",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "3",
-            "xs" : "12"
-          }
+          "subtitle": "(Code Analysis, Continuous Monitoring, Security Operations)"
+
         },
         {
           "title": {
             "text" : "<b>Aggregated Data</b>",
             "size" : "1.5rem"
           },
-          "subtitle": "(Compile All Results For Analysis)",
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "3",
-            "xs" : "12"
-          }
+          "subtitle": "(Compile All Results For Analysis)"
         }
       ],
       "row_height": "9rem"
     },
     {
       "name": "TOOLS",
       "data": [
+        {
+          "subcards": [
+            {
+              "title": "Vulcan",
+              "subtitle": [
+                {
+                  "type": "text",
+                  "contents": "Generate and tailor <b>security guidance</b> based on Security Requirements Guides (SRGs)"
+                }
+              ],
+              "link" : "https://vulcan.mitre.org"
+            },
+            {
+              "title": "Training Classes",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Learn to use and develop SAF security tools appropriate to your mission"
+                }
+              ],
+              "router_link": "/train"
+            },
+            {
+              "title": "Getting Started",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Step through and refine your user story"
+                }
+              ],
+              "router_link": "/gettingstarted"
+            }
+          ],
+          "min_height" : "500px"
+        },
         {
           "subcards": [
             {
@@ -142,13 +137,6 @@
               "link" : "https://www.ansible.com/"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -170,11 +158,11 @@
               "link" : "https://saf-cli.mitre.org/#attest"
             },
             {
-              "title": "Vulcan",
+              "title": "saf generate",
               "subtitle": [
                 {
                   "type": "text",
-                  "contents": "<b>Author standards</b> to create "
+                  "contents": "(formerly InSpec_Tools) <b>Generate </b>"
                 },
                 {
                   "type": "svg",
@@ -186,17 +174,22 @@
                 },
                 {
                   "type": "text",
-                  "contents": " validation code"
+                  "contents": " <b>validation code</b> and <b>set threshold checks</b> within the pipeline"
                 }
               ],
-              "link" : "https://vulcan.mitre.org"
+              "link" : "https://saf-cli.mitre.org/#generate"
             },
             {
-              "title": "saf generate",
+              "title": "saf validate",
+              "subtitle": "<b>Validate threshold checks</b> within the pipeline",
+              "link" : "https://saf-cli.mitre.org/#validate"
+            },
+            {
+              "title": "Vulcan",
               "subtitle": [
                 {
                   "type": "text",
-                  "contents": "(formerly InSpec_Tools) <b>Generate </b>"
+                  "contents": "Generate "
                 },
                 {
                   "type": "svg",
@@ -208,24 +201,12 @@
                 },
                 {
                   "type": "text",
-                  "contents": " <b>validation code</b> and <b>set threshold checks</b> within the pipeline"
+                  "contents": " validation code to current, tailored, or authored standards"                  
                 }
               ],
-              "link" : "https://saf-cli.mitre.org/#generate"
-            },
-            {
-              "title": "saf validate",
-              "subtitle": "<b>Validate threshold checks</b> within the pipeline",
-              "link" : "https://saf-cli.mitre.org/#validate"
+              "link" : "https://vulcan.mitre.org"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -247,13 +228,6 @@
               "link" : "https://saf-cli.mitre.org/#hdf-to-splunk"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -279,14 +253,6 @@
               "link" : "https://saf-cli.mitre.org/#view"
             }
           ],
-
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         }
       ],

diff --git a/src/assets/img/svg/Plan Icon-Dark.svg b/src/assets/img/svg/Plan Icon-Dark.svg
diff --git a/src/assets/img/svg/Plan Icon-Light.svg b/src/assets/img/svg/Plan Icon-Light.svg
diff --git a/src/components/home/wwdComponents/HowItWorks.vue b/src/components/home/wwdComponents/HowItWorks.vue
@@ -19,8 +19,17 @@
       <v-col xs="12" smAndUp="11">
         <v-container fluid>
           <v-row justify="center">
-            <p v-if="$vuetify.breakpoint.xs" class="primary--text" style="font-size:2rem">{{row.name}}</p>
-            <v-col v-for="(item, index) in row.data" class="pa-1" :key="index" :xl="item.cols.xl" :lg="item.cols.lg" :md="item.cols.md" :sm="item.cols.sm" :cols="item.cols.xs">
+            <v-col cols="12">
+              <p v-if="$vuetify.breakpoint.xs" class="primary--text" style="font-size:2rem">{{row.name}}</p>
+            </v-col>
+
+            <v-col v-for="(item, index) in row.data" class="pa-1" :key="index"
+              :cols="$vuetify.breakpoint.xs ? 12 : ''"
+              sm="4"
+              md="4"
+              :lg="item.cols ? item.cols : ''"
+              :xl="item.cols ? item.cols : ''"
+            >
               <v-hover v-slot:default="{ hover }">
                 <v-card
                   :class="hover && (item.link || item.router_link) ? getHighlight() : ''"
@@ -150,6 +159,9 @@ export default {
       data: howitworks.rows,
     };
   },
+  mounted () {
+      console.log(this.$vuetify.breakpoint.width)
+    },
   // created() {
   //   imgVersion : '-Dark'
   // },