all working perfect before demo (d323185a) · Commits · OCF / backoffice / frontend

capif_frontend/src/pages/apis/[id].js

+63 −6

Original line number	Diff line number	Diff line
		@@ -8,23 +8,80 @@ import Table from '@mui/material/Table'
		import TableContainer from '@mui/material/TableContainer'
		import CardContent from '@mui/material/CardContent'
		import { useRouter } from 'next/router'
		import { styled } from '@mui/material/styles'
		import { getApis } from 'src/configs/apiService'
		import { use, useEffect, useState } from 'react'
		import { useQuery, useQueryClient } from '@tanstack/react-query'
		import { set } from 'nprogress'

		const Providers = () => {

		const LinkStyled = styled(Link)(({ theme }) => ({
		textDecoration: 'none',
		color: theme.palette.primary.main,
		}));

		const Apis = () => {
		const router = useRouter()
		const apiName = router.query.id
		const [selectedApi, setSelectedApi] = useState(null);

		// Define la clave única para esta consulta
		const queryKey = ['apis'];

		return (
		<Grid container spacing={6}>
		<PageHeader title={<Typography variant='h5'>Provider: 9584672c413fe3871ac61319246dd0</Typography>} />
		// Usa useQuery para obtener los datos
		const { data: apisData, isLoading, isError, refetch } = useQuery({
		queryKey,
		queryFn: getApis,
		});

		const selectApi = () => {
		try {
		if (Array.isArray(apisData.data.object)) {
		// Filtra el array para encontrar el elemento deseado
		const selectedApi = apisData.data.object.find(api => api.api_name === apiName);
		setSelectedApi(selectedApi);

		if (selectedApi) {
		console.log('Selected API:', selectedApi);
		// Realiza acciones con el elemento seleccionado
		} else {
		console.warn('API not found:', apiName);
		}
		} else {
		console.error('Error: apisData is not an array');
		console.error('apisData:', apisData);
		}
		} catch (error) {
		console.error('Error fetching data:', error);
		}
		};

		useEffect(() => {
		selectApi();
		}, [apiName, apisData]);




		return (
		<Grid container spacing={6}>
		<PageHeader title={<Typography variant='h5'>API: {apiName} </Typography>} />

		<Grid item xs={12}>
		<Card>
		<CardHeader title='Information' />
		<CardContent>
		<p>
		* Work in progress *
		Nombre: {apiName}
		</p>
		<p>
		API: {selectedApi?.api_id}
		</p>
		<p>
		APF: {selectedApi?.apf_id}
		</p>
		<p>
		AEF: {selectedApi?.aef_profiles[0].aef_id}
		</p>
		</CardContent>
		</Card>
		@@ -35,4 +92,4 @@ const Providers = () => {
		)
		}

		export default Providers
		export default Apis

capif_frontend/src/pages/apis/index.js

+39 −6

Original line number	Diff line number	Diff line
		@@ -16,9 +16,11 @@ import TableCell from '@mui/material/TableCell';
		import TableContainer from '@mui/material/TableContainer';
		import CircularProgress from '@mui/material/CircularProgress';
		import Button from '@mui/material/Button';
		import { getApis } from 'src/configs/apiService';
		import { getApis, getNumApis } from 'src/configs/apiService';
		import { useState } from 'react'
		import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'
		import TextField from '@mui/material/TextField';
		import { deleteProviderService } from 'src/configs/apiService';

		const LinkStyled = styled(Link)(({ theme }) => ({
		textDecoration: 'none',
		@@ -29,6 +31,7 @@ const Apis = () => {
		const queryClient = useQueryClient();
		const [selectedApi, setSelectedApi] = useState(null);
		const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
		const [searchTerm, setSearchTerm] = useState('');

		// Define la clave única para esta consulta
		const queryKey = ['apis'];
		@@ -39,6 +42,15 @@ const Apis = () => {
		queryFn: getApis,
		});

		// Definir la clave única para esta consulta
		const queryKeyNum = ['apisNum']

		// Utilizar useQuery para obtener los datos
		const { data: apisNum, isLoadingNum, isErrorNum } = useQuery({
		queryKeyNum,
		queryFn: getNumApis,
		});

		const handleDeleteClick = (apf_id, api_id) => {
		setSelectedApi({ apf_id, api_id })
		setDeleteDialogOpen(true)
		@@ -46,7 +58,7 @@ const Apis = () => {

		const handleDeleteConfirm = async () => {
		try {
		const { apf_id, api_id } = selectedProvider
		const { apf_id, api_id } = selectedApi
		await deleteProviderService(apf_id, api_id)
		console.log('API eliminado')
		// Invalidar la caché después de la eliminación para que se vuelva a cargar la lista
		@@ -67,7 +79,28 @@ const Apis = () => {

		return (
		<Grid container spacing={6}>
		<PageHeader title={<Typography variant='h5'>APIs</Typography>} />

		<Grid item xs={8}>
		<PageHeader title={<Typography variant='h5'>APIs: {apisNum?.data}</Typography>} />
		</Grid>

		{/* Grid con el campo de búsqueda en la segunda columna */}
		<Grid item xs={4}>
		<Grid container spacing={2}>
		{/* Agregar un campo de búsqueda */}
		<Grid item xs={12}>
		<TextField
		label="Search by ..."
		variant="outlined"
		value={searchTerm}
		onChange={(e) => setSearchTerm(e.target.value)}
		/>
		</Grid>

		{/* Otros elementos adicionales en la segunda columna, si es necesario */}
		</Grid>
		</Grid>

		<Grid item xs={12}>
		<Card>
		<CardHeader title='List of APIs' />
		@@ -94,7 +127,7 @@ const Apis = () => {
		</TableRow>
		</TableHead>
		<TableBody>
		{apisData.data.map((api) => (
		{apisData.data.object.map((api) => (
		<TableRow
		key={api.username}
		sx={{
		@@ -104,7 +137,7 @@ const Apis = () => {
		}}
		>
		<TableCell component='th' scope='row'>
		<LinkStyled href={`/users/${api.username}`}>
		<LinkStyled href={`/apis/${api.api_name}`}>
		{api.api_name}
		</LinkStyled>
		</TableCell>
		@@ -113,7 +146,7 @@ const Apis = () => {
		<TableCell>
		<Button
		variant='contained'
		onClick={() => handleDeleteClick()}
		onClick={() => handleDeleteClick(api.apf_id, api.api_id)}
		>
		Delete
		</Button>

capif_frontend/src/pages/dashboard/index.js

+3 −0

Original line number	Diff line number	Diff line
		import Grid from '@mui/material/Grid'
		import { useSettings } from 'src/@core/hooks/useSettings'
		import { useEffect, useState } from 'react';
		import { CircularProgress, Button } from '@mui/material';
		import { getAccessToken } from 'src/configs/cookies';

		const Dashboard = () => {
		const { settings } = useSettings()

capif_frontend/src/pages/home-dashboards/index.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -285,7 +285,7 @@ const Homedash = () => {
		{data?.apis.apisData && (
		<>
		<List>
		{data.apis.apisData.slice(-5).map((api) => (
		{data.apis.apisData.object.slice(-5).map((api) => (
		<ListItem key={api.api_id}>
		<ListItemText
		primary={

capif_frontend/src/pages/invokers/[id].js

+57 −6

Original line number	Diff line number	Diff line
		@@ -21,12 +21,18 @@ import { useRouter } from 'next/router'
		import { set } from 'nprogress'
		import { useParams } from 'react-router-dom';
		import { useLocation } from 'react-router-dom';
		import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'

		const Invokers = () => {
		const router = useRouter()
		const invokerId = router.query.id
		const [invokerSecurityData, setInvokerSecurityData] = useState(null)
		const [invokerEvents, setInvokerEvents] = useState(null)
		const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);

		const [selecedInvokerId, setSelectedInvokerId] = useState(null);
		const [selecedAefId, setSelectedAefId] = useState(null);
		const [selecedApiId, setSelectedApiId] = useState(null);

		const fetchData = async () => {
		try {
		@@ -35,24 +41,56 @@ const Invokers = () => {
		console.log("Security data: ")
		console.log(invokerSecurityData)

		const { data: invokerEvents } = await getEvents(invokerId)
		setInvokerEvents(invokerEvents)
		console.log(invokerEvents)
		// const { data: invokerEvents } = await getEvents(invokerId)
		// setInvokerEvents(invokerEvents)
		// console.log(invokerEvents)

		} catch (error) {
		console.error('Error fetching invoker data:', error)
		}
		}

		const handleDeleteClick = async (invokerId, aef_id, api_id) => {
		// const handleDeleteClick = async (invokerId, aef_id, api_id) => {
		// try {
		// const { data } = await deleteSecurityContext(invokerId, aef_id, api_id)
		// console.log('Security Context eliminado', data)
		// fetchData();
		// } catch (error) {
		// console.error('Error al eliminar el security context', error.message);
		// }
		// };

		const handleDeleteClick = (invokerId, aef_id, api_id) => {
		console.log("InvokerId: ", invokerId)
		console.log("AefId: ", aef_id)
		console.log("ApiId: ", api_id)

		setSelectedInvokerId(invokerId)
		setSelectedAefId(aef_id)
		setSelectedApiId(api_id)

		console.log("SelectedInvokerId: ", selecedInvokerId)
		console.log("SelectedAefId: ", selecedAefId)
		console.log("SelectedApiId: ", selecedApiId)
		setDeleteDialogOpen(true)
		}

		const handleDeleteConfirm = async () => {
		try {
		const { data } = await deleteSecurityContext(invokerId, aef_id, api_id)
		const { data } = await deleteSecurityContext(selecedInvokerId, selecedAefId, selecedApiId)
		console.log('Security Context eliminado', data)
		fetchData();
		} catch (error) {
		console.error('Error al eliminar el security context', error.message);
		}
		};
		}

		const handleDeleteCancel = () => {
		setDeleteDialogOpen(false)
		setSelectedInvokerId(null)
		setSelectedAefId(null)
		setSelectedApiId(null)
		}

		useEffect(() => {
		fetchData()
		@@ -163,6 +201,19 @@ const Invokers = () => {
		</Card>
		</Grid>

		{/* Confirmación de eliminación */}
		<Dialog open={isDeleteDialogOpen} onClose={handleDeleteCancel}>
		<DialogTitle>Confirm Deletion</DialogTitle>
		<DialogContent>
		Are you sure you want to delete the security context?
		</DialogContent>
		<DialogActions>
		<Button onClick={handleDeleteCancel}>Cancel</Button>
		<Button onClick={handleDeleteConfirm} autoFocus>
		Confirm
		</Button>
		</DialogActions>
		</Dialog>
		</Grid>
		)
		}