Skip to content

Commit

Permalink
Amann control tables (#72)
Browse files Browse the repository at this point in the history
* 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
3 people authored Jun 29, 2020
1 parent 0a2be7c commit d93b28f
Show file tree
Hide file tree
Showing 16 changed files with 8,317 additions and 13,313 deletions.
9 changes: 5 additions & 4 deletions babel.config.js
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"],
};
20,865 changes: 7,730 additions & 13,135 deletions package-lock.json

Large diffs are not rendered by default.

14 changes: 4 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,20 @@
"babel-polyfill": "^6.26.0",
"core-js": "^2.6.11",
"css-vars-ponyfill": "^2.3.1",
"firebase": "^7.14.0",
"firebase": "7.15.4",
"intersection-observer": "^0.10.0",
"material-design-icons": "^3.0.1",
"register-service-worker": "^1.7.1",
"tabulator-tables": "^4.6.2",
"vue": "^2.6.11",
"vue-cheetah-grid": "^0.20.3",
"vue-csv-loader": "^0.1.5",
"vue-debounce": "^2.5.3",
"vue-papa-parse": "^1.3.0",
"vue-cheetah-grid": "^0.22.3",
"vue-router": "^3.1.6",
"vue-svg-inline-loader": "^1.5.0",
"vue-svg-loader": "^0.15.0",
"vue-tabulator": "^1.2.2",
"vuetify": "^2.2.20",
"vuex": "^3.1.3"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"@babel/preset-env": "^7.10.2",
"@vue/cli": "^4.3.1",
"@vue/cli-plugin-babel": "^3.12.1",
Expand All @@ -39,10 +35,8 @@
"@vue/cli-service": "^3.12.1",
"@vue/cli-service-global": "^4.3.1",
"babel-eslint": "^10.1.0",
"csv-loader": "^3.0.3",
"deepmerge": "^4.2.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vue": "^6.2.2",
"fibers": "^5.0.0",
"sass": "^1.26.7",
"sass-loader": "^7.3.1",
Expand Down
32 changes: 32 additions & 0 deletions src/assets/data/controltable.json
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"
}
]
}
]
}
235 changes: 123 additions & 112 deletions src/assets/data/faqs.json

Large diffs are not rendered by default.

File renamed without changes.
283 changes: 283 additions & 0 deletions src/components/controlTable/ControlTable.vue
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>
4 changes: 2 additions & 2 deletions src/components/core/View.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-container fluid :class="this.$vuetify.theme.dark == true?'black':'white'" class="pa-0">
<v-container fluid :class="this.$vuetify.theme.dark == true ? 'black' : 'white'" class="pa-0">
<v-slide-y-reverse-transition>
<router-view v-show="show" />
</v-slide-y-reverse-transition>
Expand All @@ -17,4 +17,4 @@ export default {
this.show = true;
}
};
</script>
</script>
Loading

0 comments on commit d93b28f

Please sign in to comment.