warning about mismatch timestamp

Author: sunnylqm

src/pages/manage/components/package-list.tsx

@@ -1,19 +1,27 @@
 // import { useDrag } from "react-dnd";
 
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
 import {
   Button,
   Col,
   Form,
   Input,
   List,
   Modal,
+  Popover,
   Row,
   Select,
   Tag,
   Typography,
 } from 'antd';
+import { Link } from 'react-router-dom';
+import { rootRouterPath } from '@/router';
 import { api } from '@/services/api';
+import { usePackageTimestampWarnings } from '@/utils/hooks';
 import { useManageContext } from '../hooks/useManageContext';
 import { Commit } from './commit';
 import { DepsTable } from './deps-table';
@@ -24,15 +32,32 @@ const PackageList = ({
 }: {
   dataSource?: Package[];
   loading?: boolean;
-}) => (
-  <List
-    loading={loading}
-    className="packages"
-    size="small"
-    dataSource={dataSource}
-    renderItem={(item) => <Item item={item} />}
-  />
-);
+}) => {
+  const { appId } = useManageContext();
+  const { app, packageTimestampWarnings } = usePackageTimestampWarnings(appId);
+  const realtimeMetricsPath = app?.appKey
+    ? `${rootRouterPath.realtimeMetrics}?${new URLSearchParams({
+        appKey: app.appKey,
+        attribute: 'packageVersion_buildTime',
+      }).toString()}`
+    : undefined;
+
+  return (
+    <List
+      loading={loading}
+      className="packages"
+      size="small"
+      dataSource={dataSource}
+      renderItem={(item) => (
+        <Item
+          item={item}
+          warningTimestamps={packageTimestampWarnings.get(item.id) ?? []}
+          realtimeMetricsPath={realtimeMetricsPath}
+        />
+      )}
+    />
+  );
+};
 export default PackageList;
 
 function remove(item: Package, appId: number) {
@@ -83,8 +108,49 @@ function edit(item: Package, appId: number) {
   });
 }
 
-const Item = ({ item }: { item: Package }) => {
+const TimestampWarning = ({
+  warningTimestamps,
+  realtimeMetricsPath,
+}: {
+  warningTimestamps: string[];
+  realtimeMetricsPath: string;
+}) => (
+  <Popover
+    trigger="hover"
+    content={
+      <div className="max-w-72 text-xs leading-5">
+        <div>发现不同时间戳：</div>
+        <div className="mt-1 break-all text-gray-700">
+          {warningTimestamps.map((timestamp) => (
+            <div key={timestamp}>{timestamp}</div>
+          ))}
+        </div>
+        <div className="mt-2">
+          需要在应用设置中打开“忽略时间戳”选项，否则这些包无法获得热更新。
+        </div>
+        <div className="mt-1">
+          <Link to={realtimeMetricsPath}>点击此处查看实时数据</Link>
+        </div>
+      </div>
+    }
+  >
+    <span className="ml-2 inline-flex cursor-help items-center text-amber-500">
+      <ExclamationCircleFilled />
+    </span>
+  </Popover>
+);
+
+const Item = ({
+  item,
+  warningTimestamps,
+  realtimeMetricsPath,
+}: {
+  item: Package;
+  warningTimestamps: string[];
+  realtimeMetricsPath?: string;
+}) => {
   const { appId } = useManageContext();
+  const hasTimestampWarning = warningTimestamps.length > 0;
   return (
     // const [_, drag] = useDrag(() => ({ item, type: "package" }));
     <div className="bg-white my-0 [&_li]:px-0!">
@@ -93,10 +159,18 @@ const Item = ({ item }: { item: Package }) => {
           title={
             <Row align="middle">
               <Col flex={1}>
-                {item.name}
-                {item.status && item.status !== 'normal' && (
-                  <Tag className="ml-2">{status[item.status]}</Tag>
-                )}
+                <div className="flex flex-wrap items-center">
+                  <span>{item.name}</span>
+                  {hasTimestampWarning && realtimeMetricsPath && (
+                    <TimestampWarning
+                      warningTimestamps={warningTimestamps}
+                      realtimeMetricsPath={realtimeMetricsPath}
+                    />
+                  )}
+                  {item.status && item.status !== 'normal' && (
+                    <Tag className="ml-2">{status[item.status]}</Tag>
+                  )}
+                </div>
               </Col>
               <DepsTable deps={item.deps} name={`原生包 ${item.name}`} />
               <Commit commit={item.commit} />

src/pages/realtime-metrics.tsx

@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '@/services/api';
+import { patchSearchParams } from '@/utils/helper';
 import { useAppList, useUserInfo } from '@/utils/hooks';
 
 const { Title } = Typography;
@@ -85,22 +86,22 @@ const attributeOptions = [
 ];
 
 export const Component = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams({ attribute: 'hash' });
   const [dateRange, setDateRange] = useState<[Dayjs, Dayjs]>([
     dayjs().subtract(24, 'hour'),
     dayjs(),
   ]);
-  const [selectedAppKey, setSelectedAppKey] = useState<string | undefined>(
-    searchParams.get('appKey') || undefined,
-  );
   const [manualAppKey, setManualAppKey] = useState('');
-  const [selectedAttribute, setSelectedAttribute] =
-    useState<MetricAttribute>('hash');
   const legendValuesRef = useRef<string[]>([]);
 
   const { apps } = useAppList();
   const { user } = useUserInfo();
   const isAdmin = user?.admin === true;
+  const urlAppKey = searchParams.get('appKey') || undefined;
+  const selectedAttribute: MetricAttribute =
+    searchParams.get('attribute') === 'packageVersion_buildTime'
+      ? 'packageVersion_buildTime'
+      : 'hash';
 
   const appOptions = useMemo(() => {
     return (apps || []).reduce<{ label: string; value: string }[]>(
@@ -116,42 +117,36 @@ export const Component = () => {
       [],
     );
   }, [apps]);
-
-  // Sync URL param to state on mount or URL change
-  useEffect(() => {
-    const urlAppKey = searchParams.get('appKey');
-    if (urlAppKey && urlAppKey !== selectedAppKey) {
-      // Admin can access any appKey, non-admin can only access their own
-      if (isAdmin || appOptions.some((opt) => opt.value === urlAppKey)) {
-        setSelectedAppKey(urlAppKey);
-      }
+  const selectedAppKey = useMemo(() => {
+    if (!urlAppKey) {
+      return undefined;
+    }
+    if (isAdmin || appOptions.some((opt) => opt.value === urlAppKey)) {
+      return urlAppKey;
     }
-  }, [searchParams, isAdmin, appOptions, selectedAppKey]);
+    return undefined;
+  }, [appOptions, isAdmin, urlAppKey]);
 
   // Default to first app if no selection
   useEffect(() => {
-    if (
-      !selectedAppKey &&
-      appOptions.length > 0 &&
-      !searchParams.get('appKey')
-    ) {
-      const firstAppKey = appOptions[0].value;
-      setSelectedAppKey(firstAppKey);
-      setSearchParams({ appKey: firstAppKey }, { replace: true });
+    if (!urlAppKey && appOptions.length > 0) {
+      patchSearchParams(setSearchParams, {
+        appKey: appOptions[0].value,
+      });
     }
-  }, [appOptions, selectedAppKey, searchParams, setSearchParams]);
+  }, [appOptions, setSearchParams, urlAppKey]);
 
   // Update URL when selection changes
   const handleAppChange = (appKey: string) => {
-    setSelectedAppKey(appKey);
-    setSearchParams({ appKey }, { replace: true });
+    patchSearchParams(setSearchParams, { appKey });
   };
 
   // Admin manual appKey input
   const handleManualAppKeySubmit = () => {
     if (manualAppKey.trim()) {
-      setSelectedAppKey(manualAppKey.trim());
-      setSearchParams({ appKey: manualAppKey.trim() }, { replace: true });
+      patchSearchParams(setSearchParams, {
+        appKey: manualAppKey.trim(),
+      });
       setManualAppKey('');
     }
   };
@@ -355,7 +350,11 @@ export const Component = () => {
             </div>
             <Radio.Group
               value={selectedAttribute}
-              onChange={(e) => setSelectedAttribute(e.target.value)}
+              onChange={(e) => {
+                patchSearchParams(setSearchParams, {
+                  attribute: e.target.value as MetricAttribute,
+                });
+              }}
               optionType="button"
               buttonStyle="solid"
             >

src/utils/helper.ts

@@ -1,3 +1,5 @@
+import type { NavigateOptions, SetURLSearchParams } from 'react-router-dom';
+
 export function isPasswordValid(password: string) {
   return /(?!^[0-9]+$)(?!^[a-z]+$)(?!^[^A-Z]+$)^.{6,16}$/.test(password);
 }
@@ -77,3 +79,23 @@ export const isExpVersion = (
 
   return rollout < 100;
 };
+
+export const patchSearchParams = (
+  setSearchParams: SetURLSearchParams,
+  patch: Record<string, string | null | undefined>,
+  navigateOptions: NavigateOptions = { replace: true },
+) => {
+  setSearchParams((prev) => {
+    const next = new URLSearchParams(prev);
+
+    for (const [key, value] of Object.entries(patch)) {
+      if (value == null) {
+        next.delete(key);
+      } else {
+        next.set(key, value);
+      }
+    }
+
+    return next;
+  }, navigateOptions);
+};