Merge pull request #1821 from influxdata/fix/alerts_table_keys-1813

Use UUID for AlertsTable element keys to prevent overlap

CHANGELOG.md

@@ -2,6 +2,7 @@
 ### Bug Fixes
 1. [#1798](https://github.com/influxdata/chronograf/pull/1798): Fix domain not updating in visualizations when changing time range manually
 1. [#1799](https://github.com/influxdata/chronograf/pull/1799): Prevent console error spam from Dygraph.synchronize when a dashboard has only one graph
+1. [#1813](https://github.com/influxdata/chronograf/pull/1813): Guarantee UUID for each Alert Table key to prevent dropping items when keys overlap
 
 ### Features
 1. [#1714](https://github.com/influxdata/chronograf/pull/1714): Add ability to edit a dashboard graph's y-axis bounds

ui/src/alerts/components/AlertsTable.js

@@ -1,7 +1,9 @@
 import React, {Component, PropTypes} from 'react'
+
 import _ from 'lodash'
 import classnames from 'classnames'
 import {Link} from 'react-router'
+import uuid from 'node-uuid'
 
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
@@ -130,10 +132,7 @@ class AlertsTable extends Component {
           >
             {alerts.map(({name, level, time, host, value}) => {
               return (
-                <div
-                  className="alert-history-table--tr"
-                  key={`${name}-${level}-${time}-${host}-${value}`}
-                >
+                <div className="alert-history-table--tr" key={uuid.v4()}>
                   <div
                     className="alert-history-table--td"
                     style={{width: colName}}