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.

Sign up for GitHub

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

Apps and Tools tab #117

Closed
wants to merge 5 commits into from
Closed

Apps and Tools tab #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
902e541
reworked the cards
Amndeep7 Aug 18, 2020
9a19377
Added apps and tools tab
Amndeep7 Aug 18, 2020
971509e
Got home page working in ie11 again
Amndeep7 Sep 8, 2020
92eb682
Got the Apps and Tools page working with ie
Amndeep7 Sep 8, 2020
54236e6
Merge branch 'master' into apps-tools-page
Amndeep7 Sep 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions src/assets/data/appsAndTools.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{
"items": [
{
"name": "Heimdall Lite",
"desc": "A lightweight version of Heimdall for simple use cases",
"app_link": "https://heimdall-lite.mitre.org",
"doc_link": "https://heimdall.mitre.org",
"github_link": "https://github.com/mitre/heimdall-lite",
"shields": [
"https://img.shields.io/github/package-json/v/mitre/heimdall-lite",
"https://img.shields.io/npm/dt/heimdall-lite?label=npm%20downloads",
"https://img.shields.io/docker/pulls/mitre/heimdall-lite?label=docker%20hub%20pulls"
]
},
{
"name": "Heimdall Server",
"desc": "The complete Heimdall application - store results, coordinate across the development team, and more",
"app_link": "https://heimdall-demo.mitre.org",
"doc_link": "https://heimdall.mitre.org",
"github_link": "https://github.com/mitre/heimdall",
"shields": [
"https://img.shields.io/github/v/tag/mitre/heimdall?label=version",
"https://img.shields.io/npm/dt/heimdall?label=npm%20downloads",
"https://img.shields.io/docker/pulls/mitre/heimdall?label=docker%20hub%20pulls"
]
},
{
"name": "Vulcan (alpha)",
"desc": "Application for streamlining InSpec profile and overlay development using the Security Requirements Guide (SRG)",
"app_link": "https://vulcan-demo.mitre.org",
"doc_link": "https://vulcan.mitre.org",
"github_link": "https://github.com/mitre/vulcan"
},
{
"name": "InSpec_Tools",
"desc": "A set of Ruby utilities for creating, converting, and processing security baseline formats, results, and data",
"doc_link": "https://inspec-tools.mitre.org",
"github_link": "https://github.com/mitre/inspec_tools/",
"shields": [
"https://img.shields.io/github/v/release/mitre/inspec_tools?label=version",
"https://img.shields.io/gem/dt/inspec_tools?label=gem%20downloads"
]
},
{
"name": "Heimdall_Tools",
"desc": "A set of Ruby utilities for converting and working with compliance data for use in Heimdall apps",
"doc_link": "https://heimdall-tools.mitre.org",
"github_link": "https://github.com/mitre/heimdall_tools",
"shields": [
"https://img.shields.io/github/v/release/mitre/heimdall_tools?label=version",
"https://img.shields.io/gem/dt/heimdall_tools?label=gem%20downloads"
]
},
{
"name": "InSpecJS",
"desc": "A Typescript library for working with InSpec data",
"doc_link": "https://inspecjs.mitre.org",
"github_link": "https://github.com/mitre/inspecjs",
"shields": [
"https://img.shields.io/npm/v/inspecjs?label=version",
"https://img.shields.io/npm/dt/inspecjs?label=npm%20downloads"
]
},
{
"name": "InSpecJS_Tools",
"desc": "A set of JavaScript utilities for creating, converting, and processing security baseline formats, results, and data",
"doc_link": "https://inspec-tools-js.mitre.org",
"github_link": "https://github.com/mitre/inspec_tools_js"
},
{
"name": "HDF Splunk Plugin",
"desc": "Splunk plugin to upload Inspec output, Heimdall Tools output, and any other HDF format files to Splunk, for consumption by Heimdall Lite",
"doc_link": "https://hdf-json-to-splunk.mitre.org",
"github_link": "https://github.com/mitre/hdf-json-to-splunk/",
"shields": [
"https://img.shields.io/github/v/release/mitre/hdf-json-to-splunk?label=version",
"https://img.shields.io/github/downloads/mitre/hdf-json-to-splunk/total?label=github%20downloads"
]
},
{
"name": "HeimdallJS_Tools (Coming Soon!)",
"desc": "A set of JavaScript utilities for converting and working with compliance data for use in Heimdall apps"
}
]
}
163 changes: 11 additions & 152 deletions src/assets/data/whatWeDo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,25 @@
"name": "Validation",
"desc": "Produce detailed security testing data throughout development",
"icon": "mdi-thumb-up",
"svg": "",
"router_link": "validation",
"tools": ""
"router_link": "validation"
},
{
"name": "Hardening",
"desc": "Align with security baselines using our Ansible, Chef, and Terraform content",
"icon": "mdi-security",
"svg": "",
"router_link": "hardening",
"tools": ""
"router_link": "hardening"
},
{
"name": "Visualization",
"desc": "Dive deep into test results visually via rollups, charts, and timelines",
"icon": "mdi-image-search",
"svg": "",
"link": "https://heimdall-lite.mitre.org",
"tools": ""
"link": "https://heimdall-lite.mitre.org"
},
{
"name": "Training",
"desc": "Learn how to write effective tests and apply them to the team's pipeline",
"icon": "mdi-chair-school",
"svg": "",
"router_link": "training",
"tools": ""
"router_link": "training"
}
]
},
Expand Down Expand Up @@ -148,9 +140,10 @@
{
"sectionHeader": "When To Use It",
"sectionDesc" : "Develop and programmatically automate security in planning, development, assessment, and operational activities",
"images": [
{ "filename": "whenToUseIt", "router_link": "gettingstarted" }
],
"image": {
"filename": "whenToUseIt",
"router_link": "gettingstarted"
},
"items": [
{
"name": "During PLANNING an organization can use MITRE | SAF to:",
Expand Down Expand Up @@ -197,143 +190,9 @@
{
"sectionHeader": "How We Support It",
"sectionDesc": "Develop a toolchain to support the above areas of What and How for secure development",
"images": [{ "filename": "howWeSupportIt" }],
"items": [
{
"name": "Heimdall Lite",
"link": "",
"desc": "A lightweight version of Heimdall for simple use cases",
"icon": "",
"app_link": "https://heimdall-lite.mitre.org",
"app_svg": "app",
"doc_link": "https://heimdall.mitre.org",
"github_link": "https://github.com/mitre/heimdall-lite",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/github/package-json/v/mitre/heimdall-lite",
"https://img.shields.io/npm/dt/heimdall-lite?label=npm%20downloads",
"https://img.shields.io/docker/pulls/mitre/heimdall-lite?label=docker%20hub%20pulls"
]
},
{
"name": "Heimdall Server",
"link": "",
"desc": "The complete Heimdall application - store results, coordinate across the development team, and more",
"icon": "",
"app_link": "https://heimdall-demo.mitre.org",
"app_svg": "app",
"doc_link": "https://heimdall.mitre.org",
"github_link": "https://github.com/mitre/heimdall",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/github/v/tag/mitre/heimdall?label=version",
"https://img.shields.io/npm/dt/heimdall?label=npm%20downloads",
"https://img.shields.io/docker/pulls/mitre/heimdall?label=docker%20hub%20pulls"
]
},
{
"name": "Vulcan (alpha)",
"link": "",
"desc": "Application for streamlining InSpec profile and overlay development using the Security Requirements Guide (SRG)",
"icon": "",
"app_link": "https://vulcan-demo.mitre.org",
"app_svg": "app",
"doc_link": "https://vulcan.mitre.org",
"github_link": "https://github.com/mitre/vulcan",
"svg": "",
"tools": ""
},
{
"name": "InSpec_Tools",
"link": "",
"desc": "A set of Ruby utilities for creating, converting, and processing security baseline formats, results, and data",
"icon": "",
"app_link": "",
"app_svg": "app",
"doc_link": "https://inspec-tools.mitre.org",
"github_link": "https://github.com/mitre/inspec_tools/",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/github/v/release/mitre/inspec_tools?label=version",
"https://img.shields.io/gem/dt/inspec_tools?label=gem%20downloads"
]
},
{
"name": "Heimdall_Tools",
"link": "",
"desc": "A set of Ruby utilities for converting and working with compliance data for use in Heimdall apps",
"icon": "",
"app_link": "",
"app_svg": "app",
"doc_link": "https://heimdall-tools.mitre.org",
"github_link": "https://github.com/mitre/heimdall_tools",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/github/v/release/mitre/heimdall_tools?label=version",
"https://img.shields.io/gem/dt/heimdall_tools?label=gem%20downloads"
]
},
{
"name": "InSpecJS",
"link": "",
"desc": "A Typescript library for working with InSpec data",
"icon": "",
"app_link": "",
"app_svg": "app",
"doc_link": "https://inspecjs.mitre.org",
"github_link": "https://github.com/mitre/inspecjs",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/npm/v/inspecjs?label=version",
"https://img.shields.io/npm/dt/inspecjs?label=npm%20downloads"
]
},
{
"name": "InSpecJS_Tools",
"link": "",
"desc": "A set of JavaScript utilities for creating, converting, and processing security baseline formats, results, and data",
"icon": "",
"app_link": "",
"app_svg": "app",
"doc_link": "https://inspec-tools-js.mitre.org",
"github_link": "https://github.com/mitre/inspec_tools_js",
"svg": "",
"tools": ""
},
{
"name": "HDF Splunk Plugin",
"link": "",
"desc": "Splunk plugin to upload Inspec output, Heimdall Tools output, and any other HDF format files to Splunk, for consumption by Heimdall Lite",
"icon": "",
"app_link": "",
"app_svg": "app",
"doc_link": "https://hdf-json-to-splunk.mitre.org",
"github_link": "https://github.com/mitre/hdf-json-to-splunk/",
"svg": "",
"tools": "",
"shields": [
"https://img.shields.io/github/v/release/mitre/hdf-json-to-splunk?label=version",
"https://img.shields.io/github/downloads/mitre/hdf-json-to-splunk/total?label=github%20downloads"
]
},
{
"name": "HeimdallJS_Tools (Coming Soon!)",
"link": "",
"desc": "A set of JavaScript utilities for converting and working with compliance data for use in Heimdall apps",
"icon": "",
"app_link": "",
"app_svg": "",
"doc_link": "",
"github_link": "",
"svg": "",
"tools": ""
}
]
"image": {
"filename": "howWeSupportIt"
}
}
]
}
25 changes: 25 additions & 0 deletions src/components/AppsAndTools/AppsAndTools.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<template>
<v-container fluid>
<v-row class="ma-0">
<v-col class="pa-0">
<sec :topic="appsAndTools" :md="4" :lg="4" :xl="4" />
</v-col>
</v-row>
</v-container>
</template>

<script>
import Section from "@/components/common/BasicCard/Section.vue";
import appsAndTools from "@/assets/data/appsAndTools.json";

export default {
data() {
return {
appsAndTools,
};
},
components: {
Sec: Section,
}
};
</script>
76 changes: 76 additions & 0 deletions src/components/common/BasicCard/BasicCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<template>
<v-hover v-slot:default="{ hover }">
<v-card
outlined
class="pa-2"
style="width: 100%; height: 100%;"
:to="item.router_link"
:href="item.link"
:target="item.link ? '_blank' : '_self'"
:color="hover && (item.router_link || item.link) ? 'grey' : ''"
>
<v-icon v-if="item.icon" large style="font-size:300%" class="mt-2" :color="hover && (item.router_link || item.link) ? '#1a73e8' : ''">{{ item.icon }}</v-icon>
<v-img
v-if="item.graphic"
:src="require('@/assets/img/gif/' + item.graphic + '.gif')"
class="ma-2"
max-height="328"
/>
<v-img
v-else-if="item.graphic_frame"
v-bind:src="require('@/assets/img/gif/' + item.graphic_frame)"
class="ma-2"
max-height="328"
/>
<v-card-title class="mt-2 title align-bottom justify-center break-word" :style="hover && (item.router_link || item.link) ? 'color:#1a73e8' : ''">
<v-icon class="mr-2" :color="hover && (item.router_link || item.link) ? '#1a73e8' : ''">{{ item.side_icon }}</v-icon>
{{ item.name.replace(/_/, " ") }}
</v-card-title>
<v-spacer />
<v-card-text v-if="item.desc" class="pa-2 body-1">{{ item.desc }}</v-card-text>
<v-card-text v-if="item.bullets" class="text-left">
<ul
v-for="bullet in item.bullets"
:key="bullet"
class="body-1"
>• {{ bullet }}</ul>
</v-card-text>
<v-spacer />
<div justify="center" v-if="item.shields" class="mt-2">
<img v-for="shield in item.shields" :key="shield" class="ms-2" :src="shield" />
</div>
<v-card-actions v-if="(item.app_link || item.doc_link || item.github_link)" class="pa-0">
<v-container row dense>
<v-row justify="center">
<v-col class="pa-0">
<span v-for="(link, index) in [item.app_link, item.doc_link, item.github_link]" :key="index">
<v-tooltip top v-if="link">
<template v-slot:activator="{ on }">
<v-btn
color="primary"
:href="link"
target="_blank"
text
v-on="on"
>
<v-icon>{{ ["mdi-desktop-classic", "mdi-file-document", "mdi-github"][index] }}</v-icon>
</v-btn>
</template>
<span>{{ ["Demo", "Documentation", "Github"][index] }}</span>
</v-tooltip>
</span>
</v-col>
</v-row>
</v-container>
</v-card-actions>
</v-card>
</v-hover>
</template>

<script>
export default {
props: {
item: Object
},
};
</script>
Loading