From 98e2e8b84f41dc9971b969651cc2740febae61b1 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Wed, 26 May 2021 18:33:52 +0800 Subject: [PATCH 1/7] fix(ui): localstorage compatibility issue --- ui/config-overrides.js | 24 ++++++++++++++++++-- ui/lib/apps/SlowQuery/pages/List/index.tsx | 6 ++++- ui/lib/apps/Statement/pages/List/index.tsx | 6 ++++- ui/lib/utils/useCompatibilityLocalstorage.ts | 11 +++++++++ ui/lib/utils/useOrderState.ts | 11 +++++---- 5 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 ui/lib/utils/useCompatibilityLocalstorage.ts diff --git a/ui/config-overrides.js b/ui/config-overrides.js index f7a7be90a0..c9fb7c84d6 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -1,5 +1,5 @@ const path = require('path') -const fs = require('fs') +const { execSync } = require('child_process') const { override, fixBabelImports, @@ -106,6 +106,23 @@ 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 = () => { + const out = execSync(`grep -v '^\#' ../release-version`) + return out.toString() +} + module.exports = override( fixBabelImports('import', { libraryName: 'antd', @@ -152,5 +169,8 @@ module.exports = override( ), disableMinimizeByEnv(), addExtraEntries(), - supportDynamicPublicPathPrefix() + supportDynamicPublicPathPrefix(), + overrideProcessEnv({ + INTERNAL_VERSION: JSON.stringify(getInternalVersion()) + }), ) diff --git a/ui/lib/apps/SlowQuery/pages/List/index.tsx b/ui/lib/apps/SlowQuery/pages/List/index.tsx index d42c091e5b..08a62a6277 100644 --- a/ui/lib/apps/SlowQuery/pages/List/index.tsx +++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx @@ -27,6 +27,7 @@ import { MultiSelect, } from '@lib/components' import { CacheContext } from '@lib/utils/useCache' +import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage' import SlowQueriesTable from '../../components/SlowQueriesTable' import useSlowQueryTableController, { @@ -47,7 +48,10 @@ function List() { const slowQueryCacheMgr = useContext(CacheContext) - const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState( + const [ + visibleColumnKeys, + setVisibleColumnKeys, + ] = useCompatibilityLocalstorage( SLOW_QUERY_VISIBLE_COLUMN_KEYS, DEF_SLOW_QUERY_COLUMN_KEYS ) diff --git a/ui/lib/apps/Statement/pages/List/index.tsx b/ui/lib/apps/Statement/pages/List/index.tsx index 1a49b9990a..27dfedebeb 100644 --- a/ui/lib/apps/Statement/pages/List/index.tsx +++ b/ui/lib/apps/Statement/pages/List/index.tsx @@ -24,6 +24,7 @@ import { useTranslation } from 'react-i18next' import { CacheContext } from '@lib/utils/useCache' import { Card, ColumnsSelector, Toolbar, MultiSelect } from '@lib/components' +import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage' import { StatementsTable } from '../../components' import StatementSettingForm from './StatementSettingForm' @@ -45,7 +46,10 @@ export default function StatementsOverview() { const statementCacheMgr = useContext(CacheContext) const [showSettings, setShowSettings] = useState(false) - const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState( + const [ + visibleColumnKeys, + setVisibleColumnKeys, + ] = useCompatibilityLocalstorage( STMT_VISIBLE_COLUMN_KEYS, DEF_STMT_COLUMN_KEYS ) diff --git a/ui/lib/utils/useCompatibilityLocalstorage.ts b/ui/lib/utils/useCompatibilityLocalstorage.ts new file mode 100644 index 0000000000..61a18b4d41 --- /dev/null +++ b/ui/lib/utils/useCompatibilityLocalstorage.ts @@ -0,0 +1,11 @@ +import { useLocalStorageState } from 'ahooks' + +export function useCompatibilityLocalstorage( + key: string, + defaultValue: T | (() => T) +) { + return useLocalStorageState( + `${key}_${process.env.INTERNAL_VERSION}`, + defaultValue + ) +} diff --git a/ui/lib/utils/useOrderState.ts b/ui/lib/utils/useOrderState.ts index 447f2008cd..8028b961c4 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 { useCompatibilityLocalstorage } from './useCompatibilityLocalstorage' export interface IOrderOptions { orderBy: string @@ -13,10 +14,10 @@ export default function useOrderState( ) { const storeKey = `${storeKeyPrefix}.order_options` const [memoryOrderOptions, setMemoryOrderOptions] = useState(options) - const [localOrderOptions, setLocalOrderOptions] = useLocalStorageState( - storeKey, - options - ) + const [ + localOrderOptions, + setLocalOrderOptions, + ] = useCompatibilityLocalstorage(storeKey, options) const orderOptions = useMemo( () => (needSave ? localOrderOptions : memoryOrderOptions), [needSave, memoryOrderOptions, localOrderOptions] From 565209d466101113b481ba4e1497373e8a54560e Mon Sep 17 00:00:00 2001 From: Suhaha Date: Fri, 28 May 2021 14:50:33 +0800 Subject: [PATCH 2/7] chore: use package.json version field as compatibility key --- ui/.env.development | 1 + ui/.env.production | 1 + ui/config-overrides.js | 18 ++++++++++-------- ui/lib/utils/useCompatibilityLocalstorage.ts | 3 ++- ui/src/sentry.ts | 2 +- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/ui/.env.development b/ui/.env.development index 219dea656b..4f6940ba96 100644 --- a/ui/.env.development +++ b/ui/.env.development @@ -3,3 +3,4 @@ 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 +RELEASE_VERSION=$set_by_config_overrides diff --git a/ui/.env.production b/ui/.env.production index 774cdc1e16..75f58e9189 100644 --- a/ui/.env.production +++ b/ui/.env.production @@ -4,3 +4,4 @@ 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 +RELEASE_VERSION=$set_by_config_overrides diff --git a/ui/config-overrides.js b/ui/config-overrides.js index c9fb7c84d6..6b53df6727 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -106,17 +106,19 @@ 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'] || {}; +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; -}; + return config +} const getInternalVersion = () => { const out = execSync(`grep -v '^\#' ../release-version`) @@ -171,6 +173,6 @@ module.exports = override( addExtraEntries(), supportDynamicPublicPathPrefix(), overrideProcessEnv({ - INTERNAL_VERSION: JSON.stringify(getInternalVersion()) - }), + RELEASE_VERSION: JSON.stringify(getInternalVersion()), + }) ) diff --git a/ui/lib/utils/useCompatibilityLocalstorage.ts b/ui/lib/utils/useCompatibilityLocalstorage.ts index 61a18b4d41..cbf26f9844 100644 --- a/ui/lib/utils/useCompatibilityLocalstorage.ts +++ b/ui/lib/utils/useCompatibilityLocalstorage.ts @@ -1,11 +1,12 @@ import { useLocalStorageState } from 'ahooks' +// we can **update version field in package.json** to upgrade local storage version key export function useCompatibilityLocalstorage( key: string, defaultValue: T | (() => T) ) { return useLocalStorageState( - `${key}_${process.env.INTERNAL_VERSION}`, + `${key}.v${process.env.REACT_APP_VERSION}`, defaultValue ) } diff --git a/ui/src/sentry.ts b/ui/src/sentry.ts index e77f19eb43..c4433e5164 100644 --- a/ui/src/sentry.ts +++ b/ui/src/sentry.ts @@ -4,7 +4,7 @@ import { Integrations } from '@sentry/tracing' import { sentryEnabled } from '@lib/utils/sentryHelpers' if (sentryEnabled) { - const version = process.env.REACT_APP_VERSION + const version = process.env.RELEASE_VERSION const name = process.env.REACT_APP_NAME const hash = process.env.REACT_APP_COMMIT_HASH const release = `${name}@${version}+${hash}` From df938691c6f2deb557a824aec9d0f385618cf370 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Mon, 7 Jun 2021 10:49:32 +0800 Subject: [PATCH 3/7] tweak(ui): useLocalStorageState adapter --- ui/.env.development | 2 +- ui/.env.production | 2 +- ui/dashboardApp/layout/main/index.tsx | 3 ++- ui/lib/apps/SlowQuery/pages/Detail/index.tsx | 2 +- ui/lib/apps/SlowQuery/pages/List/index.tsx | 11 ++++------- ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx | 2 +- ui/lib/apps/Statement/pages/Detail/index.tsx | 2 +- ui/lib/apps/Statement/pages/List/index.tsx | 11 ++++------- ui/lib/utils/useCompatibilityLocalstorage.ts | 12 ------------ ui/lib/utils/useLocalstorage.ts | 14 ++++++++++++++ ui/lib/utils/useOrderState.ts | 11 ++++++----- 11 files changed, 35 insertions(+), 37 deletions(-) delete mode 100644 ui/lib/utils/useCompatibilityLocalstorage.ts create mode 100644 ui/lib/utils/useLocalstorage.ts diff --git a/ui/.env.development b/ui/.env.development index 4f6940ba96..7f52c8f536 100644 --- a/ui/.env.development +++ b/ui/.env.development @@ -3,4 +3,4 @@ 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 -RELEASE_VERSION=$set_by_config_overrides +RELEASE_VERSION=DO_NOT_EDIT_its_set_in_config-overrides.js diff --git a/ui/.env.production b/ui/.env.production index 75f58e9189..82aeec8de3 100644 --- a/ui/.env.production +++ b/ui/.env.production @@ -4,4 +4,4 @@ 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 -RELEASE_VERSION=$set_by_config_overrides +RELEASE_VERSION=DO_NOT_EDIT_its_set_in_config-overrides.js diff --git a/ui/dashboardApp/layout/main/index.tsx b/ui/dashboardApp/layout/main/index.tsx index 82610f10c5..6d029ab5a7 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/useLocalstorage' + 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..c5560953d2 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/useLocalstorage' 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 08a62a6277..896c33684b 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,7 +26,7 @@ import { MultiSelect, } from '@lib/components' import { CacheContext } from '@lib/utils/useCache' -import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage' +import { useLocalStorageState } from '@lib/utils/useLocalstorage' import SlowQueriesTable from '../../components/SlowQueriesTable' import useSlowQueryTableController, { @@ -48,12 +47,10 @@ function List() { const slowQueryCacheMgr = useContext(CacheContext) - const [ - visibleColumnKeys, - setVisibleColumnKeys, - ] = useCompatibilityLocalstorage( + 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..0a87fb0d6f 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/useLocalstorage' 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..91a337eb4e 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/useLocalstorage' 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 27dfedebeb..6856acc3d9 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,7 +23,7 @@ import { useTranslation } from 'react-i18next' import { CacheContext } from '@lib/utils/useCache' import { Card, ColumnsSelector, Toolbar, MultiSelect } from '@lib/components' -import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage' +import { useLocalStorageState } from '@lib/utils/useLocalstorage' import { StatementsTable } from '../../components' import StatementSettingForm from './StatementSettingForm' @@ -46,12 +45,10 @@ export default function StatementsOverview() { const statementCacheMgr = useContext(CacheContext) const [showSettings, setShowSettings] = useState(false) - const [ - visibleColumnKeys, - setVisibleColumnKeys, - ] = useCompatibilityLocalstorage( + 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/useCompatibilityLocalstorage.ts b/ui/lib/utils/useCompatibilityLocalstorage.ts deleted file mode 100644 index cbf26f9844..0000000000 --- a/ui/lib/utils/useCompatibilityLocalstorage.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useLocalStorageState } from 'ahooks' - -// we can **update version field in package.json** to upgrade local storage version key -export function useCompatibilityLocalstorage( - key: string, - defaultValue: T | (() => T) -) { - return useLocalStorageState( - `${key}.v${process.env.REACT_APP_VERSION}`, - defaultValue - ) -} diff --git a/ui/lib/utils/useLocalstorage.ts b/ui/lib/utils/useLocalstorage.ts new file mode 100644 index 0000000000..a600c163f0 --- /dev/null +++ b/ui/lib/utils/useLocalstorage.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 8028b961c4..b378004d2a 100644 --- a/ui/lib/utils/useOrderState.ts +++ b/ui/lib/utils/useOrderState.ts @@ -1,6 +1,6 @@ import { useState, useMemo } from 'react' -import { useCompatibilityLocalstorage } from './useCompatibilityLocalstorage' +import { useLocalStorageState } from './useLocalstorage' export interface IOrderOptions { orderBy: string @@ -14,10 +14,11 @@ export default function useOrderState( ) { const storeKey = `${storeKeyPrefix}.order_options` const [memoryOrderOptions, setMemoryOrderOptions] = useState(options) - const [ - localOrderOptions, - setLocalOrderOptions, - ] = useCompatibilityLocalstorage(storeKey, options) + const [localOrderOptions, setLocalOrderOptions] = useLocalStorageState( + storeKey, + options, + true + ) const orderOptions = useMemo( () => (needSave ? localOrderOptions : memoryOrderOptions), [needSave, memoryOrderOptions, localOrderOptions] From 92c1a255525f0db565b02538726766c057d8ee32 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Wed, 9 Jun 2021 15:18:41 +0800 Subject: [PATCH 4/7] typo(ui): useLocalStorageState --- ui/dashboardApp/layout/main/index.tsx | 2 +- ui/lib/apps/SlowQuery/pages/Detail/index.tsx | 2 +- ui/lib/apps/SlowQuery/pages/List/index.tsx | 2 +- ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx | 2 +- ui/lib/apps/Statement/pages/Detail/index.tsx | 2 +- ui/lib/apps/Statement/pages/List/index.tsx | 2 +- ui/lib/utils/{useLocalstorage.ts => useLocalStorageState.ts} | 0 ui/lib/utils/useOrderState.ts | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename ui/lib/utils/{useLocalstorage.ts => useLocalStorageState.ts} (100%) diff --git a/ui/dashboardApp/layout/main/index.tsx b/ui/dashboardApp/layout/main/index.tsx index 6d029ab5a7..ed259dffbc 100644 --- a/ui/dashboardApp/layout/main/index.tsx +++ b/ui/dashboardApp/layout/main/index.tsx @@ -3,7 +3,7 @@ import { Root } from '@lib/components' import { HashRouter as Router } from 'react-router-dom' import { useSpring, animated } from 'react-spring' -import { useLocalStorageState } from '@lib/utils/useLocalstorage' +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 c5560953d2..d10193e713 100644 --- a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx +++ b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx @@ -19,7 +19,7 @@ import { Pre, TextWithInfo, } from '@lib/components' -import { useLocalStorageState } from '@lib/utils/useLocalstorage' +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 896c33684b..96800d9a2a 100644 --- a/ui/lib/apps/SlowQuery/pages/List/index.tsx +++ b/ui/lib/apps/SlowQuery/pages/List/index.tsx @@ -26,7 +26,7 @@ import { MultiSelect, } from '@lib/components' import { CacheContext } from '@lib/utils/useCache' -import { useLocalStorageState } from '@lib/utils/useLocalstorage' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import SlowQueriesTable from '../../components/SlowQueriesTable' import useSlowQueryTableController, { diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx index 0a87fb0d6f..ebc9ef3f6c 100644 --- a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx +++ b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx @@ -15,7 +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/useLocalstorage' +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 91a337eb4e..60d0961e30 100644 --- a/ui/lib/apps/Statement/pages/Detail/index.tsx +++ b/ui/lib/apps/Statement/pages/Detail/index.tsx @@ -22,7 +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/useLocalstorage' +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 6856acc3d9..660a7c9cf6 100644 --- a/ui/lib/apps/Statement/pages/List/index.tsx +++ b/ui/lib/apps/Statement/pages/List/index.tsx @@ -23,7 +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/useLocalstorage' +import { useLocalStorageState } from '@lib/utils/useLocalStorageState' import { StatementsTable } from '../../components' import StatementSettingForm from './StatementSettingForm' diff --git a/ui/lib/utils/useLocalstorage.ts b/ui/lib/utils/useLocalStorageState.ts similarity index 100% rename from ui/lib/utils/useLocalstorage.ts rename to ui/lib/utils/useLocalStorageState.ts diff --git a/ui/lib/utils/useOrderState.ts b/ui/lib/utils/useOrderState.ts index b378004d2a..469abae414 100644 --- a/ui/lib/utils/useOrderState.ts +++ b/ui/lib/utils/useOrderState.ts @@ -1,6 +1,6 @@ import { useState, useMemo } from 'react' -import { useLocalStorageState } from './useLocalstorage' +import { useLocalStorageState } from './useLocalStorageState' export interface IOrderOptions { orderBy: string From 59892cf99b41de4acb99469f56b19ed44d054fd2 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Wed, 9 Jun 2021 17:14:56 +0800 Subject: [PATCH 5/7] chore: process file infomation by node fs api --- ui/config-overrides.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/ui/config-overrides.js b/ui/config-overrides.js index 6b53df6727..27224d11bf 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -1,5 +1,6 @@ const path = require('path') -const { execSync } = require('child_process') +const fs = require('fs') +const os = require('os') const { override, fixBabelImports, @@ -121,8 +122,24 @@ const overrideProcessEnv = (value) => (config) => { } const getInternalVersion = () => { - const out = execSync(`grep -v '^\#' ../release-version`) - return out.toString() + // react-app-rewired does not support async override config method right now, + // subscribe: https://github.com/timarney/react-app-rewired/pull/543 + const data = fs.readFileSync('../release-version').toString().split(os.EOL) + let version = "" + for (let i = 0; i < data.length; i++) { + const l = data[i].trim() + if (l.startsWith("#") || (l === "")) { + continue + } + version = l + break + } + + if (version === "") { + throw new Error(`invalid release version`) + } + + return version } module.exports = override( From 857afcc08b351261d0f4555b883e4e9b6437a836 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Wed, 9 Jun 2021 17:34:34 +0800 Subject: [PATCH 6/7] chore: set `unknown` as default env.RELEASE_VERSION --- ui/.env.development | 3 ++- ui/.env.production | 3 ++- ui/config-overrides.js | 10 ++++++---- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/ui/.env.development b/ui/.env.development index 7f52c8f536..6dcd40c3e5 100644 --- a/ui/.env.development +++ b/ui/.env.development @@ -3,4 +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 -RELEASE_VERSION=DO_NOT_EDIT_its_set_in_config-overrides.js +# RELEASE_VERSION is set in config-overrides.js +RELEASE_VERSION=unknown diff --git a/ui/.env.production b/ui/.env.production index 82aeec8de3..e27ea677b2 100644 --- a/ui/.env.production +++ b/ui/.env.production @@ -4,4 +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 -RELEASE_VERSION=DO_NOT_EDIT_its_set_in_config-overrides.js +# RELEASE_VERSION is set in config-overrides.js +RELEASE_VERSION=unknown diff --git a/ui/config-overrides.js b/ui/config-overrides.js index 27224d11bf..fc8f8eaa28 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -125,18 +125,20 @@ 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 data = fs.readFileSync('../release-version').toString().split(os.EOL) - let version = "" + let version = '' for (let i = 0; i < data.length; i++) { const l = data[i].trim() - if (l.startsWith("#") || (l === "")) { + if (l.startsWith('#') || l === '') { continue } version = l break } - if (version === "") { - throw new Error(`invalid release version`) + if (version === '') { + throw new Error( + `invalid release version, please check the release-version @tidb-dashboard/root` + ) } return version From 804db1adcabd307a49555326fc6e22ed41e69868 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Fri, 11 Jun 2021 15:39:59 +0800 Subject: [PATCH 7/7] chore: rename `REACT_APP_RELEASE_VERSION` --- ui/.env.development | 4 ++-- ui/.env.production | 4 ++-- ui/config-overrides.js | 17 ++++++----------- ui/src/sentry.ts | 5 +---- 4 files changed, 11 insertions(+), 19 deletions(-) diff --git a/ui/.env.development b/ui/.env.development index 6dcd40c3e5..4ee3e58b3b 100644 --- a/ui/.env.development +++ b/ui/.env.development @@ -3,5 +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 -# RELEASE_VERSION is set in config-overrides.js -RELEASE_VERSION=unknown +# 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 e27ea677b2..958d4fd2b2 100644 --- a/ui/.env.production +++ b/ui/.env.production @@ -4,5 +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 -# RELEASE_VERSION is set in config-overrides.js -RELEASE_VERSION=unknown +# 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 fc8f8eaa28..bec04e7d4f 100644 --- a/ui/config-overrides.js +++ b/ui/config-overrides.js @@ -124,16 +124,11 @@ const overrideProcessEnv = (value) => (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 data = fs.readFileSync('../release-version').toString().split(os.EOL) - let version = '' - for (let i = 0; i < data.length; i++) { - const l = data[i].trim() - if (l.startsWith('#') || l === '') { - continue - } - version = l - break - } + 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( @@ -192,6 +187,6 @@ module.exports = override( addExtraEntries(), supportDynamicPublicPathPrefix(), overrideProcessEnv({ - RELEASE_VERSION: JSON.stringify(getInternalVersion()), + REACT_APP_RELEASE_VERSION: JSON.stringify(getInternalVersion()), }) ) diff --git a/ui/src/sentry.ts b/ui/src/sentry.ts index c4433e5164..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.RELEASE_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)