opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new style of status

This commit is contained in:
JzoNg 2024-08-14 18:40:11 +08:00
parent bea4ec5998
commit db63c2c219
4 changed files with 62 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/app/components/workflow/run/assets/highlight.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="237" height="50" viewBox="0 0 237 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M0 8C0 3.58172 3.58172 0 8 0H237L215.033 50H8C3.58172 50 0 46.4183 0 42V8Z" fill="url(#paint0_linear_3552_29170)"/>
<defs>
<linearGradient id="paint0_linear_3552_29170" x1="-4.89158e-08" y1="4.62963" x2="168.013" y2="23.1752" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.12"/>
<stop offset="1" stop-color="white" stop-opacity="0.5"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

5
web/app/components/workflow/run/output-panel.tsx
View File

@ -4,6 +4,7 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { Markdown } from '@/app/components/base/markdown'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import StatusContainer from '@/app/components/workflow/run/status-container'
type OutputPanelProps = {
isRunning?: boolean
@ -27,9 +28,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
)}
{!isRunning && error && (
<div className='px-4'>
<div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs'>
<div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
</div>
<StatusContainer status='failed'>{error}</StatusContainer>
</div>
)}
{!isRunning && !outputs && (

30
web/app/components/workflow/run/status-container.tsx Normal file
View File

@ -0,0 +1,30 @@
'use client'
import type { FC } from 'react'
import cn from '@/utils/classnames'
type Props = {
status: string
children?: React.ReactNode
}
const StatusContainer: FC<Props> = ({
status,
children,
}) => {
return (
<div
className={cn(
'relative px-3 py-2.5 rounded-lg border system-xs-regular',
status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-success',
status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-warning',
status === 'stopped' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-destructive',
status === 'running' && 'border-[rgba(11,165,236,0.8)] bg-workflow-display-normal-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(11,165,236,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-util-colors-blue-light-blue-light-600',
)}
>
<div className='absolute top-0 left-0 w-[65%] h-[50px] bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]'></div>
{children}
</div>
)
}
export default StatusContainer

46
web/app/components/workflow/run/status.tsx
View File

@ -3,6 +3,7 @@ import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import Indicator from '@/app/components/header/indicator'
import StatusContainer from '@/app/components/workflow/run/status-container'
type ResultProps = {
status: string
@ -20,29 +21,24 @@ const StatusPanel: FC<ResultProps> = ({
const { t } = useTranslation()
return (
<div
className={cn(
'px-3 py-[10px] rounded-lg border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-xs',
status === 'succeeded' && '!bg-[#ecfdf3]',
status === 'failed' && '!bg-[#fef3f2]',
status === 'stopped' && '!bg-[#fffaeb]',
status === 'running' && '!bg-primary-50',
)}
>
<StatusContainer status={status}>
<div className='flex'>
<div className='flex-[33%] max-w-[120px]'>
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.status')}</div>
<div
className={cn(
'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
status === 'running' && '!text-primary-600',
status === 'succeeded' && '!text-[#039855]',
status === 'failed' && '!text-[#d92d20]',
status === 'stopped' && '!text-[#f79009]',
'flex items-center gap-1 system-xs-semibold-uppercase',
status === 'succeeded' && 'text-util-colors-green-green-600',
status === 'failed' && 'text-util-colors-red-red-600',
status === 'stopped' && 'text-util-colors-warning-warning-600',
status === 'running' && 'text-util-colors-blue-light-blue-light-600',
)}
>
{status === 'running' && (
<span>Running</span>
<>
<Indicator color={'blue'} />
<span>Running</span>
</>
)}
{status === 'succeeded' && (
<>
@ -65,10 +61,10 @@ const StatusPanel: FC<ResultProps> = ({
</div>
</div>
<div className='flex-[33%] max-w-[152px]'>
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
<div className='flex items-center gap-1 system-sm-medium'>
{status === 'running' && (
<div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
<div className='w-16 h-2 rounded-sm bg-text-quaternary' />
)}
{status !== 'running' && (
<span>{`${time?.toFixed(3)}s`}</span>
@ -76,10 +72,10 @@ const StatusPanel: FC<ResultProps> = ({
</div>
</div>
<div className='flex-[33%]'>
<div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
<div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
<div className='flex items-center gap-1 system-sm-medium'>
{status === 'running' && (
<div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
<div className='w-20 h-2 rounded-sm bg-text-quaternary' />
)}
{status !== 'running' && (
<span>{`${tokens || 0} Tokens`}</span>
@ -89,11 +85,11 @@ const StatusPanel: FC<ResultProps> = ({
</div>
{status === 'failed' && error && (
<>
<div className='my-2 h-[0.5px] bg-black opacity-5' />
<div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
<div className='my-2 h-[0.5px] bg-divider-subtle'/>
<div className='system-xs-regular text-text-destructive'>{error}</div>
</>
)}
</div>
</StatusContainer>
)
}