forked from gdg-x/aura
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* added dark mode, added standard header, refactored the page layout to match other pages Signed-off-by: Will Dower <[email protected]> * Merged in Will's changes and the checkbox workaround * Rename for the filters as eugene requested * Index check no longer necessary since we're showing the count under the nist title too * Use words instead of true/false * load the menu in full * Freeze the json object and add eager to the combobox to make the hit on page load * Updated version of cheetah grid * added zebra striping Signed-off-by: Will Dower <[email protected]> * Changed subheader wording Signed-off-by: Will Dower <[email protected]> * Merged in Will's changes and implemented textwrap along with some other niceties. There are bugs in the library tho so it won't work properly. * All -> Total Assessment Range * Upgrade version of cheetah-grid (not vue-cheetah-grid, but it's dependency) as well as that of some other non-package.json dependencies * Changed it back to sonarq and added fortify * Adjusted column widths * Added reset functionality to the checkboxes * Dunno how this got uncommitted, but we need the controlTable in a module * Updated version numbers * Increased size of checkbox * Fix column header not updating bug * Fix dark mode checkmarks are tough to see * Added background color to the checkbox header when it wasn't x. Also mucked around with some of the colors and added an explicit selection color. * Increased size of row for checkmark filter row * Fixed sizing of components. 1) Removed padding around 'container' to reduce wasted space/vertical height. 2) Cleaned up css. 3) Cleaned up code to use vuetify wrappers around things properly. 4) Set heights to the table that looked good enough. 5) Set up flexbox to make the filters stack on small screens but spread out on big ones. * Added legend and fixed spacing some more * Fixed language a bit for the legend * Removed control table from header section and added links to it to the validation and faq pages * Clean up code * Added column selector options to the legend * Will suggested putting 'show' in front of the descriptions to increase clarity * added backiend json to hold legend data, updated legend appearance Signed-off-by: Will Dower <[email protected]> * tweaked header on control table Signed-off-by: Will Dower <[email protected]> * Made table colored instead of greyscale * Got rid of unused css and converted highlight color in legend from the vuetify theme to the table theme instead * Changed highlight color cause the blue/grey was kinda hard to see * Changed from teal to a greener color - 008080 -> 00804d * Further color changes but this time for the themes for the table * computed was caching results which messed things up - moved it over to a method * Update version of eslint-plugin-vue but bugfix required is still not released * Made quotes consistent and converted in-lined constant into a variable * Fixed missing brace * Got rid of unnecessary stuff * Fixed incorrect highlight color bug * Fixed control table view's cols definition * Firebase 7.15.5 which is the latest is broken on ie11, manually set it to one version earlier. Co-authored-by: Will Dower <[email protected]> Co-authored-by: Amndeep Singh Mann <[email protected]>
- Loading branch information
1 parent
0a2be7c
commit d93b28f
Showing
16 changed files
with
8,317 additions
and
13,313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
module.exports = { | ||
presets: [ | ||
["@babel/preset-env"], | ||
["@vue/app", { useBuiltIns: "entry"}] | ||
] | ||
presets: [ | ||
["@babel/preset-env"], | ||
["@vue/app", { useBuiltIns: "entry"}] | ||
], | ||
plugins: ["@babel/plugin-proposal-nullish-coalescing-operator"], | ||
}; |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"controlTable" : [ | ||
{ | ||
"legend" : [ | ||
{ | ||
"name" : "InSpec", | ||
"desc" : "Chef InSpec (and our InSpec profiles): tool for assessing configuration settings, vulnerabilities, and least functionality" | ||
}, | ||
{ | ||
"name" : "SonarQ", | ||
"desc" : "SonarQube: open-source static code security analysis tool" | ||
}, | ||
{ | ||
"name" : "Fortify", | ||
"desc" : "HP Fortify: commercial static code security analysis tool" | ||
}, | ||
{ | ||
"name" : "ZAP", | ||
"desc" : "OWASP ZAP: open-source dynamic application security analysis tool" | ||
}, | ||
{ | ||
"name" : "Burp", | ||
"desc" : "Burp Suite Pro: commercial dynamic application security analysis tool" | ||
}, | ||
{ | ||
"name" : "Column Selector Options", | ||
"desc" : "<span class=\"checkbox\">☒</span> show all cells, <span class=\"checkbox\">☑</span> show filled cells, <span class=\"checkbox\">☐</span> show blank cells" | ||
} | ||
] | ||
} | ||
] | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,283 @@ | ||
<template> | ||
<div class="wrapper"> | ||
<v-container class="d-flex flex-wrap flex-column"> | ||
<v-row> | ||
<v-col cols="12" sm="6"> | ||
<v-combobox | ||
v-model="controlFilters" | ||
clearable | ||
deletable-chips | ||
dense | ||
:filter="caselessFilter" | ||
hide-selected | ||
:hint="'If you can see this hint, it probably means you\'re typing a filter that won\'t work'" | ||
:items="[{ header: 'Select an option or type one and hit enter' }].concat(controls)" | ||
:label="'Control Row Filter'" | ||
eager | ||
:menu-props="'auto'" | ||
multiple | ||
small-chips | ||
/> | ||
</v-col> | ||
<v-col cols="12" sm="6"> | ||
<v-combobox | ||
v-model="profileFilters" | ||
clearable | ||
deletable-chips | ||
dense | ||
:filter="caselessFilter" | ||
hide-selected | ||
:hint="'If you can see this hint, it probably means you\'re typing a filter that won\'t work'" | ||
:items="[{ header: 'Select an option or type one and hit enter' }].concat(profiles)" | ||
:label="'Assessment Column Filter'" | ||
eager | ||
:menu-props="'auto'" | ||
multiple | ||
small-chips | ||
/> | ||
</v-col> | ||
</v-row> | ||
<v-row> | ||
<v-col> | ||
<v-sheet :width="'100%'" :height="'70vh'"> | ||
<c-grid | ||
ref="grid" | ||
class="ma-0" | ||
:data="data" | ||
:frozen-col-count="2" | ||
:theme="theme(this.$vuetify.theme.dark)" | ||
:underlay-background-color="this.$vuetify.theme.dark ? 'black' : 'white'" | ||
:headerRowHeight="[70, 25, 20]" | ||
:defaultRowHeight="20" | ||
:defaultColWidth="130" | ||
> | ||
<template slot="layout-header"> | ||
<c-grid-layout-row> | ||
<c-grid-header | ||
v-for="col of columns" | ||
:key="col.value" | ||
:width="col.width ? col.width : undefined" | ||
:header-field="col.value" | ||
:header-type="'multilinetext'" | ||
:header-style="{ autoWrapText: true, textAlign: 'center', textBaseline: 'middle' }" | ||
:header-action="'check'" | ||
@changed-header-value="onChangeHeaderValue" | ||
>{{col.text}}</c-grid-header> | ||
</c-grid-layout-row> | ||
<c-grid-layout-row> | ||
<c-grid-header | ||
v-for="col of columns" | ||
:key="col.value" | ||
:width="col.width ? col.width : undefined" | ||
:header-field="col.value" | ||
:header-style="{ ...{ textAlign: 'center', textBaseline: 'middle' }, ...{ font: col.checkmarkFont } }" | ||
:header-action="'check'" | ||
@changed-header-value="onChangeHeaderValue" | ||
>{{col.checkmark}}</c-grid-header> | ||
</c-grid-layout-row> | ||
<c-grid-layout-row> | ||
<c-grid-header | ||
v-for="col of columns" | ||
:key="col.value" | ||
:width="col.width ? col.width : undefined" | ||
:header-field="col.value" | ||
:header-style="{ textAlign: 'center', textBaseline: 'middle' }" | ||
:header-action="'check'" | ||
@changed-header-value="onChangeHeaderValue" | ||
>{{data.filter(control => control[col.value]).length.toString()}}</c-grid-header> | ||
</c-grid-layout-row> | ||
</template> | ||
<template slot="layout-body"> | ||
<c-grid-layout-row> | ||
<c-grid-column | ||
v-for="col of columns" | ||
:key="col.value" | ||
:field="col.field" | ||
:column-type="col.type" | ||
:column-style="{ textAlign: col.align, textBaseline: 'middle' }" | ||
/> | ||
</c-grid-layout-row> | ||
</template> | ||
</c-grid> | ||
</v-sheet> | ||
</v-col> | ||
</v-row> | ||
<v-row> | ||
<v-col> | ||
<v-card flat outlined class="px-2"> | ||
<v-row dense> | ||
<v-col> | ||
<v-card class="d-flex justify-center" dense flat tile>Legend</v-card> | ||
<v-divider class="" /> | ||
</v-col> | ||
</v-row> | ||
<v-row dense> | ||
<v-col | ||
cols="12" | ||
sm="6" | ||
v-for="(entry, index) of controlTable.legend" | ||
:key="index" | ||
class="pa-0" | ||
> | ||
<div class="px-2 ma-1 google-font" :style="'border-left:1px solid #a88132'"> | ||
<p class="ma-0" style="font-size:0.9rem">{{entry.name}}</p> | ||
<span style="font-size:0.8rem" v-html="entry.desc" /> | ||
</div> | ||
</v-col> | ||
</v-row> | ||
</v-card> | ||
</v-col> | ||
</v-row> | ||
</v-container> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { createNamespacedHelpers } from "vuex"; | ||
import * as cGridAll from "vue-cheetah-grid"; | ||
import controlTable from "@/assets/data/controltable.json"; | ||
const { mapGetters, mapMutations } = createNamespacedHelpers("controlTable"); | ||
const materialDesignTheme = cGridAll.cheetahGrid.themes.MATERIAL_DESIGN; | ||
export default { | ||
components: { | ||
...cGridAll | ||
}, | ||
data() { | ||
return { | ||
controlTable: controlTable.controlTable[0] | ||
}; | ||
}, | ||
computed: { | ||
...mapGetters({ | ||
data: "getData", | ||
columns: "getColumns", | ||
controls: "getControls", | ||
profiles: "getProfiles", | ||
getControlFilters: "getControlFilters", | ||
getProfileFilters: "getProfileFilters" | ||
}), | ||
controlFilters: { | ||
get() { | ||
return this.getControlFilters; | ||
}, | ||
set(val) { | ||
this.setControlFilters(val); | ||
} | ||
}, | ||
profileFilters: { | ||
get() { | ||
return this.getProfileFilters; | ||
}, | ||
set(val) { | ||
this.setProfileFilters(val); | ||
} | ||
}, | ||
}, | ||
methods: { | ||
...mapMutations({ | ||
setControlFilters: "setControlFilters", | ||
setProfileFilters: "setProfileFilters", | ||
updateColumnFilters: "updateColumnFilters" | ||
}), | ||
caselessFilter(item, queryText, itemText) { | ||
if (item.header) { | ||
return false; | ||
} | ||
return itemText.toLowerCase().includes(queryText.toLowerCase()); | ||
}, | ||
onChangeHeaderValue({ field }) { | ||
this.updateColumnFilters(field); | ||
this.$nextTick(() => this.$refs.grid.invalidate()); | ||
}, | ||
theme(isDark) { | ||
const that = this; | ||
if (isDark) { | ||
return materialDesignTheme.extends({ | ||
color: "white", | ||
defaultBgColor({ row, col }) { | ||
// change the color of the checked row. | ||
// '-3' since the row value given is for the displayed table (we have 3 header rows) whereas the data index starts at 0 | ||
if (that.data[row-3][that.columns[col].value] === true) { | ||
return "#4caf50"; | ||
} else if (row % 2) { | ||
return "#253341"; | ||
} else { | ||
return "#1a242f"; | ||
} | ||
}, | ||
borderColor: "#2f4154", | ||
frozenRowsColor: "white", | ||
frozenRowsBgColor({col}) { | ||
if (col !== 0 && that.columns[col].checkmark !== "☒") { | ||
return "#a88132"; | ||
} | ||
return "#35495e"; | ||
}, | ||
frozenRowsBorderColor: "#2f4154", | ||
selectionBgColor: "#495b6e", | ||
highlightBgColor: "#495b6e", | ||
highlightBorderColor: "#495b6e", | ||
checkbox: { | ||
checkBgColor: "#35495e", | ||
borderColor: "#35495e" | ||
}, | ||
}); | ||
} else { | ||
return materialDesignTheme.extends({ | ||
color({col}) { | ||
if (col === 0) { | ||
return "black"; | ||
} | ||
return "white"; | ||
}, | ||
defaultBgColor({ row, col }) { | ||
// change the color of the checked row. | ||
// '-3' since the row value given is for the displayed table (we have 3 header rows) whereas the data index starts at 0 | ||
if (that.data[row-3][that.columns[col].value] === true) { | ||
return "#4caf50"; | ||
} else if (row % 2) { | ||
return "#f9f9f9"; | ||
} else { | ||
return "#ffffff"; | ||
} | ||
}, | ||
borderColor: "#dddddd", | ||
frozenRowsColor: "black", | ||
frozenRowsBgColor({col}) { | ||
if (col !== 0 && that.columns[col].checkmark !== "☒") { | ||
return "#deaf50"; | ||
} | ||
return "white"; | ||
}, | ||
frozenRowsBorderColor: "#dddddd", | ||
selectionBgColor: "#c7c7c7", | ||
highlightBgColor: "#c7c7c7", | ||
highlightBorderColor: "#c7c7c7", | ||
checkbox: { | ||
checkBgColor: "#35495e", | ||
borderColor: "#35495e" | ||
}, | ||
}); | ||
} | ||
}, | ||
} | ||
}; | ||
</script> | ||
|
||
<style lang='scss'> | ||
.wrapper { | ||
width: 100%; | ||
.container { | ||
padding: 0; | ||
.checkbox { | ||
font-size: 30px; | ||
vertical-align: sub; | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.