From 75b77a20c1372f571ce7e8ad9b2171db7fac5ecd Mon Sep 17 00:00:00 2001 From: Suhaha Date: Fri, 11 Jun 2021 17:56:35 +0800 Subject: [PATCH] fix(ui): localstorage compatibility issue (#930) --- ui/.env.development | 2 + ui/.env.production | 2 + ui/config-overrides.js | 38 ++++++++++++++++++- ui/dashboardApp/layout/main/index.tsx | 3 +- ui/lib/apps/SlowQuery/pages/Detail/index.tsx | 2 +- ui/lib/apps/SlowQuery/pages/List/index.tsx | 5 ++- .../Statement/pages/Detail/PlanDetail.tsx | 2 +- ui/lib/apps/Statement/pages/Detail/index.tsx | 2 +- ui/lib/apps/Statement/pages/List/index.tsx | 5 ++- ui/lib/utils/useLocalStorageState.ts | 14 +++++++ ui/lib/utils/useOrderState.ts | 6 ++- ui/src/sentry.ts | 5 +-- 12 files changed, 71 insertions(+), 15 deletions(-) create mode 100644 ui/lib/utils/useLocalStorageState.ts diff --git a/ui/.env.development b/ui/.env.development index 219dea656b..4ee3e58b3b 100644 --- a/ui/.env.development +++ b/ui/.env.development @@ -3,3 +3,5 @@ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_SENTRY_DSN=https://10930d3b0a8d427cad2147d6d845be56@o226447.ingest.sentry.io/5721090 REACT_APP_SENTRY_ENABLED=false +# REACT_APP_RELEASE_VERSION is set in config-overrides.js +REACT_APP_RELEASE_VERSION=unknown diff --git a/ui/.env.production b/ui/.env.production index 774cdc1e16..958d4fd2b2 100644 --- a/ui/.env.production +++ b/ui/.env.production @@ -4,3 +4,5 @@ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_SENTRY_DSN=https://10930d3b0a8d427cad2147d6d845be56@o226447.ingest.sentry.io/5721090 REACT_APP_SENTRY_ENABLED=true +# REACT_APP_RELEASE_VERSION is set in config-overrides.js +REACT_APP_RELEASE_VERSION=unknown diff --git a/ui/config-overrides.js b/ui/config-overrides.js index f7a7be90a0..bec04e7d4f 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -1,5 +1,6 @@ const path = require('path') const fs = require('fs') +const os = require('os') const { override, fixBabelImports, @@ -106,6 +107,38 @@ const supportDynamicPublicPathPrefix = () => (config) => { return config } +const overrideProcessEnv = (value) => (config) => { + const plugin = config.plugins.find( + (plugin) => plugin.constructor.name === 'DefinePlugin' + ) + const processEnv = plugin.definitions['process.env'] || {} + + plugin.definitions['process.env'] = { + ...processEnv, + ...value, + } + + return config +} + +const getInternalVersion = () => { + // react-app-rewired does not support async override config method right now, + // subscribe: https://github.com/timarney/react-app-rewired/pull/543 + const version = fs + .readFileSync('../release-version', 'utf8') + .split(os.EOL) + .map((l) => l.trim()) + .filter((l) => !l.startsWith('#') && l !== '')[0] + + if (version === '') { + throw new Error( + `invalid release version, please check the release-version @tidb-dashboard/root` + ) + } + + return version +} + module.exports = override( fixBabelImports('import', { libraryName: 'antd', @@ -152,5 +185,8 @@ module.exports = override( ), disableMinimizeByEnv(), addExtraEntries(), - supportDynamicPublicPathPrefix() + supportDynamicPublicPathPrefix(), + overrideProcessEnv({ + REACT_APP_RELEASE_VERSION: JSON.stringify(getInternalVersion()), + }) ) diff --git a/ui/dashboardApp/layout/main/index.tsx b/ui/dashboardApp/layout/main/index.tsx index 82610f10c5..ed259dffbc 100644 --- a/ui/dashboardApp/layout/main/index.tsx +++ b/ui/dashboardApp/layout/main/index.tsx @@ -1,9 +1,10 @@ import React, { useState, useCallback, useEffect } from 'react' import { Root } from '@lib/components' -import { useLocalStorageState } from 'ahooks' import { HashRouter as Router } from 'react-router-dom' import { useSpring, animated } from 'react-spring' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' + import Sider from './Sider' import styles from './index.module.less' diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx index a080e312a4..d10193e713 100644 --- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx +++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Space } from 'antd' import { useTranslation } from 'react-i18next' import { Link, useLocation } from 'react-router-dom' -import { useLocalStorageState } from 'ahooks' import { ArrowLeftOutlined } from '@ant-design/icons' import client from '@lib/client' @@ -20,6 +19,7 @@ import { Pre, TextWithInfo, } from '@lib/components' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import DetailTabs from './DetailTabs' diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx index d42c091e5b..96800d9a2a 100644 --- a/ui/lib/apps/SlowQuery/pages/List/index.tsx +++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx @@ -17,7 +17,6 @@ import { MenuOutlined, } from '@ant-design/icons' import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane' -import { useLocalStorageState } from 'ahooks' import { Card, @@ -27,6 +26,7 @@ import { MultiSelect, } from '@lib/components' import { CacheContext } from '@lib/utils/useCache' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import SlowQueriesTable from '../../components/SlowQueriesTable' import useSlowQueryTableController, { @@ -49,7 +49,8 @@ function List() { const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState( SLOW_QUERY_VISIBLE_COLUMN_KEYS, - DEF_SLOW_QUERY_COLUMN_KEYS + DEF_SLOW_QUERY_COLUMN_KEYS, + true ) const [showFullSQL, setShowFullSQL] = useLocalStorageState( SLOW_QUERY_SHOW_FULL_SQL, diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx index c4c1b41cd7..ebc9ef3f6c 100644 --- a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx +++ b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx @@ -1,6 +1,5 @@ import React from 'react' import { Space } from 'antd' -import { useLocalStorageState } from 'ahooks' import { useTranslation } from 'react-i18next' import { AnimatedSkeleton, @@ -16,6 +15,7 @@ import { import { useClientRequest } from '@lib/utils/useClientRequest' import client from '@lib/client' import formatSql from '@lib/utils/sqlFormatter' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import type { IPageQuery } from '.' import DetailTabs from './PlanDetailTabs' diff --git a/ui/lib/apps/Statement/pages/Detail/index.tsx b/ui/lib/apps/Statement/pages/Detail/index.tsx index 12e1ce214b..60d0961e30 100644 --- a/ui/lib/apps/Statement/pages/Detail/index.tsx +++ b/ui/lib/apps/Statement/pages/Detail/index.tsx @@ -4,7 +4,6 @@ import { Selection } from 'office-ui-fabric-react/lib/Selection' import React, { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { Link, useLocation } from 'react-router-dom' -import { useLocalStorageState } from 'ahooks' import { ArrowLeftOutlined } from '@ant-design/icons' import client, { StatementModel } from '@lib/client' @@ -23,6 +22,7 @@ import CopyLink from '@lib/components/CopyLink' import formatSql from '@lib/utils/sqlFormatter' import { buildQueryFn, parseQueryFn } from '@lib/utils/query' import { useClientRequest } from '@lib/utils/useClientRequest' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import { planColumns as genPlanColumns } from '../../utils/tableColumns' import PlanDetail from './PlanDetail' diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx index 1a49b9990a..660a7c9cf6 100644 --- a/ui/lib/apps/Statement/pages/List/index.tsx +++ b/ui/lib/apps/Statement/pages/List/index.tsx @@ -11,7 +11,6 @@ import { Menu, message, } from 'antd' -import { useLocalStorageState } from 'ahooks' import { ReloadOutlined, LoadingOutlined, @@ -24,6 +23,7 @@ import { useTranslation } from 'react-i18next' import { CacheContext } from '@lib/utils/useCache' import { Card, ColumnsSelector, Toolbar, MultiSelect } from '@lib/components' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import { StatementsTable } from '../../components' import StatementSettingForm from './StatementSettingForm' @@ -47,7 +47,8 @@ export default function StatementsOverview() { const [showSettings, setShowSettings] = useState(false) const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState( STMT_VISIBLE_COLUMN_KEYS, - DEF_STMT_COLUMN_KEYS + DEF_STMT_COLUMN_KEYS, + true ) const [showFullSQL, setShowFullSQL] = useLocalStorageState( STMT_SHOW_FULL_SQL, diff --git a/ui/lib/utils/useLocalStorageState.ts b/ui/lib/utils/useLocalStorageState.ts new file mode 100644 index 0000000000..a600c163f0 --- /dev/null +++ b/ui/lib/utils/useLocalStorageState.ts @@ -0,0 +1,14 @@ +import { useLocalStorageState as useAhooksLocalStorageState } from 'ahooks' + +// attachVersion will use the version field in package.json as the postfix for the localstorage key +// we can **update version field in package.json** to upgrade local storage version key +export function useLocalStorageState( + key: string, + defaultValue: T | (() => T), + attachVersion = false +) { + return useAhooksLocalStorageState( + attachVersion ? `${key}.v${process.env.REACT_APP_VERSION}` : key, + defaultValue + ) +} diff --git a/ui/lib/utils/useOrderState.ts b/ui/lib/utils/useOrderState.ts index 447f2008cd..469abae414 100644 --- a/ui/lib/utils/useOrderState.ts +++ b/ui/lib/utils/useOrderState.ts @@ -1,5 +1,6 @@ import { useState, useMemo } from 'react' -import { useLocalStorageState } from 'ahooks' + +import { useLocalStorageState } from './useLocalStorageState' export interface IOrderOptions { orderBy: string @@ -15,7 +16,8 @@ export default function useOrderState( const [memoryOrderOptions, setMemoryOrderOptions] = useState(options) const [localOrderOptions, setLocalOrderOptions] = useLocalStorageState( storeKey, - options + options, + true ) const orderOptions = useMemo( () => (needSave ? localOrderOptions : memoryOrderOptions), diff --git a/ui/src/sentry.ts b/ui/src/sentry.ts index e77f19eb43..5f8e300e03 100644 --- a/ui/src/sentry.ts +++ b/ui/src/sentry.ts @@ -4,10 +4,7 @@ import { Integrations } from '@sentry/tracing' import { sentryEnabled } from '@lib/utils/sentryHelpers' if (sentryEnabled) { - const version = process.env.REACT_APP_VERSION - const name = process.env.REACT_APP_NAME - const hash = process.env.REACT_APP_COMMIT_HASH - const release = `${name}@${version}+${hash}` + const release = process.env.REACT_APP_RELEASE_VERSION // this is on purpose console.log('current release: ', release)