fix: import uuid

CHANGELOG.md

@@ -13,6 +13,10 @@
    * All windows builds will now be dynamic only.
    * All linux builds will now be static only.
 1. [#6206](https://github.com/influxdata/chronograf/pull/6206): Upgrade golang to 1.25.9.
+1. [#6208](https://github.com/influxdata/chronograf/pull/6208): Upgrade dependencies.
+   * Upgrade "uuid" package version to "^14.0.0".
+   * Upgrade "@parcel/core" version to "^2.16.4".
+   * Remove "@types/uuid" because newer "uuid" versions are included types in the package.
 
 ## v1.11.0 [2026-02-19]
 

package.json

@@ -10,6 +10,9 @@
   "scripts": {
     "postinstall": "echo \"\" > node_modules/go.mod"
   },
+  "@parcel/resolver-default": {
+    "packageExports": true
+  },
   "homepage": "https://github.com/influxdata/chronograf",
   "repository": {
     "type": "git",
@@ -24,13 +27,14 @@
   },
   "license": "AGPL-3.0",
   "devDependencies": {
-    "@parcel/core": "^2.6.2",
-    "@parcel/transformer-sass": "^2.6.2",
+    "@parcel/core": "^2.16.4",
+    "@parcel/transformer-sass": "^2.16.4",
     "assert": "^2.0.0",
     "events": "^3.3.0",
     "http-proxy-middleware": "^2.0.9",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
+    "url": "^0.11.4",
     "util": "^0.12.4"
   }
 }

ui/jest.config.js

@@ -14,7 +14,7 @@ module.exports = {
       transform: {
         '^.+\\.[jt]sx?$': ['babel-jest', {configFile: './.babelrc.jest'}],
       },
-      transformIgnorePatterns: ['/node_modules/(?!(d3-.*|internmap)/)'],
+      transformIgnorePatterns: ['/node_modules/(?!(d3-.*|internmap|uuid)/)'],
       testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
       moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
       snapshotSerializers: ['enzyme-to-json/serializer'],

ui/package.json

@@ -54,7 +54,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/compat": "^2.0.2",
-    "@parcel/core": "^2.6.2",
+    "@parcel/core": "^2.16.4",
     "@types/chroma-js": "^1.3.4",
     "@types/codemirror": "^0.0.56",
     "@types/d3-color": "^1.2.1",
@@ -77,7 +77,6 @@
     "@types/react-router-redux": "4",
     "@types/react-virtualized": "^9.18.3",
     "@types/text-encoding": "^0.0.32",
-    "@types/uuid": "^3.4.3",
     "@typescript-eslint/eslint-plugin": "^8.45.0",
     "@typescript-eslint/parser": "^8.45.0",
     "autoprefixer": "^6.3.1",
@@ -102,7 +101,7 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-runner-eslint": "^2.3.0",
-    "parcel": "^2.6.2",
+    "parcel": "^2.16.4",
     "prettier": "2.2.1",
     "sass": "^1.97.3",
     "tslib": "^1.9.0",
@@ -163,6 +162,6 @@
     "redux-thunk": "^1.0.3",
     "reselect": "^3.0.1",
     "rome": "^2.1.22",
-    "uuid": "^3.2.1"
+    "uuid": "^14.0.0"
   }
 }

ui/src/admin/actions/chronograf.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 import {
   getUsers as getUsersAJAX,
@@ -162,7 +162,7 @@ export const loadMappingsAsync = () => async dispatch => {
 }
 
 export const createMappingAsync = (url, mapping) => async dispatch => {
-  const mappingWithTempId = {...mapping, _tempID: uuid.v4()}
+  const mappingWithTempId = {...mapping, _tempID: uuidv4()}
   dispatch(addMapping(mappingWithTempId))
   try {
     const {data} = await createMappingAJAX(url, mapping)
@@ -206,7 +206,7 @@ export const updateMappingAsync = (
 export const createUserAsync = (url, user) => async dispatch => {
   // temp uuid is added to be able to disambiguate a created user that has the
   // same scheme, provider, and name as an existing user
-  const userWithTempID = {...user, _tempID: uuid.v4()}
+  const userWithTempID = {...user, _tempID: uuidv4()}
   dispatch(addUser(userWithTempID))
   try {
     const {data} = await createUserAJAX(url, user)
@@ -269,7 +269,7 @@ export const createOrganizationAsync = (
 ) => async dispatch => {
   // temp uuid is added to be able to disambiguate a created organization with
   // the same name as an existing organization
-  const organizationWithTempID = {...organization, _tempID: uuid.v4()}
+  const organizationWithTempID = {...organization, _tempID: uuidv4()}
   dispatch(addOrganization(organizationWithTempID))
   try {
     const {data} = await createOrganizationAJAX(url, organization)

ui/src/admin/reducers/influxdb.js

@@ -1,6 +1,6 @@
 import reject from 'lodash/reject'
 import {NEW_DEFAULT_DATABASE, NEW_EMPTY_RP} from 'src/admin/constants'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import {parseDuration, compareDurations} from 'src/utils/influxDuration'
 import {
   changeNamedCollection,
@@ -76,7 +76,7 @@ const adminInfluxDB = (state = initialState, action) => {
     case 'INFLUXDB_ADD_DATABASE': {
       const newDatabase = {
         ...NEW_DEFAULT_DATABASE,
-        links: {self: `temp-ID${uuid.v4()}`},
+        links: {self: `temp-ID${uuidv4()}`},
         isEditing: true,
       }
 

ui/src/dashboards/components/GaugeOptions.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import _ from 'lodash'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 // Components
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
@@ -128,7 +128,7 @@ class GaugeOptions extends PureComponent<Props> {
 
       const newThreshold = {
         type: COLOR_TYPE_THRESHOLD,
-        id: uuid.v4(),
+        id: uuidv4(),
         value: randomValue,
         hex: THRESHOLD_COLORS[randomColor].hex,
         name: THRESHOLD_COLORS[randomColor].name,

ui/src/dashboards/utils/protoboardToDashboard.ts

@@ -1,4 +1,4 @@
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 import {getNextAvailablePosition} from 'src/dashboards/utils/cellGetters'
 
@@ -38,7 +38,7 @@ const addNewCellToCells = (
 const createTemplatesForProtoboard = (pbTemplates, source): Template[] => {
   const telegraf = source.telegraf || 'telegraf'
   return pbTemplates.map(pbt => {
-    return {...pbt, id: uuid.v4(), query: {...pbt.query, db: telegraf}}
+    return {...pbt, id: uuidv4(), query: {...pbt.query, db: telegraf}}
   })
 }
 

ui/src/data_explorer/actions/view/index.ts

@@ -1,4 +1,4 @@
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 import {getQueryConfigAndStatus} from 'src/shared/apis'
 
@@ -43,7 +43,7 @@ export interface ActionAddQuery {
   }
 }
 
-export const addQuery = (queryID: string = uuid.v4()): ActionAddQuery => ({
+export const addQuery = (queryID: string = uuidv4()): ActionAddQuery => ({
   type: 'DE_ADD_QUERY',
   payload: {
     queryID,

ui/src/flux/components/TimeMachineTables.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import memoizeOne from 'memoize-one'
 
 // Components
@@ -105,7 +105,7 @@ class TimeMachineTables extends PureComponent<Props, State> {
           <TableGraphTransform
             data={this.selectedResult}
             dataType={dataType}
-            uuid={uuid.v4()}
+            uuid={uuidv4()}
           >
             {(transformedData, nextUUID) => (
               <TableGraphFormat

ui/src/kapacitor/actions/view/index.js

@@ -1,4 +1,4 @@
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import {getActiveKapacitor} from 'shared/apis'
 import {notify} from 'shared/actions/notifications'
 import {
@@ -91,7 +91,7 @@ export const getRule = (kapacitor, ruleID) => async dispatch => {
 
 export const loadDefaultRule = () => {
   return dispatch => {
-    const queryID = uuid.v4()
+    const queryID = uuidv4()
     dispatch({
       type: 'LOAD_DEFAULT_RULE',
       payload: {

ui/src/kapacitor/components/RuleGraph.tsx

@@ -2,7 +2,7 @@
 import React, {PureComponent, CSSProperties} from 'react'
 import {connect} from 'react-redux'
 import TimeSeries from 'src/shared/components/time_series/TimeSeries'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 // Components
 import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
@@ -68,7 +68,7 @@ class RuleGraph extends PureComponent<Props> {
             source={source}
             queries={this.queries}
             templates={this.templates}
-            uuid={uuid.v4()}
+            uuid={uuidv4()}
           >
             {data => {
               return (

ui/src/kapacitor/containers/TickscriptPage.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 import {withSource} from 'src/CheckSources'
 import {bindActionCreators} from 'redux'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 import Tickscript from 'src/kapacitor/components/Tickscript'
 import * as kapactiorActionCreators from 'src/kapacitor/actions/view'
@@ -359,8 +359,8 @@ export class TickscriptPage extends PureComponent<Props, State> {
           areLogsEnabled: true,
           logs: [
             {
-              id: uuid.v4(),
-              key: uuid.v4(),
+              id: uuidv4(),
+              key: uuidv4(),
               lvl: 'info',
               msg: 'created log session',
               service: 'sessions',
@@ -410,7 +410,7 @@ export class TickscriptPage extends PureComponent<Props, State> {
               ...logs,
               ...JSON.parse(jsonStr).map(log => ({
                 ...log,
-                key: uuid.v4(),
+                key: uuidv4(),
               })),
             ]
             failStr = ''

ui/src/logs/containers/LogsPage.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {Component} from 'react'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import _ from 'lodash'
 import {connect, ResolveThunks} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
@@ -708,7 +708,7 @@ class LogsPage extends Component<Props, State> {
 
   private handleTagSelection = (selection: {tag: string; key: string}) => {
     this.props.addFilter({
-      id: uuid.v4(),
+      id: uuidv4(),
       key: selection.key,
       value: selection.tag,
       operator: '==',

ui/src/logs/utils/index.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import moment from 'moment'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import {Filter} from 'src/types/logs'
 import {TimeRange, Namespace, QueryConfig} from 'src/types'
 import {NULL_STRING} from 'src/shared/constants/queryFillOptions'
@@ -289,7 +289,7 @@ export const buildHistogramQueryConfig = (
   namespace: Namespace,
   range: TimeRange
 ): QueryConfig => {
-  const id = uuid.v4()
+  const id = uuidv4()
   const {database, retentionPolicy} = namespace
 
   return {
@@ -307,7 +307,7 @@ export const buildTableQueryConfig = (
   namespace: Namespace,
   range: TimeRange
 ): QueryConfig => {
-  const id = uuid.v4()
+  const id = uuidv4()
   const {database, retentionPolicy} = namespace
 
   return {

ui/src/logs/utils/matchSections.ts

@@ -1,5 +1,5 @@
 import {MatchType, Filter, MatchSection, Operator} from 'src/types/logs'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 export const getMatchSections = (
   pattern: string,
@@ -35,7 +35,7 @@ const matchSections = (re: RegExp, text) => {
 }
 
 const createSection = (type: MatchType, text: string): MatchSection => ({
-  id: uuid.v4(),
+  id: uuidv4(),
   type,
   text,
 })

ui/src/logs/utils/search.ts

@@ -1,4 +1,4 @@
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import _ from 'lodash'
 
 import {Filter} from 'src/types/logs'
@@ -106,7 +106,7 @@ const createAttributeFilter = (
   value: string,
   operator: Operator
 ) => ({
-  id: uuid.v4(),
+  id: uuidv4(),
   key,
   value,
   operator,

ui/src/shared/annotations/helpers.ts

@@ -1,4 +1,4 @@
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 import {Annotation, TagFilter, TagFilterType} from 'src/types/annotations'
 
@@ -16,7 +16,7 @@ export const DEFAULT_ANNOTATION = (): Annotation => ({
 })
 
 export const NEW_TAG_FILTER = (): TagFilter => ({
-  id: uuid.v4(),
+  id: uuidv4(),
   tagKey: '',
   tagValue: '',
   filterType: TagFilterType.Equals,

ui/src/shared/apis/metaQuery.js

@@ -1,7 +1,7 @@
 import AJAX from 'src/utils/ajax'
 import _ from 'lodash'
 import {proxy} from 'utils/queryUrlGenerator'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 
 export const showDatabases = async source => {
   const query = 'SHOW DATABASES'
@@ -82,7 +82,7 @@ export const showTagValues = async ({
             ],
           },
         ],
-        uuid: uuid.v4(),
+        uuid: uuidv4,
       },
     }
   }

ui/src/shared/components/AnnotationEditorForm.tsx

@@ -1,5 +1,5 @@
 import React, {PureComponent, ChangeEvent} from 'react'
-import uuid from 'uuid'
+import {v4 as uuidv4} from 'uuid'
 import moment from 'moment'
 
 import {Radio, ButtonShape} from 'src/reusable_ui'
@@ -68,7 +68,7 @@ class AnnotationEditorForm extends PureComponent<Props, State> {
     const type = startTime === endTime ? 'point' : 'window'
 
     const tags = Object.entries(props.annotation.tags || {}).map(([k, v]) => ({
-      id: uuid.v4(),
+      id: uuidv4(),
       tagKey: k,
       tagValue: v,
       shouldAutoFocus: false,
@@ -368,7 +368,7 @@ class AnnotationEditorForm extends PureComponent<Props, State> {
 
   private handleAddTag = (): void => {
     const newTag = {
-      id: uuid.v4(),
+      id: uuidv4(),
       tagKey: '',
       tagValue: '',
       shouldAutoFocus: true,