-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(extension): add the OwnerMonitor component
- Loading branch information
Showing
14 changed files
with
344 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { applicationList } from "@dirac-grid/diracx-web-components/components"; | ||
| import { ApplicationMetadata } from "@dirac-grid/diracx-web-components/types"; | ||
| import ElectricScooterIcon from "@mui/icons-material/ElectricScooter"; | ||
| import OwnerMonitor from "@/gubbins/components/OwnerMonitor/OwnerMonitor"; | ||
|
|
||
| // New Application List with the default ones + the Owner Monitor | ||
| const appList: ApplicationMetadata[] = [ | ||
| ...applicationList, | ||
| { name: "Owner Monitor", component: OwnerMonitor, icon: ElectricScooterIcon }, | ||
| ]; | ||
|
|
||
| export { appList as applicationList }; | ||
| export default appList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { DashboardGroup } from "@dirac-grid/diracx-web-components/types"; | ||
| import { BugReport } from "@mui/icons-material"; | ||
| import { applicationList } from "@/gubbins/ApplicationList"; | ||
|
|
||
| // New default user sections | ||
| export const defaultSections: DashboardGroup[] = [ | ||
| { | ||
| title: "My Gubbins Apps", | ||
| extended: true, | ||
| items: [ | ||
| { | ||
| title: "Owners", | ||
| id: "OwnerMonitor1", | ||
| type: "Owner Monitor", | ||
| icon: | ||
| applicationList.find((app) => app.name === "Owner Monitor")?.icon || | ||
| BugReport, | ||
| }, | ||
| { | ||
| title: "My Jobs", | ||
| id: "JobMonitor1", | ||
| type: "Job Monitor", | ||
| icon: | ||
| applicationList.find((app) => app.name === "Job Monitor")?.icon || | ||
| BugReport, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; |
This file was deleted.
Oops, something went wrong.
158 changes: 158 additions & 0 deletions
158
packages/extensions/src/gubbins/components/OwnerMonitor/OwnerMonitor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| "use client"; | ||
| import React, { useEffect, useMemo, useState } from "react"; | ||
| import { useOidcAccessToken } from "@axa-fr/react-oidc"; | ||
| import { | ||
| fetcher, | ||
| useOIDCContext, | ||
| } from "@dirac-grid/diracx-web-components/hooks"; | ||
| import { | ||
| Alert, | ||
| Box, | ||
| Button, | ||
| Snackbar, | ||
| TextField, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { | ||
| createColumnHelper, | ||
| getCoreRowModel, | ||
| useReactTable, | ||
| } from "@tanstack/react-table"; | ||
| import { DataTable } from "@dirac-grid/diracx-web-components/components"; | ||
| import { Owner } from "@/gubbins/types/Owner"; | ||
|
|
||
| /** | ||
| * Owner Monitor component | ||
| * @returns Owner Monitor component | ||
| */ | ||
| export default function OwnerMonitor() { | ||
| // Get info from the auth token | ||
| const { configuration } = useOIDCContext(); | ||
| const { accessToken } = useOidcAccessToken(configuration?.scope); | ||
|
|
||
| const [owners, setOwners] = useState<Owner[]>([]); | ||
| const [ownerName, setOwnerName] = useState(""); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [success, setSuccess] = useState<string | null>(null); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [pagination, setPagination] = useState({ | ||
| pageIndex: 0, | ||
| pageSize: 25, // Default to 25 rows per page | ||
| }); | ||
|
|
||
| // Fetch the list of owners | ||
| const fetchOwners = async () => { | ||
| try { | ||
| setIsLoading(true); | ||
| const response = await fetcher<string[]>([ | ||
| "/api/lollygag/get_owners", | ||
| accessToken, | ||
| ]); | ||
|
|
||
| // Transform names into objects with id and name | ||
| const transformedData = response.data.map((name, index) => ({ | ||
| ownerID: index + 1, // Generate a unique ID | ||
| name, // Set the name | ||
| })); | ||
| setOwners(transformedData); | ||
| } catch (err) { | ||
| setError("Failed to fetch owners"); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| fetchOwners(); | ||
| }, [accessToken]); | ||
|
|
||
| // Handle adding a new owner | ||
| const handleAddOwner = async () => { | ||
| if (!ownerName) return setError("Owner name cannot be empty."); | ||
| try { | ||
| await fetcher([ | ||
| `/api/lollygag/insert_owner/${ownerName}`, | ||
| accessToken, | ||
| "POST", | ||
| ]); | ||
| setSuccess(`Owner "${ownerName}" added successfully.`); | ||
| setOwnerName(""); | ||
| fetchOwners(); // Refresh the owners list | ||
| } catch (err) { | ||
| setError("Failed to add owner."); | ||
| } | ||
| }; | ||
|
|
||
| // Define table columns | ||
| const columnHelper = createColumnHelper<Owner>(); | ||
| const columns = useMemo( | ||
| () => [ | ||
| columnHelper.accessor("ownerID", { header: "ID" }), | ||
| columnHelper.accessor("name", { header: "Owner Name" }), | ||
| ], | ||
| [columnHelper], | ||
| ); | ||
|
|
||
| // Table instance | ||
| const table = useReactTable({ | ||
| data: owners, | ||
| columns, | ||
| state: { pagination }, | ||
| getCoreRowModel: getCoreRowModel(), | ||
| onPaginationChange: setPagination, | ||
| }); | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| flexGrow: 1, | ||
| overflow: "hidden", | ||
| }} | ||
| > | ||
| {/* Input to add owner */} | ||
| <Box display="flex" gap={2} alignItems="center" mb={2}> | ||
| <TextField | ||
| label="Owner Name" | ||
| value={ownerName} | ||
| onChange={(e) => setOwnerName(e.target.value)} | ||
| variant="outlined" | ||
| fullWidth | ||
| data-testid="owner-name-input" | ||
| /> | ||
| <Button variant="contained" color="primary" onClick={handleAddOwner}> | ||
| Add Owner | ||
| </Button> | ||
| </Box> | ||
|
|
||
| {/* Success and Error messages */} | ||
| {error && ( | ||
| <Alert severity="error" onClose={() => setError(null)}> | ||
| {error} | ||
| </Alert> | ||
| )} | ||
| {success && ( | ||
| <Snackbar open autoHideDuration={3000} onClose={() => setSuccess(null)}> | ||
| <Alert onClose={() => setSuccess(null)} severity="success"> | ||
| {success} | ||
| </Alert> | ||
| </Snackbar> | ||
| )} | ||
|
|
||
| {/* Owner List Table */} | ||
| <DataTable<Owner> | ||
| title="Owners List" | ||
| table={table} | ||
| totalRows={owners.length} | ||
| searchBody={{}} | ||
| setSearchBody={() => {}} | ||
| error={null} | ||
| isLoading={isLoading} | ||
| isValidating={isLoading} | ||
| toolbarComponents={<></>} | ||
| menuItems={[]} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
28 changes: 0 additions & 28 deletions
28
packages/extensions/src/gubbins/components/TestApp/testApp.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.