opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-27 02:36:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: log format

Browse Source
This commit is contained in:
Yi 2024-10-22 16:40:27 +08:00
parent 0b8c896481
commit 1387f406a3
2 changed files with 96 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
web/app/components/plugins/install-plugin/install-from-github/index.tsx
View File

@ -6,37 +6,46 @@ import Button from '@/app/components/base/button'
import type { Item } from '@/app/components/base/select' import type { Item } from '@/app/components/base/select'
import { PortalSelect } from '@/app/components/base/select' import { PortalSelect } from '@/app/components/base/select'
import type { GitHubRepoReleaseResponse } from '@/app/components/plugins/types' import type { GitHubRepoReleaseResponse } from '@/app/components/plugins/types'
import { installPackageFromGitHub } from '@/service/plugins' import { InstallStep } from '../../types'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
type InstallFromGitHubProps = { type InstallFromGitHubProps = {
onClose: () => void onClose: () => void
} }
type InstallStep = 'url' | 'version' | 'package' | 'installed'
type GitHubUrlInfo = { type GitHubUrlInfo = {
isValid: boolean isValid: boolean
owner?: string owner?: string
repo?: string repo?: string
} }
const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => { type InstallState = {
const [step, setStep] = useState<InstallStep>('url') step: InstallStep
const [repoUrl, setRepoUrl] = useState('') repoUrl: string
const [selectedVersion, setSelectedVersion] = useState('') selectedVersion: string
const [selectedPackage, setSelectedPackage] = useState('') selectedPackage: string
const [releases, setReleases] = useState<GitHubRepoReleaseResponse[]>([]) releases: GitHubRepoReleaseResponse[]
}
const versions: Item[] = releases.map(release => ({ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
const [state, setState] = useState<InstallState>({
step: InstallStep.url,
repoUrl: '',
selectedVersion: '',
selectedPackage: '',
releases: [],
})
const versions: Item[] = state.releases.map(release => ({
value: release.tag_name, value: release.tag_name,
name: release.tag_name, name: release.tag_name,
})) }))
const packages: Item[] = selectedVersion const packages: Item[] = state.selectedVersion
? (releases ? (state.releases
.find(release => release.tag_name === selectedVersion) .find(release => release.tag_name === state.selectedVersion)
?.assets.map(asset => ({ ?.assets
.map(asset => ({
value: asset.browser_download_url, value: asset.browser_download_url,
name: asset.name, name: asset.name,
})) || []) })) || [])
@ -58,25 +67,26 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
} }
const handleInstall = async () => { const handleInstall = async () => {
try { // try {
const response = await installPackageFromGitHub({ repo: repoUrl, version: selectedVersion, package: selectedPackage }) // const response = await installPackageFromGitHub({ repo: state.repoUrl, version: state.selectedVersion, package: state.selectedPackage })
if (response.plugin_unique_identifier) { // if (response.plugin_unique_identifier) {
setStep('installed') // setState(prevState => ({...prevState, step: InstallStep.installed}))
console.log('Package installed:') // console.log('Package installed:')
} // }
else { // else {
console.error('Failed to install package:') // console.error('Failed to install package:')
} // }
} // }
catch (error) { // catch (error) {
console.error('Error installing package:') // console.error('Error installing package:')
} // }
setState(prevState => ({ ...prevState, step: InstallStep.installed }))
} }
const handleNext = async () => { const handleNext = async () => {
switch (step) { switch (state.step) {
case 'url': { case InstallStep.url: {
const { isValid, owner, repo } = parseGitHubUrl(repoUrl) const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl)
if (!isValid || !owner || !repo) { if (!isValid || !owner || !repo) {
Toast.notify({ Toast.notify({
type: 'error', type: 'error',
@ -97,8 +107,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
name: asset.name, name: asset.name,
})), })),
})) }))
setReleases(formattedReleases) setState(prevState => ({ ...prevState, releases: formattedReleases, step: InstallStep.version }))
setStep('version')
} }
catch (error) { catch (error) {
Toast.notify({ Toast.notify({
@ -108,23 +117,36 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
} }
break break
} }
case 'version': case InstallStep.version:
setStep('package') setState(prevState => ({ ...prevState, step: InstallStep.package }))
break break
case 'package': case InstallStep.package:
handleInstall() handleInstall()
break break
} }
} }
const handleBack = () => {
setState((prevState) => {
switch (prevState.step) {
case InstallStep.version:
return { ...prevState, step: InstallStep.url }
case InstallStep.package:
return { ...prevState, step: InstallStep.version }
default:
return prevState
}
})
}
const isInputValid = () => { const isInputValid = () => {
switch (step) { switch (state.step) {
case 'url': case InstallStep.url:
return !!repoUrl.trim() return !!state.repoUrl.trim()
case 'version': case InstallStep.version:
return !!selectedVersion return !!state.selectedVersion
case 'package': case InstallStep.package:
return !!selectedPackage return !!state.selectedPackage
default: default:
return true return true
} }
@ -132,13 +154,15 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
const InfoRow = ({ label, value }: { label: string; value: string }) => ( const InfoRow = ({ label, value }: { label: string; value: string }) => (
<div className='flex items-center gap-3'> <div className='flex items-center gap-3'>
<div className='flex w-[72px] items-center gap-2'> <div className='flex-shrink-0 w-[72px] items-center gap-2'>
<div className='text-text-tertiary system-sm-medium'> <div className='text-text-tertiary system-sm-medium truncate'>
{label} {label}
</div> </div>
</div> </div>
<div className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'> <div className='flex-grow overflow-hidden'>
{value} <div className='text-text-secondary text-ellipsis system-sm-medium'>
{value}
</div>
</div> </div>
</div> </div>
) )
@ -157,12 +181,12 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
Install plugin from GitHub Install plugin from GitHub
</div> </div>
<div className='self-stretch text-text-tertiary system-xs-regular'> <div className='self-stretch text-text-tertiary system-xs-regular'>
{step !== 'installed' && 'Please make sure that you only install plugins from a trusted source.'} {state.step !== InstallStep.installed && 'Please make sure that you only install plugins from a trusted source.'}
</div> </div>
</div> </div>
</div> </div>
<div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${step === 'installed' ? 'gap-2' : 'gap-4'}`}> <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStep.installed ? 'gap-2' : 'gap-4'}`}>
{step === 'url' && ( {state.step === InstallStep.url && (
<> <>
<label <label
htmlFor='repoUrl' htmlFor='repoUrl'
@ -174,8 +198,8 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
type='url' type='url'
id='repoUrl' id='repoUrl'
name='repoUrl' name='repoUrl'
value={repoUrl} value={state.repoUrl}
onChange={e => setRepoUrl(e.target.value)} // TODO: needs to verify the url onChange={e => setState(prevState => ({ ...prevState, repoUrl: e.target.value }))} // TODO: needs to verify the url
className='flex items-center self-stretch rounded-lg border border-components-input-border-active className='flex items-center self-stretch rounded-lg border border-components-input-border-active
bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
text-components-input-text-filled text-ellipsis system-sm-regular' text-components-input-text-filled text-ellipsis system-sm-regular'
@ -183,7 +207,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
/> />
</> </>
)} )}
{step === 'version' && ( {state.step === InstallStep.version && (
<> <>
<label <label
htmlFor='version' htmlFor='version'
@ -192,15 +216,15 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
<span className='system-sm-semibold'>Select version</span> <span className='system-sm-semibold'>Select version</span>
</label> </label>
<PortalSelect <PortalSelect
value={selectedVersion} value={state.selectedVersion}
onSelect={item => setSelectedVersion(item.value as string)} onSelect={item => setState(prevState => ({ ...prevState, selectedVersion: item.value as string }))}
items={versions} items={versions}
placeholder="Please select a version" placeholder="Please select a version"
popupClassName='w-[432px] z-[1001]' popupClassName='w-[432px] z-[1001]'
/> />
</> </>
)} )}
{step === 'package' && ( {state.step === InstallStep.package && (
<> <>
<label <label
htmlFor='package' htmlFor='package'
@ -209,22 +233,22 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
<span className='system-sm-semibold'>Select package</span> <span className='system-sm-semibold'>Select package</span>
</label> </label>
<PortalSelect <PortalSelect
value={selectedPackage} value={state.selectedPackage}
onSelect={item => setSelectedPackage(item.value as string)} onSelect={item => setState(prevState => ({ ...prevState, selectedPackage: item.value as string }))}
items={packages} items={packages}
placeholder="Please select a package" placeholder="Please select a package"
popupClassName='w-[432px] z-[1001]' popupClassName='w-[432px] z-[1001]'
/> />
</> </>
)} )}
{step === 'installed' && ( {state.step === InstallStep.installed && (
<> <>
<div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div> <div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
<div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'> <div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
{[ {[
{ label: 'Repository', value: repoUrl }, { label: 'Repository', value: state.repoUrl },
{ label: 'Version', value: selectedVersion }, { label: 'Version', value: state.selectedVersion },
{ label: 'Package', value: selectedPackage }, { label: 'Package', value: state.selectedPackage },
].map(({ label, value }) => ( ].map(({ label, value }) => (
<InfoRow key={label} label={label} value={value} /> <InfoRow key={label} label={label} value={value} />
))} ))}
@ -233,7 +257,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
)} )}
</div> </div>
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'> <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
{step === 'installed' {state.step === InstallStep.installed
? ( ? (
<Button <Button
variant='primary' variant='primary'
@ -248,9 +272,9 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
<Button <Button
variant='secondary' variant='secondary'
className='min-w-[72px]' className='min-w-[72px]'
onClick={onClose} onClick={state.step === InstallStep.url ? onClose : handleBack}
> >
{step === 'url' ? 'Cancel' : 'Back'} {state.step === InstallStep.url ? 'Cancel' : 'Back'}
</Button> </Button>
<Button <Button
variant='primary' variant='primary'
@ -258,7 +282,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
onClick={handleNext} onClick={handleNext}
disabled={!isInputValid()} disabled={!isInputValid()}
> >
{step === 'package' ? 'Install' : 'Next'} {state.step === InstallStep.package ? 'Install' : 'Next'}
</Button> </Button>
</> </>
)} )}

7
web/app/components/plugins/types.ts
View File

@ -116,6 +116,13 @@ export type Permissions = {
canDebugger: PermissionType canDebugger: PermissionType
} }
export enum InstallStep {
url = 'url',
version = 'version',
package = 'package',
installed = 'installed'
}
// endpoint // endpoint
export type CreateEndpointRequest = { export type CreateEndpointRequest = {
plugin_unique_identifier: string plugin_unique_identifier: string