mirror of
https://github.com/harness/drone.git
synced 2025-05-10 05:01:41 +08:00
586 lines
22 KiB
TypeScript
586 lines
22 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react'
|
|
import { Formik } from 'formik'
|
|
import { parse } from 'yaml'
|
|
import { capitalize, get, has, omit, set } from 'lodash-es'
|
|
import { Classes, PopoverInteractionKind, PopoverPosition } from '@blueprintjs/core'
|
|
import { Color, FontVariation } from '@harnessio/design-system'
|
|
import { Icon, IconProps } from '@harnessio/icons'
|
|
import {
|
|
Accordion,
|
|
Button,
|
|
ButtonVariation,
|
|
Card,
|
|
Container,
|
|
ExpandingSearchInput,
|
|
FormInput,
|
|
FormikForm,
|
|
Layout,
|
|
Popover,
|
|
Text
|
|
} from '@harnessio/uicore'
|
|
import type { TypesPlugin } from 'services/code'
|
|
import { useStrings } from 'framework/strings'
|
|
|
|
import css from './PluginsPanel.module.scss'
|
|
|
|
export interface PluginsPanelInterface {
|
|
onPluginAddUpdate: (isUpdate: boolean, pluginFormData: PluginForm) => void
|
|
}
|
|
|
|
export interface PluginForm {
|
|
[key: string]: string | boolean | object
|
|
}
|
|
|
|
interface PluginInput {
|
|
type: 'string'
|
|
description?: string
|
|
default?: string
|
|
options?: { isExtended?: boolean }
|
|
}
|
|
|
|
interface PluginInputs {
|
|
[key: string]: PluginInput
|
|
}
|
|
|
|
interface PluginCategoryInterface {
|
|
category: PluginCategory
|
|
name: string
|
|
description: string
|
|
icon: IconProps
|
|
}
|
|
|
|
interface PluginInsertionTemplateInterface {
|
|
name?: string
|
|
type: 'plugin'
|
|
spec: {
|
|
name: string
|
|
inputs: { [key: string]: string }
|
|
}
|
|
}
|
|
|
|
enum PluginCategory {
|
|
Harness,
|
|
Drone
|
|
}
|
|
|
|
enum PluginPanelView {
|
|
Category,
|
|
Listing,
|
|
Configuration
|
|
}
|
|
|
|
const PluginInsertionTemplate: PluginInsertionTemplateInterface = {
|
|
name: '<step-name>',
|
|
type: 'plugin',
|
|
spec: {
|
|
name: '<plugin-uid-from-database>',
|
|
inputs: {
|
|
'<param1>': '<value1>',
|
|
'<param2>': '<value2>'
|
|
}
|
|
}
|
|
}
|
|
|
|
const PluginNameFieldPath = 'spec.name'
|
|
const PluginInputsFieldPath = 'spec.inputs'
|
|
|
|
const LIST_FETCHING_LIMIT = 100
|
|
|
|
const RunStep: TypesPlugin = {
|
|
uid: 'run'
|
|
}
|
|
|
|
export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.Element => {
|
|
const { getString } = useStrings()
|
|
const [category, setCategory] = useState<PluginCategory>()
|
|
const [panelView, setPanelView] = useState<PluginPanelView>(PluginPanelView.Category)
|
|
const [plugin, setPlugin] = useState<TypesPlugin>()
|
|
const [plugins, setPlugins] = useState<TypesPlugin[]>([])
|
|
const [query, setQuery] = useState<string>('')
|
|
const [loading, setLoading] = useState<boolean>(false)
|
|
|
|
const PluginCategories: PluginCategoryInterface[] = [
|
|
{
|
|
category: PluginCategory.Harness,
|
|
name: capitalize(getString('run')),
|
|
description: getString('pluginsPanel.run.helptext'),
|
|
icon: { name: 'run-step', size: 15 }
|
|
},
|
|
{
|
|
category: PluginCategory.Drone,
|
|
name: capitalize(getString('plugins.title')),
|
|
description: getString('pluginsPanel.plugins.helptext'),
|
|
icon: { name: 'plugin-ci-step', size: 18 }
|
|
}
|
|
]
|
|
|
|
const fetchPlugins = async (page: number): Promise<TypesPlugin[]> => {
|
|
const response = await fetch(`/api/v1/plugins?page=${page}&limit=${LIST_FETCHING_LIMIT}`)
|
|
if (!response.ok) throw new Error('Failed to fetch plugins')
|
|
return response.json()
|
|
}
|
|
|
|
const fetchAllPlugins = useCallback(async (): Promise<void> => {
|
|
try {
|
|
setLoading(true)
|
|
const pluginsPage1 = await fetchPlugins(1)
|
|
const pluginsPage2 = await fetchPlugins(2)
|
|
setPlugins([...pluginsPage1, ...pluginsPage2])
|
|
} catch (ex) {
|
|
/* ignore exception */
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (category === PluginCategory.Drone) {
|
|
fetchAllPlugins()
|
|
}
|
|
}, [category])
|
|
|
|
useEffect(() => {
|
|
if (panelView !== PluginPanelView.Listing) return
|
|
|
|
if (query) {
|
|
setPlugins(existingPlugins => existingPlugins.filter((item: TypesPlugin) => item.uid?.includes(query)))
|
|
} else {
|
|
fetchAllPlugins()
|
|
}
|
|
}, [query])
|
|
|
|
const handlePluginCategoryClick = useCallback((selectedCategory: PluginCategory) => {
|
|
setCategory(selectedCategory)
|
|
if (selectedCategory === PluginCategory.Drone) {
|
|
setPanelView(PluginPanelView.Listing)
|
|
} else if (selectedCategory === PluginCategory.Harness) {
|
|
setPlugin(RunStep)
|
|
setPanelView(PluginPanelView.Configuration)
|
|
}
|
|
}, [])
|
|
|
|
const renderPluginCategories = (): JSX.Element => {
|
|
return (
|
|
<>
|
|
{PluginCategories.map((item: PluginCategoryInterface) => {
|
|
const { name, category: pluginCategory, description, icon } = item
|
|
return (
|
|
<Card className={css.pluginCard} key={pluginCategory}>
|
|
<Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
|
|
<Layout.Horizontal
|
|
onClick={() => handlePluginCategoryClick(pluginCategory)}
|
|
flex={{ justifyContent: 'flex-start' }}
|
|
className={css.plugin}>
|
|
<Container className={css.pluginIcon}>
|
|
<Icon {...icon} />
|
|
</Container>
|
|
<Layout.Vertical padding={{ left: 'medium' }} spacing="xsmall">
|
|
<Text
|
|
color={Color.GREY_900}
|
|
className={css.pluginCategory}
|
|
font={{ variation: FontVariation.BODY2_SEMI }}>
|
|
{name}
|
|
</Text>
|
|
<Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }}>
|
|
{description}
|
|
</Text>
|
|
</Layout.Vertical>
|
|
</Layout.Horizontal>
|
|
<Container>
|
|
<Icon
|
|
name="arrow-right"
|
|
size={24}
|
|
onClick={() => handlePluginCategoryClick(pluginCategory)}
|
|
className={css.plugin}
|
|
/>
|
|
</Container>
|
|
</Layout.Horizontal>
|
|
</Card>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const renderPlugins = useCallback((): JSX.Element => {
|
|
return loading ? (
|
|
<Container flex={{ justifyContent: 'center' }} padding="large">
|
|
<Icon name="steps-spinner" color={Color.PRIMARY_7} size={25} />
|
|
</Container>
|
|
) : (
|
|
<Layout.Vertical spacing="small" padding={{ top: 'small' }}>
|
|
<Layout.Horizontal flex={{ justifyContent: 'space-between' }} padding={{ left: 'small', right: 'xlarge' }}>
|
|
<Layout.Horizontal
|
|
flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
|
|
spacing="small"
|
|
padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
|
|
<Icon
|
|
name="arrow-left"
|
|
size={18}
|
|
onClick={() => {
|
|
setPanelView(PluginPanelView.Category)
|
|
}}
|
|
className={css.arrow}
|
|
/>
|
|
<Text font={{ variation: FontVariation.H5 }}>{getString('plugins.select')}</Text>
|
|
</Layout.Horizontal>
|
|
<ExpandingSearchInput
|
|
autoFocus={true}
|
|
alwaysExpanded={true}
|
|
defaultValue={query}
|
|
onChange={setQuery}
|
|
className={css.search}
|
|
/>
|
|
</Layout.Horizontal>
|
|
<Container className={css.plugins}>
|
|
{plugins?.map((pluginItem: TypesPlugin) => {
|
|
const { uid, description } = pluginItem
|
|
return (
|
|
<Layout.Horizontal
|
|
flex={{ justifyContent: 'flex-start' }}
|
|
padding={{ left: 'large', top: 'medium', bottom: 'medium', right: 'large' }}
|
|
className={css.plugin}
|
|
onClick={() => {
|
|
setPanelView(PluginPanelView.Configuration)
|
|
setPlugin(pluginItem)
|
|
}}
|
|
key={uid}>
|
|
<Icon name={'plugin-ci-step'} size={25} />
|
|
<Layout.Vertical padding={{ left: 'small' }} spacing="xsmall">
|
|
<Text
|
|
color={Color.GREY_900}
|
|
className={css.pluginCategory}
|
|
font={{ variation: FontVariation.BODY2_SEMI }}>
|
|
{uid}
|
|
</Text>
|
|
<Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }} className={css.pluginDesc}>
|
|
{description}
|
|
</Text>
|
|
</Layout.Vertical>
|
|
</Layout.Horizontal>
|
|
)
|
|
})}
|
|
</Container>
|
|
</Layout.Vertical>
|
|
)
|
|
}, [loading, plugins, query])
|
|
|
|
const generateFriendlyName = useCallback((pluginName: string): string => {
|
|
return capitalize(pluginName.split('_').join(' '))
|
|
}, [])
|
|
|
|
const generateLabelForPluginField = useCallback(
|
|
({ name, properties }: { name: string; properties: PluginInput }): JSX.Element | string => {
|
|
const { description } = properties
|
|
return (
|
|
<Layout.Horizontal spacing="small" flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
|
|
{name && <Text font={{ variation: FontVariation.FORM_LABEL }}>{generateFriendlyName(name)}</Text>}
|
|
{description && (
|
|
<Popover
|
|
interactionKind={PopoverInteractionKind.HOVER}
|
|
boundary="viewport"
|
|
position={PopoverPosition.RIGHT}
|
|
popoverClassName={Classes.DARK}
|
|
content={
|
|
<Container padding="medium">
|
|
<Text font={{ variation: FontVariation.SMALL }} color={Color.WHITE}>
|
|
{description}
|
|
</Text>
|
|
</Container>
|
|
}>
|
|
<Icon name="info" color={Color.PRIMARY_7} size={10} padding={{ bottom: 'small' }} />
|
|
</Popover>
|
|
)}
|
|
</Layout.Horizontal>
|
|
)
|
|
},
|
|
[]
|
|
)
|
|
|
|
const renderPluginFormField = ({ name, properties }: { name: string; properties: PluginInput }): JSX.Element => {
|
|
const { type, options } = properties
|
|
const { isExtended } = options || {}
|
|
const WrapperComponent = isExtended ? FormInput.TextArea : FormInput.Text
|
|
return type === 'string' ? (
|
|
<WrapperComponent
|
|
name={name}
|
|
label={generateLabelForPluginField({ name, properties })}
|
|
style={{ width: '100%' }}
|
|
key={name}
|
|
/>
|
|
) : (
|
|
<></>
|
|
)
|
|
}
|
|
|
|
const constructPayloadForYAMLInsertion = (pluginFormData: PluginForm, pluginMetadata?: TypesPlugin): PluginForm => {
|
|
const { name, container = {} } = pluginFormData
|
|
let payload = { ...PluginInsertionTemplate }
|
|
switch (category) {
|
|
case PluginCategory.Drone:
|
|
/* Step name is optional, set only if specified by user */
|
|
if (name) {
|
|
set(payload, 'name', name)
|
|
} else {
|
|
payload = omit(payload, 'name')
|
|
}
|
|
set(payload, PluginNameFieldPath, pluginMetadata?.uid)
|
|
set(payload, PluginInputsFieldPath, omit(pluginFormData, 'name'))
|
|
return payload
|
|
case PluginCategory.Harness:
|
|
return {
|
|
...(name && { name }),
|
|
type: 'run',
|
|
...(Object.keys(container).length === 1 && has(container, 'image')
|
|
? { spec: { ...pluginFormData, container: get(container, 'image') } }
|
|
: { spec: pluginFormData })
|
|
}
|
|
default:
|
|
return {}
|
|
}
|
|
}
|
|
|
|
const insertNameFieldToPluginInputs = (existingInputs: {
|
|
[key: string]: PluginInput
|
|
}): { [key: string]: PluginInput } => {
|
|
const inputsClone = Object.assign(
|
|
{
|
|
name: {
|
|
type: 'string',
|
|
description: 'Name of the step'
|
|
}
|
|
},
|
|
existingInputs
|
|
)
|
|
return inputsClone
|
|
}
|
|
|
|
const getPluginInputsFromSpec = useCallback((pluginSpec: string): PluginInputs => {
|
|
if (!pluginSpec) {
|
|
return {}
|
|
}
|
|
try {
|
|
const pluginSpecAsObj = parse(pluginSpec)
|
|
return get(pluginSpecAsObj, 'spec.inputs', {})
|
|
} catch (ex) {
|
|
/* ignore error */
|
|
}
|
|
return {}
|
|
}, [])
|
|
|
|
const getInitialFormValues = useCallback((pluginInputs: PluginInputs): PluginInputs => {
|
|
return Object.entries(pluginInputs).reduce((acc, [field, inputObj]) => {
|
|
if (inputObj?.default) {
|
|
set(acc, field, inputObj.default)
|
|
}
|
|
return acc
|
|
}, {} as PluginInputs)
|
|
}, [])
|
|
|
|
const renderPluginConfigForm = useCallback((): JSX.Element => {
|
|
const pluginInputs = getPluginInputsFromSpec(get(plugin, 'spec', '') as string) as PluginInputs
|
|
const allPluginInputs = insertNameFieldToPluginInputs(pluginInputs)
|
|
return (
|
|
<Layout.Vertical spacing="large" className={css.configForm}>
|
|
<Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start' }}>
|
|
<Icon
|
|
name="arrow-left"
|
|
size={18}
|
|
onClick={() => {
|
|
setPlugin(undefined)
|
|
if (category === PluginCategory.Drone) {
|
|
setPanelView(PluginPanelView.Listing)
|
|
} else if (category === PluginCategory.Harness) {
|
|
setPanelView(PluginPanelView.Category)
|
|
}
|
|
}}
|
|
className={css.arrow}
|
|
/>
|
|
{plugin?.uid && (
|
|
<Text font={{ variation: FontVariation.H5 }}>
|
|
{getString('addLabel')} {plugin.uid} {getString('plugins.stepLabel')}
|
|
</Text>
|
|
)}
|
|
</Layout.Horizontal>
|
|
<Container className={css.form}>
|
|
<Formik<PluginForm>
|
|
initialValues={getInitialFormValues(pluginInputs)}
|
|
onSubmit={(formData: PluginForm) => {
|
|
onPluginAddUpdate?.(false, constructPayloadForYAMLInsertion(formData, plugin))
|
|
}}>
|
|
<FormikForm height="100%" flex={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
|
|
<Layout.Vertical flex={{ alignItems: 'flex-start' }} height="inherit" spacing="medium">
|
|
<Layout.Vertical
|
|
width="100%"
|
|
className={css.formFields}
|
|
spacing="xsmall"
|
|
flex={{ justifyContent: 'space-between' }}>
|
|
{category === PluginCategory.Harness ? (
|
|
<Layout.Vertical width="inherit">
|
|
<FormInput.Text name={'name'} label={getString('name')} style={{ width: '100%' }} key={'name'} />
|
|
<FormInput.TextArea
|
|
name={'script'}
|
|
label={getString('pluginsPanel.run.script')}
|
|
style={{ width: '100%' }}
|
|
key={'script'}
|
|
/>
|
|
<FormInput.Select
|
|
name={'shell'}
|
|
label={getString('pluginsPanel.run.shell')}
|
|
style={{ width: '100%' }}
|
|
key={'shell'}
|
|
items={[
|
|
{ label: getString('pluginsPanel.run.sh'), value: 'sh' },
|
|
{ label: getString('pluginsPanel.run.bash'), value: 'bash' },
|
|
{ label: getString('pluginsPanel.run.powershell'), value: 'powershell' },
|
|
{ label: getString('pluginsPanel.run.pwsh'), value: 'pwsh' }
|
|
]}
|
|
/>
|
|
<Accordion activeId="">
|
|
<Accordion.Panel
|
|
id="container"
|
|
summary="Container"
|
|
details={
|
|
<Layout.Vertical className={css.indent}>
|
|
<FormInput.Text
|
|
name={'container.image'}
|
|
label={getString('pluginsPanel.run.image')}
|
|
style={{ width: '100%' }}
|
|
key={'container.image'}
|
|
/>
|
|
<FormInput.Select
|
|
name={'container.pull'}
|
|
label={getString('pluginsPanel.run.pull')}
|
|
style={{ width: '100%' }}
|
|
key={'container.pull'}
|
|
items={[
|
|
{ label: getString('pluginsPanel.run.always'), value: 'always' },
|
|
{ label: getString('pluginsPanel.run.never'), value: 'never' },
|
|
{ label: getString('pluginsPanel.run.ifNotExists'), value: 'f-not-exists' }
|
|
]}
|
|
/>
|
|
<FormInput.Text
|
|
name={'container.entrypoint'}
|
|
label={getString('pluginsPanel.run.entrypoint')}
|
|
style={{ width: '100%' }}
|
|
key={'container.entrypoint'}
|
|
/>
|
|
<FormInput.Text
|
|
name={'container.network'}
|
|
label={getString('pluginsPanel.run.network')}
|
|
style={{ width: '100%' }}
|
|
key={'container.network'}
|
|
/>
|
|
<FormInput.Text
|
|
name={'container.networkMode'}
|
|
label={getString('pluginsPanel.run.networkMode')}
|
|
style={{ width: '100%' }}
|
|
key={'container.networkMode'}
|
|
/>
|
|
<FormInput.Toggle
|
|
name={'container.privileged'}
|
|
label={getString('pluginsPanel.run.privileged')}
|
|
style={{ width: '100%' }}
|
|
key={'container.privileged'}
|
|
/>
|
|
<FormInput.Text
|
|
name={'container.user'}
|
|
label={getString('user')}
|
|
style={{ width: '100%' }}
|
|
key={'container.user'}
|
|
/>
|
|
<Accordion activeId="">
|
|
<Accordion.Panel
|
|
id="container.credentials"
|
|
summary={getString('pluginsPanel.run.credentials')}
|
|
details={
|
|
<Layout.Vertical className={css.indent}>
|
|
<FormInput.Text
|
|
name={'container.credentials.username'}
|
|
label={getString('pluginsPanel.run.username')}
|
|
style={{ width: '100%' }}
|
|
key={'container.credentials.username'}
|
|
/>
|
|
<FormInput.Text
|
|
name={'container.credentials.password'}
|
|
label={getString('pluginsPanel.run.password')}
|
|
style={{ width: '100%' }}
|
|
key={'container.credentials.password'}
|
|
/>
|
|
</Layout.Vertical>
|
|
}
|
|
/>
|
|
</Accordion>
|
|
</Layout.Vertical>
|
|
}
|
|
/>
|
|
<Accordion.Panel
|
|
id="mount"
|
|
summary="Mount"
|
|
details={
|
|
<Layout.Vertical className={css.indent}>
|
|
<FormInput.Text
|
|
name={'mount.name'}
|
|
label={getString('name')}
|
|
style={{ width: '100%' }}
|
|
key={'mount.name'}
|
|
/>
|
|
<FormInput.Text
|
|
name={'mount.path'}
|
|
label={getString('pluginsPanel.run.path')}
|
|
style={{ width: '100%' }}
|
|
key={'mount.path'}
|
|
/>
|
|
</Layout.Vertical>
|
|
}
|
|
/>
|
|
</Accordion>
|
|
</Layout.Vertical>
|
|
) : Object.keys(pluginInputs).length > 0 ? (
|
|
<Layout.Vertical width="inherit">
|
|
{Object.keys(allPluginInputs).map((field: string) => {
|
|
return renderPluginFormField({ name: field, properties: get(allPluginInputs, field) })
|
|
})}
|
|
</Layout.Vertical>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Layout.Vertical>
|
|
<Container margin={{ top: 'small', bottom: 'small' }}>
|
|
<Button variation={ButtonVariation.PRIMARY} text={getString('addLabel')} type="submit" />
|
|
</Container>
|
|
</Layout.Vertical>
|
|
</FormikForm>
|
|
</Formik>
|
|
</Container>
|
|
</Layout.Vertical>
|
|
)
|
|
}, [plugin, category])
|
|
|
|
const renderPluginsPanel = useCallback((): JSX.Element => {
|
|
switch (panelView) {
|
|
case PluginPanelView.Category:
|
|
return renderPluginCategories()
|
|
case PluginPanelView.Listing:
|
|
return renderPlugins()
|
|
case PluginPanelView.Configuration:
|
|
return renderPluginConfigForm()
|
|
default:
|
|
return <></>
|
|
}
|
|
}, [loading, plugins, panelView, category])
|
|
|
|
return (
|
|
<Layout.Vertical height="100%">
|
|
{panelView === PluginPanelView.Category ? (
|
|
<Container padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
|
|
<Text font={{ variation: FontVariation.H5 }}>{getString('step.select')}</Text>
|
|
</Container>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{renderPluginsPanel()}
|
|
</Layout.Vertical>
|
|
)
|
|
}
|