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

Signed-off-by: Will Dower <[email protected]>
mitre · Jan 12, 2023 · 851da9c · 851da9c
1 parent 9c00f54
commit 851da9c
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 109 deletions.
diff --git a/src/assets/data/howitworks.json b/src/assets/data/howitworks.json
@@ -4,20 +4,21 @@
       "name": "GOAL",
       "data": [
         {
+          "svg": "Plan Icon",
+          "title": {
+            "text" : "<b>PLAN</b>",
+            "size" : "2rem"
+          },
+          "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"
           },
           "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",
@@ -26,14 +27,7 @@
             "size" : "2rem"
           },
           "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",
@@ -42,14 +36,7 @@
             "size" : "2rem"
           },
           "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",
@@ -58,14 +45,7 @@
             "size" : "2rem"
           },
           "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,73 @@
             "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": "<b>Author standards</b> to create "
+                },
+                {
+                  "type": "svg",
+                  "contents": "InSpec Icon"
+                },
+                {
+                  "type": "svg",
+                  "contents": "InSpec Typemark"
+                },
+                {
+                  "type": "text",
+                  "contents": " validation code"
+                }
+              ],
+              "link" : "https://vulcan.mitre.org"
+            },
+            {
+              "title": "Unite Guidance with Automation",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Develop automated compliance-as-code alongside standards"
+                }
+              ]
+            },
+            {
+              "title": "Bake in Compliance",
+              "subtitle" : [
+                {
+                  "type": "text",
+                  "contents": "Ensure all automated tests have a metadata binding to the requirement they validate"
+                }
+              ]
+            }
+          ],
+          "min_height" : "500px"
+        },
         {
           "subcards": [
             {
@@ -142,13 +146,6 @@
               "link" : "https://www.ansible.com/"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -169,28 +166,6 @@
               ],
               "link" : "https://saf-cli.mitre.org/#attest"
             },
-            {
-              "title": "Vulcan",
-              "subtitle": [
-                {
-                  "type": "text",
-                  "contents": "<b>Author standards</b> to create "
-                },
-                {
-                  "type": "svg",
-                  "contents": "InSpec Icon"
-                },
-                {
-                  "type": "svg",
-                  "contents": "InSpec Typemark"
-                },
-                {
-                  "type": "text",
-                  "contents": " validation code"
-                }
-              ],
-              "link" : "https://vulcan.mitre.org"
-            },
             {
               "title": "saf generate",
               "subtitle": [
@@ -219,13 +194,6 @@
               "link" : "https://saf-cli.mitre.org/#validate"
             }
           ],
-          "cols": {
-            "xl" : "3",
-            "lg" : "3",
-            "md" : "3",
-            "sm" : "6",
-            "xs" : "12"
-          },
           "min_height" : "500px"
         },
         {
@@ -247,13 +215,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 +240,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=""
+              xl=""
+            >
               <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'
   // },