Skip to content

Commit

Permalink
Merge pull request #2512 from opengovern/ui-changes
Browse files Browse the repository at this point in the history 
feat: add installing state
  • Loading branch information
@mohamadch91
mohamadch91 authored Jan 21, 2025
2 parents 018fb1a + b5ee260 commit ac7ae6a
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 84 deletions.
91 changes: 52 additions & 39 deletions services/webui/src/pages/Integrations/TypeDetailNew/Manifest/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Card, Title } from '@tremor/react'
import { Card, Flex, Title } from '@tremor/react'

import { useEffect, useState } from 'react'

import axios from 'axios'

import { KeyValuePairs } from '@cloudscape-design/components'
import Spinner from '../../../../components/Spinner'
interface IntegrationListProps {
name?: string
integration_type?: string
Expand Down Expand Up @@ -41,6 +42,8 @@ export default function Manifest({
)
.then((resp) => {
setManifest(resp.data)
setLoading(false)

})
.catch((err) => {
console.log(err)
Expand All @@ -56,44 +59,54 @@ export default function Manifest({

return (
<>
<Card className="p-5">
<Title className='mt-2 mb-4 font-semibold'>
Plugin information
</Title>
<KeyValuePairs
columns={4}
items={[
{
label: 'Id',
value: manifest?.IntegrationType,
},
{
label: 'URL',
value: manifest?.DescriberURL,
},
{
label: 'Version',
value: manifest?.DescriberTag,
},
{
label: 'Publisher',
value: manifest?.Publisher,
},
{
label: 'Author',
value: manifest?.Author,
},
{
label: 'Supported Platform Version',
value: manifest?.SupportedPlatformVersion,
},
{
label: 'Update date',
value: manifest?.UpdateDate,
},
]}
/>
</Card>
{loading ? (
<>
<Spinner />
</>
) : (
<Card className="">
<Flex flexDirection='col' className='gap-2 p-5 w-full justify-start items-start'>
<>
<Title className=" mb-4 font-semibold">
Plugin information
</Title>
<KeyValuePairs
columns={4}
items={[
{
label: 'Id',
value: manifest?.IntegrationType,
},
{
label: 'URL',
value: manifest?.DescriberURL,
},
{
label: 'Version',
value: manifest?.DescriberTag,
},
{
label: 'Publisher',
value: manifest?.Publisher,
},
{
label: 'Author',
value: manifest?.Author,
},
{
label: 'Supported Platform Version',
value: manifest?.SupportedPlatformVersion,
},
{
label: 'Update date',
value: manifest?.UpdateDate,
},
]}
/>
</>
</Flex>
</Card>
)}
</>
)
}
32 changes: 23 additions & 9 deletions services/webui/src/pages/Integrations/TypeDetailNew/Setup/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
Card,
Flex,

} from '@tremor/react'

Expand All @@ -9,6 +10,7 @@ import axios from 'axios'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import { useMDXComponents } from '../../../../components/MDX'
import Spinner from '../../../../components/Spinner'
interface IntegrationListProps {
name?: string
integration_type?: string
Expand Down Expand Up @@ -50,6 +52,8 @@ export default function Setup({
.then((resp) => {

setSetup(resp.data)
setLoading(false)

})
.catch((err) => {
console.log(err)
Expand All @@ -66,15 +70,25 @@ export default function Setup({

return (
<>
<Card className="p-2">
<ReactMarkdown
children={setup}
skipHtml={false}
rehypePlugins={[rehypeRaw]}
// @ts-ignore
components={useMDXComponents({})}
/>
</Card>
{loading ? (
<>
<Spinner />
</>
) : (

<Card className="p-2">
<Flex flexDirection='col' className=' p-5 justify-start w-full items-start'>
<></>
<ReactMarkdown
children={setup}
skipHtml={false}
rehypePlugins={[rehypeRaw]}
// @ts-ignore
components={useMDXComponents({})}
/>
</Flex>
</Card>
)}
</>
)
}
Expand Down
76 changes: 40 additions & 36 deletions services/webui/src/pages/Integrations/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,7 @@ export default function Integrations() {
let path = ''
if (selected?.html_url) {
path = `/main/integration/api/v1/integration-types/plugin/load/id/${selected?.platform_name}`
}
else{
} else {
path = `/main/integration/api/v1/integration-types/plugin/load/url/${url}`
}
// @ts-ignore
Expand All @@ -127,11 +126,7 @@ export default function Integrations() {
}

axios
.post(
`${url}${path}`,
{},
config
)
.post(`${url}${path}`, {}, config)
.then((res) => {
getList(9, pageNo, 'count', 'desc', undefined)
setLoading(false)
Expand Down Expand Up @@ -162,20 +157,24 @@ export default function Integrations() {
This Plugin is{' '}
{selected?.installed == 'not_installed'
? 'not installed'
: selected?.installed == 'installing'
? 'installing'
: 'disabled'}{' '}
.
</Text>
{selected?.installed == 'not_installed' &&
selected?.html_url == "" &&(<>
<Input
className='mt-2'
placeholder='Enter Plugin URL'

value={url}
onChange={({ detail }) => setUrl(detail.value)}

/>
</>)}
selected?.html_url == '' && (
<>
<Input
className="mt-2"
placeholder="Enter Plugin URL"
value={url}
onChange={({ detail }) =>
setUrl(detail.value)
}
/>
</>
)}
<Flex
justifyContent="end"
alignItems="center"
Expand All @@ -190,21 +189,26 @@ export default function Integrations() {
>
Close
</Button>
<Button
loading={loading}
disabled={loading}
variant="primary"
onClick={() => {
selected?.installed == 'not_installed'
? InstallPlugin()
: EnableIntegration()
}}
className="mt-6"
>
{selected?.installed == 'not_installed'
? ' Install'
: 'Enable'}
</Button>
{(selected?.installed == 'not_installed' ||
selected?.enabled == 'disabled') && (
<>
<Button
loading={loading}
disabled={loading}
variant="primary"
onClick={() => {
selected?.installed == 'not_installed'
? InstallPlugin()
: EnableIntegration()
}}
className="mt-6"
>
{selected?.installed == 'not_installed'
? ' Install'
: 'Enable'}
</Button>
</>
)}
</Flex>
</div>
</Modal>
Expand Down Expand Up @@ -266,9 +270,7 @@ export default function Integrations() {
{/* <h2 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
Available Dashboards
</h2> */}
<div className="flex items-center space-x-2">

</div>
<div className="flex items-center space-x-2"></div>
</div>
<div className="flex items-center w-full">
<Cards
Expand All @@ -285,7 +287,9 @@ export default function Integrations() {
connector.enabled ===
'disabled' ||
connector?.installed ===
'not_installed'
'not_installed' ||
connector?.installed ===
'installing'
) {
setOpen(true)
setSelected(connector)
Expand Down

0 comments on commit ac7ae6a

Please sign in to comment.