langfuser add view button (#7571)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -6,6 +6,7 @@ import { TracingProvider } from './type'
 import cn from '@/utils/classnames'
 import { LangfuseIconBig, LangsmithIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'
 
 const I18N_PREFIX = 'app.tracing'
 
@@ -13,6 +14,7 @@ type Props = {
   type: TracingProvider
   readOnly: boolean
   isChosen: boolean
+  Config: any
   onChoose: () => void
   hasConfigured: boolean
   onConfig: () => void
@@ -29,6 +31,7 @@ const ProviderPanel: FC<Props> = ({
   type,
   readOnly,
   isChosen,
+  Config,
   onChoose,
   hasConfigured,
   onConfig,
@@ -41,6 +44,14 @@ const ProviderPanel: FC<Props> = ({
     onConfig()
   }, [onConfig])
 
+  const viewBtnClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const url = `${Config?.host}/project/${Config?.project_key}`
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }, [Config?.host, Config?.project_key])
+
   const handleChosen = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
     if (isChosen || !hasConfigured || readOnly)
@@ -58,12 +69,20 @@ const ProviderPanel: FC<Props> = ({
           {isChosen && <div className='ml-1 flex items-center h-4  px-1 rounded-[4px] border border-primary-500 leading-4 text-xs font-medium text-primary-500 uppercase '>{t(`${I18N_PREFIX}.inUse`)}</div>}
         </div>
         {!readOnly && (
-          <div
-            className='flex px-2 items-center h-6 bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer text-gray-700 space-x-1'
-            onClick={handleConfigBtnClick}
-          >
-            <Settings04 className='w-3 h-3' />
-            <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
+          <div className={'flex justify-between items-center space-x-1'}>
+            {hasConfigured && (
+              <div className='flex px-2 items-center h-6 bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer text-gray-700 space-x-1' onClick={viewBtnClick} >
+                <View className='w-3 h-3'/>
+                <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
+              </div>
+            )}
+            <div
+              className='flex px-2 items-center h-6 bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer text-gray-700 space-x-1'
+              onClick={handleConfigBtnClick}
+            >
+              <Settings04 className='w-3 h-3' />
+              <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
+            </div>
           </div>
         )}
 

web/i18n/en-US/app.ts

@@ -95,6 +95,7 @@ const translation = {
     title: 'Tracing app performance',
     description: 'Configuring a Third-Party LLMOps provider and tracing app performance.',
     config: 'Config',
+    view: 'View',
     collapse: 'Collapse',
     expand: 'Expand',
     tracing: 'Tracing',

web/i18n/zh-Hans/app.ts

@@ -94,6 +94,7 @@ const translation = {
     title: '追踪应用性能',
     description: '配置第三方 LLMOps 提供商并跟踪应用程序性能。',
     config: '配置',
+    view: '查看',
     collapse: '折叠',
     expand: '展开',
     tracing: '追踪',

web/i18n/zh-Hant/app.ts

@@ -90,6 +90,7 @@ const translation = {
     title: '追蹤應用程式效能',
     description: '配置第三方LLMOps提供商並追蹤應用程式效能。',
     config: '配置',
+    view: '查看',
     collapse: '收起',
     expand: '展開',
     tracing: '追蹤',