outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tracing modal & config

Browse Source
This commit is contained in:
JzoNg 2025-01-09 09:56:11 +08:00
parent 4aac48ed61
commit 297b5280f0
6 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
View File

@ -11,6 +11,8 @@ import ProviderConfigModal from './provider-config-modal'
import Indicator from '@/app/components/header/indicator' import Indicator from '@/app/components/header/indicator'
import Switch from '@/app/components/base/switch' import Switch from '@/app/components/base/switch'
import Tooltip from '@/app/components/base/tooltip' import Tooltip from '@/app/components/base/tooltip'
import Divider from '@/app/components/base/divider'
import cn from '@/utils/classnames'
const I18N_PREFIX = 'app.tracing' const I18N_PREFIX = 'app.tracing'
@ -77,7 +79,6 @@ const ConfigPopup: FC<PopupProps> = ({
className='ml-3' className='ml-3'
defaultValue={enabled} defaultValue={enabled}
onChange={onStatusChange} onChange={onStatusChange}
size='l'
disabled={providerAllNotConfigured} disabled={providerAllNotConfigured}
/> />
) )
@ -106,15 +107,15 @@ const ConfigPopup: FC<PopupProps> = ({
) )
return ( return (
<div className='w-[420px] p-4 rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg'> <div className='w-[420px] p-4 rounded-2xl bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl'>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<div className='flex items-center'> <div className='flex items-center'>
<TracingIcon size='md' className='mr-2' /> <TracingIcon size='md' className='mr-2' />
<div className='leading-[120%] text-[18px] font-semibold text-gray-900'>{t(`${I18N_PREFIX}.tracing`)}</div> <div className='text-text-primary title-2xl-semibold'>{t(`${I18N_PREFIX}.tracing`)}</div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<Indicator color={enabled ? 'green' : 'gray'} /> <Indicator color={enabled ? 'green' : 'gray'} />
<div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'> <div className={cn('ml-1 system-xs-semibold-uppercase text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
{t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)} {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
</div> </div>
{!readOnly && ( {!readOnly && (
@ -130,19 +131,18 @@ const ConfigPopup: FC<PopupProps> = ({
: switchContent} : switchContent}
</> </>
)} )}
</div> </div>
</div> </div>
<div className='mt-2 leading-4 text-xs font-normal text-gray-500'> <div className='mt-2 system-xs-regular text-text-tertiary'>
{t(`${I18N_PREFIX}.tracingDescription`)} {t(`${I18N_PREFIX}.tracingDescription`)}
</div> </div>
<div className='mt-3 h-px bg-gray-100'></div> <Divider className='my-3' />
<div className='mt-3'> <div className='relative'>
{(providerAllConfigured || providerAllNotConfigured) {(providerAllConfigured || providerAllNotConfigured)
? ( ? (
<> <>
<div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${I18N_PREFIX}.configProviderTitle.${providerAllConfigured ? 'configured' : 'notConfigured'}`)}</div> <div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.${providerAllConfigured ? 'configured' : 'notConfigured'}`)}</div>
<div className='mt-2 space-y-2'> <div className='mt-2 space-y-2'>
{langSmithPanel} {langSmithPanel}
{langfusePanel} {langfusePanel}
@ -151,11 +151,11 @@ const ConfigPopup: FC<PopupProps> = ({
) )
: ( : (
<> <>
<div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${I18N_PREFIX}.configProviderTitle.configured`)}</div> <div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.configured`)}</div>
<div className='mt-2'> <div className='mt-2'>
{langSmithConfig ? langSmithPanel : langfusePanel} {langSmithConfig ? langSmithPanel : langfusePanel}
</div> </div>
<div className='mt-3 leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div> <div className='mt-3 system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
<div className='mt-2'> <div className='mt-2'>
{!langSmithConfig ? langSmithPanel : langfusePanel} {!langSmithConfig ? langSmithPanel : langfusePanel}
</div> </div>

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
View File

@ -4,7 +4,7 @@ import React from 'react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import Input from '@/app/components/base/input' import Input from '@/app/components/base/input'
interface Props { type Props = {
className?: string className?: string
label: string label: string
labelClassName?: string labelClassName?: string
@ -26,7 +26,7 @@ const Field: FC<Props> = ({
return ( return (
<div className={cn(className)}> <div className={cn(className)}>
<div className='flex py-[7px]'> <div className='flex py-[7px]'>
<div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div> <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-text-primary')}>{label} </div>
{isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>} {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
</div> </div>
<Input <Input

19
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
View File

@ -17,6 +17,7 @@ import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/gene
import Confirm from '@/app/components/base/confirm' import Confirm from '@/app/components/base/confirm'
import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps' import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
import Divider from '@/app/components/base/divider'
type Props = { type Props = {
appId: string appId: string
@ -152,11 +153,11 @@ const ProviderConfigModal: FC<Props> = ({
? ( ? (
<PortalToFollowElem open> <PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'> <PortalToFollowElemContent className='w-full h-full z-[60]'>
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'> <div className='fixed inset-0 flex items-center justify-center bg-background-overlay'>
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'> <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
<div className='px-8 pt-8'> <div className='px-8 pt-8'>
<div className='flex justify-between items-center mb-4'> <div className='flex justify-between items-center mb-4'>
<div className='text-xl font-semibold text-gray-900'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div> <div className='title-2xl-semibold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
</div> </div>
<div className='space-y-4'> <div className='space-y-4'>
@ -230,16 +231,16 @@ const ProviderConfigModal: FC<Props> = ({
{isEdit && ( {isEdit && (
<> <>
<Button <Button
className='h-9 text-sm font-medium text-gray-700' className='h-9 text-sm font-medium text-text-secondary'
onClick={showRemoveConfirm} onClick={showRemoveConfirm}
> >
<span className='text-[#D92D20]'>{t('common.operation.remove')}</span> <span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
</Button> </Button>
<div className='mx-3 w-px h-[18px] bg-gray-200'></div> <Divider className='mx-3 h-[18px]'/>
</> </>
)} )}
<Button <Button
className='mr-2 h-9 text-sm font-medium text-gray-700' className='mr-2 h-9 text-sm font-medium text-text-secondary'
onClick={onCancel} onClick={onCancel}
> >
{t('common.operation.cancel')} {t('common.operation.cancel')}
@ -256,9 +257,9 @@ const ProviderConfigModal: FC<Props> = ({
</div> </div>
</div> </div>
<div className='border-t-[0.5px] border-t-black/5'> <div className='border-t-[0.5px] border-divider-regular'>
<div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'> <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
<Lock01 className='mr-1 w-3 h-3 text-gray-500' /> <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
{t('common.modelProvider.encrypted.front')} {t('common.modelProvider.encrypted.front')}
<a <a
className='text-primary-600 mx-1' className='text-primary-600 mx-1'

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

@ -1,11 +1,13 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import {
RiEqualizer2Line,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { TracingProvider } from './type' import { TracingProvider } from './type'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { LangfuseIconBig, LangsmithIconBig } from '@/app/components/base/icons/src/public/tracing' 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' import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'
const I18N_PREFIX = 'app.tracing' const I18N_PREFIX = 'app.tracing'
@ -61,34 +63,37 @@ const ProviderPanel: FC<Props> = ({
}, [hasConfigured, isChosen, onChoose, readOnly]) }, [hasConfigured, isChosen, onChoose, readOnly])
return ( return (
<div <div
className={cn(isChosen ? 'border-primary-400' : 'border-transparent', !isChosen && hasConfigured && !readOnly && 'cursor-pointer', 'px-4 py-3 rounded-xl border-[1.5px] bg-gray-100')} className={cn(
'px-4 py-3 rounded-xl border-[1.5px] bg-background-section-burn',
isChosen ? 'bg-background-section border-components-option-card-option-selected-border' : 'border-transparent',
!isChosen && hasConfigured && !readOnly && 'cursor-pointer',
)}
onClick={handleChosen} onClick={handleChosen}
> >
<div className={'flex justify-between items-center space-x-1'}> <div className={'flex justify-between items-center space-x-1'}>
<div className='flex items-center'> <div className='flex items-center'>
<Icon className='h-6' /> <Icon className='h-6' />
{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>} {isChosen && <div className='ml-1 flex items-center h-4 px-1 rounded-[4px] border border-text-accent-secondary system-2xs-medium-uppercase text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
</div> </div>
{!readOnly && ( {!readOnly && (
<div className={'flex justify-between items-center space-x-1'}> <div className={'flex justify-between items-center space-x-1'}>
{hasConfigured && ( {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} > <div className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1' onClick={viewBtnClick} >
<View className='w-3 h-3'/> <View className='w-3 h-3'/>
<div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div> <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
</div> </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' className='flex px-2 items-center h-6 bg-components-button-secondary-bg rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs cursor-pointer text-text-secondary space-x-1'
onClick={handleConfigBtnClick} onClick={handleConfigBtnClick}
> >
<Settings04 className='w-3 h-3' /> <RiEqualizer2Line className='w-3 h-3' />
<div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div> <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
</div> </div>
</div> </div>
)} )}
</div> </div>
<div className='mt-2 leading-4 text-xs font-normal text-gray-500'> <div className='mt-2 system-xs-regular text-text-tertiary'>
{t(`${I18N_PREFIX}.${type}.description`)} {t(`${I18N_PREFIX}.${type}.description`)}
</div> </div>
</div> </div>

2
web/app/components/base/switch/index.tsx
View File

@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'
import { Switch as OriginalSwitch } from '@headlessui/react' import { Switch as OriginalSwitch } from '@headlessui/react'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
interface SwitchProps { type SwitchProps = {
onChange?: (value: boolean) => void onChange?: (value: boolean) => void
size?: 'sm' | 'md' | 'lg' | 'l' size?: 'sm' | 'md' | 'lg' | 'l'
defaultValue?: boolean defaultValue?: boolean

2
web/context/app-context.tsx
View File

@ -127,7 +127,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
setCurrentWorkspace(currentWorkspaceResponse) setCurrentWorkspace(currentWorkspaceResponse)
}, [currentWorkspaceResponse]) }, [currentWorkspaceResponse])
const [theme, setTheme] = useState<Theme>(Theme.light) const [theme, setTheme] = useState<Theme>(Theme.dark)
const handleSetTheme = useCallback((theme: Theme) => { const handleSetTheme = useCallback((theme: Theme) => {
setTheme(theme) setTheme(theme)
globalThis.document.documentElement.setAttribute('data-theme', theme) globalThis.document.documentElement.setAttribute('data-theme', theme)