Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI changes #2295

Merged
merged 3 commits into from
Dec 20, 2024
Merged

UI changes #2295

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1949db
feat: add resource types list
mohamadch91 Dec 20, 2024
3f83a31
Merge branch 'main' into ui-changes
mohamadch91 Dec 20, 2024
15e7414
feat: add describe by single resource
mohamadch91 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 120 additions & 4 deletions services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Header,
KeyValuePairs,
Modal,
Multiselect,
Pagination,
SpaceBetween,
Spinner,
Expand Down Expand Up @@ -71,6 +72,10 @@ export default function IntegrationList({
const [confirmModal, setConfirmModal] = useState(false)
const [action, setAction] = useState()
const setNotification = useSetAtom(notificationAtom)
const [resourceTypes, setResourceTypes] = useState<any>([])
const [selectedResourceType, setSelectedResourceType] = useState<any>()
const [runOpen, setRunOpen] = useState(false)
const [runAll, setRunAll] = useState(false)

const GetIntegrations = () => {
setLoading(true)
Expand Down Expand Up @@ -274,7 +279,6 @@ export default function IntegrationList({
let body ={}
if(flag){
body = {
force_full: true,
integration_info:row?.map((item)=>{
return {
integration_type: integration_type,
Expand All @@ -287,7 +291,6 @@ export default function IntegrationList({
}
else{
body = {
force_full: true,
integration_info: [
{
integration_type: integration_type,
Expand All @@ -298,6 +301,14 @@ export default function IntegrationList({
],
}
}
if(selectedResourceType?.length > 0 && selectedResourceType?.length < resourceTypes?.length){
// @ts-ignore
body['resource_types'] = selectedResourceType?.map((item:any)=>{
return {
resource_type: item.value,
}
})
}


axios
Expand All @@ -308,6 +319,7 @@ export default function IntegrationList({
...actionLoading,
discovery: false,
})
setRunOpen(false)
setNotification({
text: `Discovery started`,
type: 'success',
Expand All @@ -326,6 +338,41 @@ export default function IntegrationList({
})
})
}
const GetResourceTypes = () => {
let url = ''
if (window.location.origin === 'http://localhost:3000') {
url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
} else {
url = window.location.origin
}
// @ts-ignore
const token = JSON.parse(localStorage.getItem('openg_auth')).token

const config = {
headers: {
Authorization: `Bearer ${token}`,
},
}

// const body = {
// integration_type: [integration_type],
// }
axios
.get(
`${url}/main/integration/api/v1/integrations/types/${integration_type}/resource_types`,

config
)
.then((res) => {
const data = res.data
console.log(data?.integration_types)
setResourceTypes(data?.integration_types)
})
.catch((err) => {
console.log(err)
})
}



useEffect(() => {
Expand Down Expand Up @@ -410,7 +457,10 @@ export default function IntegrationList({
<Button
loading={actionLoading['discovery']}
onClick={() => {
RunDiscovery(false)
// RunDiscovery(false)
GetResourceTypes()
setRunOpen(true)
setRunAll(false)
}}
>
Run discovery
Expand Down Expand Up @@ -555,7 +605,10 @@ export default function IntegrationList({
]
}
onClick={() => {
RunDiscovery(true)
// RunDiscovery(true)
GetResourceTypes()
setRunOpen(true)
setRunAll(true)
}}
>
Run discovery for all
Expand Down Expand Up @@ -635,6 +688,69 @@ export default function IntegrationList({
</Flex>
</Box>
</Modal>
<Modal
visible={runOpen}
onDismiss={() => setRunOpen(false)}
// @ts-ignore
header={'Run Discovery'}
footer={
<Flex className='gap-3' justifyContent='end'>
<Button
onClick={() => {
setRunOpen(false)
}}
>
Cancel
</Button>
<Button
onClick={() => {
if (
selectedResourceType?.length ==
resourceTypes?.length
){
setSelectedResourceType([])
return
}
const temp: any = []
resourceTypes?.map((item: any) => {
temp.push({
label: item?.name,
value: item?.name,
params: item?.params,
})
})
setSelectedResourceType(temp)
}}
>
{selectedResourceType?.length == resourceTypes?.length ? 'Unselect all' : 'Select all'}
</Button>
<Button
variant="primary"
onClick={() => {
RunDiscovery(runAll)
}}
>
Confirm
</Button>
</Flex>
}
>
<Multiselect
options={resourceTypes?.map((item: any) => {
return {
label: item?.name,
value: item?.name,
params: item?.params,
}
})}
selectedOptions={selectedResourceType}
onChange={({ detail }) => {
setSelectedResourceType(detail.selectedOptions)
}}
tokenLimit={2}
placeholder="Select resource type"
/>
</Modal>
</>
) : (
<Spinner />
Expand Down
Loading