From 723b69cf8d64bd69045934d74163b0b68f2f3859 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 6 Jun 2025 16:15:37 +0800
Subject: [PATCH] chore: chart panel ui enhance (#20743)

---
 .../[appId]/overview/chartView.tsx            | 32 ++++++++++---------
 .../[appId]/overview/tracing/panel.tsx        | 13 --------
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
index 32822e331..646c8bd93 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
@@ -47,22 +47,24 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
 
   return (
     <div>
-      <div className='mb-4 flex items-center justify-between'>
-        <div className='system-xl-semibold flex flex-row items-center text-text-primary'>
-          <span className='mr-3'>{t('appOverview.analysis.title')}</span>
-          <SimpleSelect
-            items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
-            className='mt-0 !w-40'
-            onSelect={(item) => {
-              const id = item.value
-              const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
-              const name = item.name || t('appLog.filter.period.allTime')
-              onSelect({ value, name })
-            }}
-            defaultValue={'2'}
-          />
+      <div className='mb-4'>
+        <div className='system-xl-semibold mb-2 text-text-primary'>{t('common.appMenus.overview')}</div>
+        <div className='flex items-center justify-between'>
+          <div className='flex flex-row items-center'>
+            <SimpleSelect
+              items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+              className='mt-0 !w-40'
+              onSelect={(item) => {
+                const id = item.value
+                const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
+                const name = item.name || t('appLog.filter.period.allTime')
+                onSelect({ value, name })
+              }}
+              defaultValue={'2'}
+            />
+          </div>
+          {headerRight}
         </div>
-        {headerRight}
       </div>
       {!isWorkflow && (
         <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index bc85f3a73..76e90ecf1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -23,19 +23,6 @@ import Divider from '@/app/components/base/divider'
 
 const I18N_PREFIX = 'app.tracing'
 
-const Title = ({
-  className,
-}: {
-  className?: string
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className={cn('system-xl-semibold flex items-center text-text-primary', className)}>
-      {t('common.appMenus.overview')}
-    </div>
-  )
-}
 const Panel: FC = () => {
   const { t } = useTranslation()
   const pathname = usePathname()