Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(ui): use stable react component keys

pull/5947/head
Pavel Zavora 2022-06-20 13:51:07 +02:00
parent 4723e46710
commit 164d1696ba
16 changed files with 30 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/admin/components/chronograf/AllUsersTable.js
View File

@ -1,8 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import uuid from 'uuid'
import AllUsersTableHeader from 'src/admin/components/chronograf/AllUsersTableHeader'
import AllUsersTableRowNew from 'src/admin/components/chronograf/AllUsersTableRowNew'
import AllUsersTableRow from 'src/admin/components/chronograf/AllUsersTableRow'
@ -138,10 +136,10 @@ class AllUsersTable extends Component {
</thead>
<tbody>
{users.length ? (
users.map(user => (
users.map((user,i) => (
<AllUsersTableRow
user={user}
key={uuid.v4()}
key={user.id}
organizations={organizations}
onAddToOrganization={this.handleAddToOrganization}
onRemoveFromOrganization={this.handleRemoveFromOrganization}

3
ui/src/admin/components/chronograf/OrganizationsTable.js
View File

@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import uuid from 'uuid'
import _ from 'lodash'
import OrganizationsTableRow from 'src/admin/components/chronograf/OrganizationsTableRow'
@ -90,7 +89,7 @@ class OrganizationsTable extends Component {
) : null}
{organizations.map(org => (
<OrganizationsTableRow
key={uuid.v4()}
key={org.id}
organization={org}
onDelete={onDeleteOrg}
onRename={onRenameOrg}

5
ui/src/admin/components/chronograf/ProvidersTable.js
View File

@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import uuid from 'uuid'
import ProvidersTableRow from 'src/admin/components/chronograf/ProvidersTableRow'
import ProvidersTableRowNew from 'src/admin/components/chronograf/ProvidersTableRowNew'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -80,9 +79,9 @@ class ProvidersTable extends Component {
</div>
<div className="fancytable--th provider--delete" />
</div>
{mappings.map((mapping, i) => (
{mappings.map((mapping) => (
<ProvidersTableRow
key={uuid.v4()}
key={mapping.id}
mapping={mapping}
organizations={organizations}
schemes={SCHEMES}

3
ui/src/admin/components/chronograf/UsersTable.js
View File

@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import uuid from 'uuid'
import _ from 'lodash'
import UsersTableHeader from 'src/admin/components/chronograf/UsersTableHeader'
@ -91,7 +90,7 @@ class UsersTable extends Component {
users.map(user => (
<UsersTableRow
user={user}
key={uuid.v4()}
key={user.id}
organization={organization}
onChangeUserRole={this.handleChangeUserRole}
onDelete={this.handleDeleteUser}

5
ui/src/alerts/components/AlertsTable.tsx
View File

@ -4,7 +4,6 @@ import {connect} from 'react-redux'
// Libraries
import _ from 'lodash'
import uuid from 'uuid'
import {Link} from 'react-router'
// Components
@ -210,8 +209,8 @@ class AlertsTable extends PureComponent<Props, State> {
<InfiniteScroll
className="alert-history-table--tbody"
itemHeight={25}
items={alerts.map(alert => (
<div className="alert-history-table--tr" key={uuid.v4()}>
items={alerts.map((alert, i) => (
<div className="alert-history-table--tr" key={i}>
<AlertsTableRow sourceID={id} {...alert} timeZone={timeZone} />
</div>
))}

2
ui/src/dashboards/components/GaugeOptions.tsx
View File

@ -56,7 +56,7 @@ class GaugeOptions extends PureComponent<Props> {
isMax={index === gaugeColors.length - 1}
visualizationType="gauge"
threshold={color}
key={uuid.v4()}
key={index}
disableMaxColor={this.disableMaxColor}
onChooseColor={this.handleChooseColor}
onValidateColorValue={this.handleValidateColorValue}

5
ui/src/kapacitor/components/HandlerTabs.tsx
View File

@ -1,6 +1,5 @@
import React, {FunctionComponent, MouseEvent} from 'react'
import classnames from 'classnames'
import uuid from 'uuid'
import {Handler} from 'src/types/kapacitor'
@ -27,10 +26,10 @@ const HandlerTabs: FunctionComponent<Props> = ({
}) =>
handlersOnThisAlert.length ? (
<ul className="endpoint-tabs">
{handlersOnThisAlert.map(endpoint => {
{handlersOnThisAlert.map((endpoint, i) => {
return (
<li
key={uuid.v4()}
key={i}
className={classnames('endpoint-tab', {
active:
endpoint.alias === (selectedHandler && selectedHandler.alias),

5
ui/src/logs/components/SeverityOptions.tsx
View File

@ -1,5 +1,4 @@
import React, {FunctionComponent} from 'react'
import uuid from 'uuid'
import ColorDropdown from 'src/logs/components/ColorDropdown'
import SeverityColumnFormat from 'src/logs/components/SeverityColumnFormat'
@ -25,10 +24,10 @@ const SeverityConfig: FunctionComponent<Props> = ({
<>
<label className="form-label">Severity Colors</label>
<div className="logs-options--color-list">
{severityLevelColors.map(lc => {
{severityLevelColors.map((lc, i) => {
const color = {name: lc.color, hex: SeverityColorValues[lc.color]}
return (
<div key={uuid.v4()} className="logs-options--color-row">
<div key={i} className="logs-options--color-row">
<div className="logs-options--color-column">
<div className="logs-options--color-label">{lc.level}</div>
</div>

5
ui/src/shared/components/DygraphLegend.tsx
View File

@ -3,7 +3,6 @@ import React, {PureComponent, ChangeEvent} from 'react'
import {connect} from 'react-redux'
import _ from 'lodash'
import classnames from 'classnames'
import uuid from 'uuid'
// Components
import DygraphLegendSort from 'src/shared/components/DygraphLegendSort'
@ -139,12 +138,12 @@ class DygraphLegend extends PureComponent<Props, State> {
/>
)}
<div className="dygraph-legend--contents">
{this.filtered.map(({label, color, yHTML, isHighlighted}) => {
{this.filtered.map(({label, color, yHTML, isHighlighted}, i) => {
const seriesClass = isHighlighted
? 'dygraph-legend--row highlight'
: 'dygraph-legend--row'
return (
<div key={uuid.v4()} className={seriesClass}>
<div key={i} className={seriesClass}>
<span style={{color}}>{label}</span>
<figure>{yHTML || 'no value'}</figure>
</div>

7
ui/src/shared/components/SourceIndicator.tsx
View File

@ -1,6 +1,5 @@
import React, {FunctionComponent} from 'react'
import _ from 'lodash'
import uuid from 'uuid'
import ReactTooltip from 'react-tooltip'
import {SourceContext} from 'src/CheckSources'
@ -19,19 +18,17 @@ const getTooltipText = (source: Source, sourceOverride: Source): string => {
}
const SourceIndicator: FunctionComponent<Props> = ({sourceOverride}) => {
const uuidTooltip: string = uuid.v4()
return (
<SourceContext.Consumer>
{(source: Source) => (
<div
className="source-indicator"
data-for={uuidTooltip}
data-for="source-indicator"
data-tip={getTooltipText(source, sourceOverride)}
>
<span className="icon disks" />
<ReactTooltip
id={uuidTooltip}
id="source-indicator"
effect="solid"
html={true}
place="left"

5
ui/src/shared/components/SubSections.tsx
View File

@ -1,5 +1,4 @@
import React, {Component, ReactNode} from 'react'
import uuid from 'uuid'
import {withRouter, WithRouterProps} from 'react-router'
import SubSectionsTab from 'src/shared/components/SubSectionsTab'
@ -51,10 +50,10 @@ class SubSections extends Component<Props> {
<div className={classes.nav} data-test="subsectionNav">
<div className={classes.tabs}>
{sections.map(
section =>
(section, i) =>
section.enabled && (
<SubSectionsTab
key={uuid.v4()}
key={i}
section={section}
handleClick={this.handleTabClick(section.url)}
activeSection={activeSection}

7
ui/src/shared/components/Tags.tsx
View File

@ -1,7 +1,6 @@
import React, {PureComponent, FunctionComponent} from 'react'
import TagsAddButton from 'src/shared/components/TagsAddButton'
import ConfirmButton from 'src/shared/components/ConfirmButton'
import uuid from 'uuid'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Item {
@ -26,10 +25,10 @@ const Tags: FunctionComponent<TagsProps> = ({
}) => {
return (
<div className="input-tag-list">
{tags.map(item => {
{tags.map((item, i) => {
return (
<Tag
key={uuid.v4()}
key={i}
item={item}
onDelete={onDeleteTag}
confirmText={confirmText}
@ -58,7 +57,7 @@ class Tag extends PureComponent<TagProps> {
public render() {
const {item, confirmText} = this.props
return (
<span key={uuid.v4()} className="input-tag--item">
<span className="input-tag--item">
<span>{item.text || item.name || item}</span>
<ConfirmButton
icon="remove"

5
ui/src/shared/components/TagsAddButton.tsx
View File

@ -1,5 +1,4 @@
import React, {PureComponent} from 'react'
import uuid from 'uuid'
import {ClickOutside} from 'src/shared/components/ClickOutside'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -36,9 +35,9 @@ class TagsAddButton extends PureComponent<Props, State> {
<div className={classname} onClick={this.handleButtonClick}>
<span className="icon plus" />
<div className="tags-add--menu">
{items.map(item => (
{items.map((item, i) => (
<div
key={uuid.v4()}
key={i}
className="tags-add--menu-item"
onClick={this.handleMenuClick(item)}
>

5
ui/src/shared/components/ThresholdsList.tsx
View File

@ -60,9 +60,9 @@ class ThresholdsList extends PureComponent<Props> {
>
<span className="icon plus" /> Add Threshold
</button>
{this.sortedColors.map(color =>
{this.sortedColors.map((color, i) =>
color.id === THRESHOLD_TYPE_BASE ? (
<div className="threshold-item" key={uuid.v4()}>
<div className="threshold-item" key={i}>
<div className="threshold-item--label">Base Color</div>
<ColorDropdown
colors={THRESHOLD_COLORS}
@ -75,7 +75,6 @@ class ThresholdsList extends PureComponent<Props> {
<Threshold
visualizationType="single-stat"
threshold={color}
key={uuid.v4()}
onChooseColor={this.handleChooseColor}
onValidateColorValue={this.handleValidateColorValue}
onUpdateColorValue={this.handleUpdateColorValue}

5
ui/src/shared/components/threesizer/DivisionMenu.tsx
View File

@ -1,5 +1,4 @@
import React, {PureComponent} from 'react'
import uuid from 'uuid'
import classnames from 'classnames'
import {ClickOutside} from 'src/shared/components/ClickOutside'
@ -71,9 +70,9 @@ class DivisionMenu extends PureComponent<Props, State> {
const {menuItems} = this.props
return (
<ul className="dropdown-menu">
{menuItems.map(item => (
{menuItems.map((item, i) => (
<li
key={uuid.v4()}
key={i}
className="dropdown-item"
onClick={this.handleMenuItemClick(item.action)}
>

5
ui/src/tempVars/components/TemplatePreviewList.tsx
View File

@ -1,5 +1,4 @@
import React, {PureComponent} from 'react'
import uuid from 'uuid'
import {ErrorHandling} from 'src/shared/decorators/errors'
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
@ -27,9 +26,9 @@ class TemplatePreviewList extends PureComponent<Props> {
autoHeight={true}
maxHeight={this.resultsListHeight}
>
{items.map(item => (
{items.map((item, i) => (
<TemplatePreviewListItem
key={uuid.v4()}
key={i}
onClick={onUpdateDefaultTemplateValue}
item={item}
/>