Merge branch 'master' into 446-app-criticality-level

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '4.4'
+  - '5.10.0'
 before_script:
   - npm run lint
   - npm run format

Dockerfile

@@ -1,4 +1,4 @@
-FROM registry.opensource.zalan.do/stups/node:4.4-20
+FROM registry.opensource.zalan.do/stups/node:5.8-22
 
 MAINTAINER Zalando SE
 
@@ -10,6 +10,7 @@ ADD /scm-source.json /scm-source.json
 # copy static resources for client
 COPY ./client/dist/ /www/dist/
 COPY ./server/src/monitoring/newrelic-browser.js /www/dist/
+COPY ./server/src/monitoring/appdynamics.js /www/dist/
 COPY ./client/dist/index.html /www/
 
 # copy server
@@ -26,6 +27,13 @@ COPY ./server/src/redis-utils.js /www/
 # create env.js as user
 RUN touch /www/dist/env.js && chmod 0666 /www/dist/env.js
 
+# create appdynamics directory
+RUN mkdir -p /tmp/appd && chmod -R 0777 /tmp/appd
+RUN mkdir -p /tmp/appd/proxy && chmod -R 0777 /tmp/appd/proxy
+RUN mkdir -p /tmp/appd/proxy/c && chmod -R 0777 /tmp/appd/proxy/c
+RUN mkdir -p /tmp/appd/proxy/l && chmod -R 0777 /tmp/appd/proxy/l
+RUN mkdir -p /tmp/appd/proxy/r && chmod -R 0777 /tmp/appd/proxy/r
+
 # create new relic log directory
 RUN touch /www/newrelic_agent.log && chmod 0666 /www/newrelic_agent.log
 # new relic npm config

client/index-prod.html

@@ -79,12 +79,18 @@
         </div>
         <script src="/dist/env.js?v=${timestamp}"></script>
         <script src="/dist/bundle.js?v=${timestamp}"></script>
+
         <script>
-            if (window.YTENV_NEW_RELIC_BROWSER_APP_ID) {
+            var head = document.getElementsByTagName('head')[0],
+                js = document.createElement('script');
+            if (window.YTENV_APPDYNAMICS_EUM) {
+                // load appdynamics
+                js.src = '/dist/appdynamics.js?v=${timestamp}';
+            } else if (window.YTENV_NEW_RELIC_BROWSER_APP_ID) {
                 // load new relic
-                var head = document.getElementsByTagName('head')[0],
-                    js = document.createElement('script');
                 js.src = '/dist/newrelic-browser.js?v=${timestamp}';
+            }
+            if (js.src && js.src.length != 0) {
                 head.appendChild(js);
             }
         </script>

client/lib/application/src/router.react.jsx

@@ -64,7 +64,7 @@ class AppListHandler extends React.Component {
 
         if (!tabAccounts.length) {
             // no tab accounts => use cloud accounts, do nothing
-            KIO_ACTIONS.saveTabAccounts(cloudAccounts);
+            KIO_ACTIONS.saveTabAccounts(cloudAccounts.sort());
             return;
         }
         if (team && tabAccounts.indexOf(team) === -1) {
@@ -86,7 +86,6 @@ class AppListHandler extends React.Component {
 
     componentWillMount() {
         this.checkForTeam(this.props);
-        KIO_ACTIONS.loadTabAccounts();
         const {team, manageTabs} = this.props.location.query;
         if (manageTabs) {
             TEAM_ACTIONS.fetchAccounts();
@@ -148,6 +147,7 @@ AppListHandler.contextTypes = {
 };
 AppListHandler.fetchData = function(routerState, state) {
     // we need to know which accounts a user has access to
+    KIO_ACTIONS.loadTabAccounts();
     return requireAccounts(state, USER_ACTIONS);
 };
 var ConnectedAppListHandler =

client/lib/common/asset/less/violation/date-dropdown.less

@@ -25,6 +25,16 @@
         outline: 1px solid @gray;
         box-shadow: 0px 5px 15px @gray-light;
         display: flex;
+        flex-direction: column;
+
+        header {
+            text-align: center;
+        }
+
+        > *:not(header) {
+            display: flex;
+            flex-direction: row;
+        }
 
         .dateDropdown-quickselect {
             flex: 0 0 auto;

client/lib/common/asset/less/violation/violation-card.less

@@ -24,6 +24,11 @@
     header {
         color: @gray;
     }
+
+    .violationCard-close {
+        float: right;
+        margin-left: @padding;
+    }
     .violationCard-id {
         float: right;
         &:before {

client/lib/common/asset/less/violation/violation.less

@@ -7,6 +7,30 @@
     .violationTable {
         margin-bottom: 12em;
     }
+
+    .violationCard {
+        position: relative;
+        left: -10px;
+        &:before {
+            content: ' ';
+            width: 10px;
+            height: 42px;
+            top: -42px;
+            left: -10px;
+            background: @gray-light;
+            position: absolute;
+        }
+        &.is-resolved {
+            &:before {
+                background: @green;
+            }
+        }
+        &[data-priority="1"]:not(.is-resolved) {
+            &:before {
+                background: @red;
+            }
+        }
+    }
 }
 
 .violationViz {
@@ -84,9 +108,6 @@
                     overflow: hidden;
                     border-bottom: 1px solid @gray-lighter;
                 }
-                &.selected {
-                    background: @orange-light;
-                }
             }
         }
 

client/lib/common/src/data/kio/application-store.js

@@ -43,7 +43,7 @@ function ApplicationStore(state = DEFAULT_STATE, action) {
         return state.set(PREF_ACCOUNT, action.payload);
     } else if (type === Types.LOAD_TAB_ACCOUNTS ||
                type === Types.SAVE_TAB_ACCOUNTS) {
-        return state.set('tabAccounts', action.payload);
+        return state.set('tabAccounts', Immutable.fromJS(action.payload));
     }
     return state;
 }

client/lib/common/src/data/kio/kio-getter.js

@@ -130,7 +130,7 @@ function getPreferredAccount(state) {
 }
 
 function getTabAccounts(state) {
-    return state.applications.get('tabAccounts');
+    return state.applications.get('tabAccounts').toJS();
 }
 
 export {

client/lib/common/src/data/notification/notification-store.js

@@ -10,7 +10,7 @@ function NotificationStore(notifications = [], action) {
     if (action.type === Types.ADD_NOTIFICATION) {
         // add
         let [message, type] = action.payload;
-        notifications = notifications.concat([{
+        return notifications.concat([{
                     type: type || 'default',
                     message: message,
                     id: uniq(),
@@ -19,12 +19,15 @@ function NotificationStore(notifications = [], action) {
     } else if (action.type === Types.REMOVE_NOTIFICATION) {
         // remove
         let id = action.payload;
-        notifications = notifications.filter(n => n.id !== id);
+        return notifications.filter(n => n.id !== id);
     } else if (action.type === Types.REMOVE_NOTIFICATIONS_OLDER_THAN) {
         // remove old
-        let now = Date.now(),
-            ms = action.payload;
-        notifications = notifications.filter(n => n.created > (now - ms));
+        const now = Date.now(),
+              ms = action.payload,
+              containsOld = notifications.some(n => n.created <= (now - ms));
+        if (containsOld) {
+            return notifications.filter(n => n.created > (now - ms));
+        }
     }
     return notifications;
 }

client/lib/common/test/notification/notification-store.test.js

@@ -21,4 +21,13 @@ describe('The redux notification store', () => {
         expect(msg.created).to.be.defined;
         expect(msg.message).to.equal('Hello');
     });
+
+    it('should return the same state if there is nothing to remove', () => {
+        const state = [],
+              newState = (Store(state, {
+                type: Type.REMOVE_NOTIFICATIONS_OLDER_THAN,
+                payload: 5000
+              }));
+        expect(state === newState).to.be.true;
+    });
 });

client/lib/violation/src/routes.js

@@ -11,7 +11,7 @@ function short({shortened}) {
 }
 
 function vioDetail({violationId}) {
-    return `violation/${violationId}`;
+    return `/violation/${violationId}`;
 }
 
 export {

client/lib/violation/src/violation-card/violation-card.jsx

@@ -5,6 +5,7 @@ import Timestamp from 'react-time';
 import Config from 'common/src/config';
 import Badge from 'common/src/badge.jsx'
 import 'common/asset/less/violation/violation-card.less';
+import * as Routes from 'violation/src/routes';
 import ViolationViz from 'violation/src/violation-viz.jsx';
 import listenToOutsideClick from 'react-onclickoutside/decorator';
 
@@ -28,6 +29,12 @@ class ViolationCard extends React.Component {
         });
     }
 
+    close() {
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+    }
+
     resolve(evt) {
         if (evt) {
             evt.preventDefault();
@@ -44,7 +51,7 @@ class ViolationCard extends React.Component {
         if (!this.props.violation) {
             return null;
         }
-        let {violation} = this.props,
+        let {violation, closable} = this.props,
             account = this.props.accounts[violation.account_id],
             {violation_type} = violation;
         return <div
@@ -54,9 +61,14 @@ class ViolationCard extends React.Component {
                     className={'violationCard ' +
                                 (violation.comment != null ? 'is-resolved ' : '')}>
                     <header>
+                        {closable ?
+                            <div onClick={this.close.bind(this)}
+                                 className='btn btn-default violationCard-close'>
+                                <Icon name='times' /> Close</div>
+                            : null}
                         <div className='violationCard-id'>
                             <Link
-                                to={`/violation/${violation.id}`}>{violation.id}
+                                to={`${Routes.vioDetail({violationId: violation.id})}`}>{violation.id}
                             </Link>
                         </div>
                         <div>

client/lib/violation/src/violation/date-dropdown.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import Icon from 'react-fa';
+import Timestamp from 'react-time';
+import Config from 'common/src/config';
 import moment from 'moment';
 import Picker from 'react-date-picker';
 import 'react-date-picker/index.css';
@@ -11,7 +13,8 @@ class DateDropdown extends React.Component {
         super();
         this.state = {
             outsideClickHandler: null,
-            visible: false
+            visible: false,
+            range: props.range
         };
     }
 
@@ -22,13 +25,19 @@ class DateDropdown extends React.Component {
 
     handleClickOutside() {
         this.setState({
-            visible: false
+            visible: false,
+            range: this.props.range
         });
     }
 
-    onUpdate(stringRange, momentRange) {
-        if (this.props.onUpdate) {
-            this.props.onUpdate(momentRange);
+    componentWillReceiveProps({range}) {
+        this.setState({range});
+    }
+
+    onUpdate(_, range) {
+        this.setState({range});
+        if (this.props.onUpdate && range.length > 1) {
+            this.props.onUpdate(range);
         }
     }
 
@@ -47,21 +56,26 @@ class DateDropdown extends React.Component {
                 </header>
                 {this.state.visible ?
                     <div className='dateDropdown-dropdown'>
-                        <div className='dateDropdown-quickselect'>
-                            <small>Quickselect</small>
-                            <ul>
-                                <li onClick={() => this.updateWithMinus(1, 'day')}>Yesterday</li>
-                                <li onClick={() => this.updateWithMinus(1, 'week')}>Last 7 days</li>
-                                <li onClick={() => this.updateWithMinus(1, 'month')}>Last 4 weeks</li>
-                                <li onClick={() => this.updateWithMinus(6, 'months')}>Last 6 months</li>
-                                <li onClick={() => this.updateWithMinus(1, 'year')}>Last year</li>
-                            </ul>
-                        </div>
-                        <div className='dateDropdown-container'>
-                            <Picker
-                                weekStartDay={1}
-                                onRangeChange={this.onUpdate.bind(this)}
-                                range={this.props.range} />
+                        <header>
+                            <Timestamp value={this.props.range[0]} format={'YYYY-MM-DD'} /> – <Timestamp value={this.props.range[1]} format={'YYYY-MM-DD'} />
+                        </header>
+                        <div>
+                            <div className='dateDropdown-quickselect'>
+                                <small>Quickselect</small>
+                                <ul>
+                                    <li onClick={() => this.updateWithMinus(1, 'day')}>Yesterday</li>
+                                    <li onClick={() => this.updateWithMinus(1, 'week')}>Last 7 days</li>
+                                    <li onClick={() => this.updateWithMinus(1, 'month')}>Last 4 weeks</li>
+                                    <li onClick={() => this.updateWithMinus(6, 'months')}>Last 6 months</li>
+                                    <li onClick={() => this.updateWithMinus(1, 'year')}>Last year</li>
+                                </ul>
+                            </div>
+                            <div className='dateDropdown-container'>
+                                <Picker
+                                    weekStartDay={1}
+                                    range={this.state.range}
+                                    onRangeChange={this.onUpdate.bind(this)} />
+                            </div>
                         </div>
                     </div> :
                     null}

client/lib/violation/src/violation/violation-table.jsx

@@ -160,6 +160,13 @@ class ViolationTable extends React.Component {
         this.props.onSetPageSize(size);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return this.props.violations !== nextProps.violations ||
+                this.props.accounts !== nextProps.accounts ||
+                this.props.params !== nextProps.params ||
+                this.state.numPages !== nextState.numPages;
+    }
+
     render() {
         var gridColumns = [
                 'account_id',
@@ -205,11 +212,6 @@ class ViolationTable extends React.Component {
                 customComponent: BooleanCell
             }];
 
-        const rowMeta = {
-            bodyCssClassName: (row) => this.props.selectedViolation === row.id ?
-            'standard-row selected' :
-            'standard-row'
-        };
         // ui of setting page size broken because of this https://github.com/GriddleGriddle/Griddle/issues/283
         return <Griddle
                     tableClassName='violationTable'
@@ -233,7 +235,6 @@ class ViolationTable extends React.Component {
                     showSettings={true}
                     columns={gridColumns}
                     columnMetadata={columnMetadata}
-                    rowMetadata={rowMeta}
                     results={this.props.violations} />;
     }
 }