From 9be4b92b22a11239f2fabaec00a1ddc3ac3aa5c3 Mon Sep 17 00:00:00 2001 From: Nikolaus Piccolotto Date: Tue, 3 Nov 2015 11:22:11 +0100 Subject: [PATCH] #349 collapsible filter and general styling :lipstick: --- .../asset/less/common/account-selector.less | 2 - .../common/asset/less/common/collapsible.less | 8 + .../asset/less/violation/violation-list.less | 13 +- client/lib/common/src/collapsible.jsx | 3 +- client/lib/violation/src/account-selector.jsx | 1 - .../violation-analysis/violation-analysis.jsx | 161 +++++++++--------- .../src/violation-list/violation-list.jsx | 73 ++++---- .../violation-overview-account.jsx | 119 ++++++------- 8 files changed, 200 insertions(+), 180 deletions(-) diff --git a/client/lib/common/asset/less/common/account-selector.less b/client/lib/common/asset/less/common/account-selector.less index 7566df28..9f2bce06 100644 --- a/client/lib/common/asset/less/common/account-selector.less +++ b/client/lib/common/asset/less/common/account-selector.less @@ -1,8 +1,6 @@ @import "../variables"; .account-selector { - padding: @padding-small 0; - label { .transition(background, color); cursor: pointer; diff --git a/client/lib/common/asset/less/common/collapsible.less b/client/lib/common/asset/less/common/collapsible.less index bd13d792..db88902f 100644 --- a/client/lib/common/asset/less/common/collapsible.less +++ b/client/lib/common/asset/less/common/collapsible.less @@ -4,5 +4,13 @@ header { user-select: none; cursor: pointer; + border-bottom: 1px solid; + display: inline-block; + margin-top: @padding-tiny; + margin-bottom: @padding-small; + color: @gray; + &:hover { + color: @orange; + } } } \ No newline at end of file diff --git a/client/lib/common/asset/less/violation/violation-list.less b/client/lib/common/asset/less/violation/violation-list.less index 10f738f7..12410ba1 100644 --- a/client/lib/common/asset/less/violation/violation-list.less +++ b/client/lib/common/asset/less/violation/violation-list.less @@ -2,15 +2,22 @@ .violationList { - .account-selector { - padding-bottom: @padding-big; + .violationList-copy-url { + margin-bottom: @padding-small 0; } .violationList-datepicker { display: flex; flex-direction: row; + } + + .violationList-filter { + margin-bottom: @padding-small; + } + + .violationList-btn-group { > :first-child { - padding-right: @padding-small; + margin-right: 3px; } } diff --git a/client/lib/common/src/collapsible.jsx b/client/lib/common/src/collapsible.jsx index eca333d7..6fcb2e52 100644 --- a/client/lib/common/src/collapsible.jsx +++ b/client/lib/common/src/collapsible.jsx @@ -17,7 +17,7 @@ class Collapsible extends React.Component { } render() { - return
+ return
{this.state.collapsed ? @@ -33,6 +33,7 @@ class Collapsible extends React.Component { Collapsible.displayName = 'Collapsible'; Collapsible.propTypes = { header: React.PropTypes.object, + initialCollapsed: React.PropTypes.bool, children: React.PropTypes.oneOf([React.PropTypes.array, React.PropTypes.object]) }; export default Collapsible; diff --git a/client/lib/violation/src/account-selector.jsx b/client/lib/violation/src/account-selector.jsx index d7d2ae6c..a08555de 100644 --- a/client/lib/violation/src/account-selector.jsx +++ b/client/lib/violation/src/account-selector.jsx @@ -95,7 +95,6 @@ class AccountSelector extends React.Component { activeAccounts = partitionedAccounts[0], inactiveAccounts = partitionedAccounts[1]; return
-
Show violations in accounts:
{!this.state.allSelected ?
diff --git a/client/lib/violation/src/violation-analysis/violation-analysis.jsx b/client/lib/violation/src/violation-analysis/violation-analysis.jsx index 89619642..8425bbb3 100644 --- a/client/lib/violation/src/violation-analysis/violation-analysis.jsx +++ b/client/lib/violation/src/violation-analysis/violation-analysis.jsx @@ -55,89 +55,88 @@ class ViolationAnalysis extends React.Component { render() { let {violationCount, violationTypes} = this.props, chartData = []; - if (violationCount.length) { - violationCount = violationCount.map(c => ({ - type: c.type, - typeHelp: violationTypes[c.type].help_text, - typeSeverity: violationTypes[c.type].violation_severity, - account: c.account, - accountName: this.props.accounts[c.account] ? this.props.accounts[c.account].name : '?', - quantity: c.quantity - })); - chartData = this.props.groupByAccount ? - violationCount.filter(c => c.account === this.props.account) : - violationCount.filter(c => c.type === this.props.violationType); - - let maxQuantity = chartData.reduce((prev, cur) => prev > cur.quantity ? prev : cur.quantity, 0), - yScale = d3.scale - .linear() - .domain([0, maxQuantity]) - .range([225, 0]) - .nice(); - - return
- {chartData.length ? - - - {this.props.groupByAccount ? - Account {this.props.accounts[this.props.account] ? this.props.accounts[this.props.account].name : '?'} : - Violation {this.props.violationType}} - - ({ x: this.props.groupByAccount ? c.type : c.accountName, y: c.quantity })) - }} - tooltipHtml={(x, y0, y) => y.toString()} - tooltipMode='element' - height={300} - margin={{top: 50, left: 50, right: 25, bottom: 25}} - yScale={yScale} - yAxis={{label: '# Violations', innerTickSize: -10000}} /> - - : - null} - - `${row.type} ${row.account} ${row.accountName}`.toLowerCase()} - height={Math.min((violationCount.length + 1) * 50 + 2, 1500)} - rows={violationCount}> - - - - {c}} - dataKey='typeSeverity' /> - {c}} - dataKey={'quantity'} /> - - -
; + if (!violationCount.length) { + return
No violations!
; } + violationCount = violationCount.map(c => ({ + type: c.type, + typeHelp: violationTypes[c.type].help_text, + typeSeverity: violationTypes[c.type].violation_severity, + account: c.account, + accountName: this.props.accounts[c.account] ? this.props.accounts[c.account].name : '?', + quantity: c.quantity + })); + chartData = this.props.groupByAccount ? + violationCount.filter(c => c.account === this.props.account) : + violationCount.filter(c => c.type === this.props.violationType); + + let maxQuantity = chartData.reduce((prev, cur) => prev > cur.quantity ? prev : cur.quantity, 0), + yScale = d3.scale + .linear() + .domain([0, maxQuantity]) + .range([225, 0]) + .nice(); - return
No violations!
; + return
+ {chartData.length ? + + + {this.props.groupByAccount ? + Account {this.props.accounts[this.props.account] ? this.props.accounts[this.props.account].name : '?'} : + Violation {this.props.violationType}} + + ({ x: this.props.groupByAccount ? c.type : c.accountName, y: c.quantity })) + }} + tooltipHtml={(x, y0, y) => y.toString()} + tooltipMode='element' + height={300} + margin={{top: 50, left: 50, right: 25, bottom: 25}} + yScale={yScale} + yAxis={{label: '# Violations', innerTickSize: -10000}} /> + + : + null} + + `${row.type} ${row.account} ${row.accountName}`.toLowerCase()} + height={Math.min((violationCount.length + 1) * 50 + 2, 1500)} + rows={violationCount}> + + + + {c}} + dataKey='typeSeverity' /> + {c}} + dataKey={'quantity'} /> + + +
; } } ViolationAnalysis.displayName = 'ViolationAnalysis'; diff --git a/client/lib/violation/src/violation-list/violation-list.jsx b/client/lib/violation/src/violation-list/violation-list.jsx index ed4c7389..882de6d5 100644 --- a/client/lib/violation/src/violation-list/violation-list.jsx +++ b/client/lib/violation/src/violation-list/violation-list.jsx @@ -6,6 +6,7 @@ import moment from 'moment'; import lzw from 'lz-string'; import {merge} from 'common/src/util'; import Datepicker from 'common/src/datepicker.jsx'; +import Collapsible from 'common/src/collapsible.jsx'; import Clipboard from 'react-copy-to-clipboard'; import AccountOverview from 'violation/src/violation-overview-account/violation-overview-account.jsx'; import AccountSelector from 'violation/src/account-selector.jsx'; @@ -184,45 +185,51 @@ class ViolationList extends React.Component {
Violations of the STUPS policy and bad practices in accounts you have access to.
-
- Show violations between: -
-
- - -
- You can filter by resolved or unresolved violations. -
-
- Show resolved -
-
- Show unresolved -
-
- - -
+
Copy sharing URL
+ +
+ Show violations between: +
+ + +
+
+
+ You can filter by resolved or unresolved violations. +
+
+ Show resolved +
+
+ Show unresolved +
+
+
+
+ +
+ No violations!
; + } + let violationCount = this.props .violationCount .map(v => ({ @@ -48,65 +52,62 @@ class ViolationOverviewAccount extends React.Component { subject = this.props.groupByApplication ? App {this.props.application} : Violation {this.props.violationType}; - if (violationCount.length) { - return
- Account {this.props.accounts[this.props.account].name} / {subject} - - ({ - x: this.props.groupByApplication ? c.type : c.application || '', - y: c.quantity - })) - }} - tooltipHtml={(x, y0, y) => y.toString()} - tooltipMode='element' - height={300} - margin={{top: 50, left: 50, right: 25, bottom: 25}} - yScale={yScale} - yAxis={{label: '# Violations', innerTickSize: -10000}} /> - - - `${row.application} ${row.version} ${row.type}`} - rows={violationCount}> - {c}} - dataKey='application' /> - {c}} - dataKey='version' /> - {c}} - dataKey='type' /> - {c}} - dataKey='typeSeverity' /> - {c}} - dataKey='quantity' /> - - -
; - } - return
No violations!
; + return
+ Account {this.props.accounts[this.props.account].name} / {subject} + + ({ + x: this.props.groupByApplication ? c.type : c.application || '', + y: c.quantity + })) + }} + tooltipHtml={(x, y0, y) => y.toString()} + tooltipMode='element' + height={300} + margin={{top: 50, left: 50, right: 25, bottom: 25}} + yScale={yScale} + yAxis={{label: '# Violations', innerTickSize: -10000}} /> + + + `${row.application} ${row.version} ${row.type}`} + rows={violationCount}> + {c}} + dataKey='application' /> + {c}} + dataKey='version' /> + {c}} + dataKey='type' /> + {c}} + dataKey='typeSeverity' /> + {c}} + dataKey='quantity' /> + + +
; } } ViolationOverviewAccount.displayName = 'ViolationOverviewAccount';