Merge pull request #351 from zalando-stups/346-plot-violations-per-app

#346 plot violations per app and violation type
zalando-stups · Nov 3, 2015 · c32fb3d · c32fb3d
2 parents ae0f0d0 + 1d3c83f
commit c32fb3d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/client/lib/violation/src/violation-list/violation-list.jsx b/client/lib/violation/src/violation-list/violation-list.jsx
@@ -234,7 +234,7 @@ class ViolationList extends React.Component {
                         </Tabs.TabList>
                         <Tabs.TabPanel>
                             <ViolationAnalysis
-                                groupByAccount={searchParams.cross && searchParams.cross.groupByAccount}
+                                groupByAccount={searchParams.cross ? searchParams.cross.groupByAccount : true}
                                 account={searchParams.cross ? searchParams.cross.inspectedAccount : activeAccountIds[0]}
                                 violationType={searchParams.cross ? searchParams.cross.violationType : null}
                                 accounts={allAccounts}
@@ -247,7 +247,9 @@ class ViolationList extends React.Component {
                                 onConfigurationChange={this._updateSearch.bind(this, 'single')}
                                 account={searchParams.cross ? searchParams.cross.inspectedAccount : activeAccountIds[0]}
                                 accounts={allAccounts}
-                                application={searchParams.inspectedApplication}
+                                groupByApplication={searchParams.single ? searchParams.single.groupByApplication : true}
+                                application={searchParams.single ? searchParams.single.application : ''}
+                                violationType={searchParams.single ? searchParams.single.violationType : ''}
                                 violationTypes={violationTypes}
                                 violationCount={this.stores.fullstop.getViolationCountIn(searchParams.cross ? searchParams.cross.inspectedAccount : activeAccountIds[0])} />
                         </Tabs.TabPanel>

diff --git a/client/lib/violation/src/violation-overview-account/violation-overview-account.jsx b/client/lib/violation/src/violation-overview-account/violation-overview-account.jsx
@@ -13,8 +13,16 @@ class ViolationOverviewAccount extends React.Component {
         super();
     }
 
+    _selectViolationType(type) {
+        this.props.onConfigurationChange({
+            groupByApplication: false,
+            violationType: type
+        });
+    }
+
     _selectApp(app) {
         this.props.onConfigurationChange({
+            groupByApplication: true,
             application: app
         });
     }
@@ -33,16 +41,25 @@ class ViolationOverviewAccount extends React.Component {
             yScale = d3.scale.linear()
                         .domain([0, maxQuantity])
                         .range([225, 0])
-                        .nice();
+                        .nice(),
+            chartData = this.props.groupByApplication ?
+                            violationCount.filter(v => v.application === this.props.application) :
+                            violationCount.filter(v => v.type === this.props.violationType),
+            subject = this.props.groupByApplication ?
+                        <strong>App {this.props.application}</strong> :
+                        <strong>Violation {this.props.violationType}</strong>;
         if (violationCount.length) {
             return <div className='violation-account-overview'>
-                        <strong>Account {this.props.accounts[this.props.account].name} {this.props.application || ''}</strong>
+                        <span>Account {this.props.accounts[this.props.account].name} / {subject}</span>
                         <AutoWidth className='violation-account-overview-chart'>
                             <Charts.BarChart
                                 data={{
                                     label: 'Violation Count',
-                                    values: _.sortByOrder(violationCount, ['quantity'], ['desc'])
-                                            .map(c => ({ x: c.type, y: c.quantity }))
+                                    values: _.sortByOrder(chartData, ['quantity'], ['desc'])
+                                            .map(c => ({
+                                                x: this.props.groupByApplication ? c.type : c.application || '',
+                                                y: c.quantity
+                                            }))
                                 }}
                                 tooltipHtml={(x, y0, y) => y.toString()}
                                 tooltipMode='element'
@@ -60,7 +77,7 @@ class ViolationOverviewAccount extends React.Component {
                                 <Table.Column
                                     label='Application'
                                     width={200}
-                                    cellRenderer={c => <span onClick={this._selectApp.bind(this, c)} title={c}>{c}</span>}
+                                    cellRenderer={c => <span className='sortable-table-highlight' onClick={this._selectApp.bind(this, c)} title={c}>{c}</span>}
                                     dataKey='application' />
                                 <Table.Column
                                     label='Version'
@@ -71,7 +88,7 @@ class ViolationOverviewAccount extends React.Component {
                                     label='Violation Type'
                                     width={200}
                                     flexGrow={3}
-                                    cellRenderer={c => <span title={c}>{c}</span>}
+                                    cellRenderer={c => <span className='sortable-table-highlight' onClick={this._selectViolationType.bind(this, c)} title={c}>{c}</span>}
                                     dataKey='type' />
                                 <Table.Column
                                     label='Severity'
@@ -94,6 +111,8 @@ class ViolationOverviewAccount extends React.Component {
 }
 ViolationOverviewAccount.displayName = 'ViolationOverviewAccount';
 ViolationOverviewAccount.propTypes = {
+    groupByApplication: React.PropTypes.bool,
+    violationType: React.PropTypes.string,
     account: React.PropTypes.string,
     accounts: React.PropTypes.array,
     application: React.PropTypes.string,