+
+ New project
+
+
+
+ );
+}
+
+export default NewProject;
diff --git a/admin/src/components/projects/ProjectList.tsx b/admin/src/components/projects/ProjectList.tsx
new file mode 100644
index 0000000..9ae0411
--- /dev/null
+++ b/admin/src/components/projects/ProjectList.tsx
@@ -0,0 +1,311 @@
+import { gql, useMutation, useQuery } from "@apollo/client";
+import {
+ Avatar,
+ Box,
+ Button,
+ CircularProgress,
+ createStyles,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ IconButton,
+ List,
+ ListItem,
+ ListItemAvatar,
+ ListItemSecondaryAction,
+ ListItemText,
+ makeStyles,
+ Snackbar,
+ Theme,
+ Tooltip,
+ Typography,
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+import DescriptionIcon from "@material-ui/icons/Description";
+import DeleteIcon from "@material-ui/icons/Delete";
+import LaunchIcon from "@material-ui/icons/Launch";
+import { Alert } from "@material-ui/lab";
+
+import React, { useState } from "react";
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ projectsList: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ activeProject: {
+ color: theme.palette.getContrastText(theme.palette.secondary.main),
+ backgroundColor: theme.palette.secondary.main,
+ },
+ deleteProjectButton: {
+ color: theme.palette.error.main,
+ },
+ })
+);
+
+const PROJECTS = gql`
+ query Projects {
+ projects {
+ name
+ isActive
+ }
+ }
+`;
+
+const OPEN_PROJECT = gql`
+ mutation OpenProject($name: String!) {
+ openProject(name: $name) {
+ name
+ isActive
+ }
+ }
+`;
+
+const CLOSE_PROJECT = gql`
+ mutation CloseProject {
+ closeProject {
+ success
+ }
+ }
+`;
+
+const DELETE_PROJECT = gql`
+ mutation DeleteProject($name: String!) {
+ deleteProject(name: $name) {
+ success
+ }
+ }
+`;
+
+function ProjectList(): JSX.Element {
+ const classes = useStyles();
+ const { loading: projLoading, error: projErr, data: projData } = useQuery(
+ PROJECTS
+ );
+ const [
+ openProject,
+ { error: openProjErr, loading: openProjLoading },
+ ] = useMutation(OPEN_PROJECT, {
+ errorPolicy: "all",
+ onError: () => {},
+ update(cache, { data: { openProject } }) {
+ cache.modify({
+ fields: {
+ activeProject() {
+ const activeProjRef = cache.writeFragment({
+ data: openProject,
+ fragment: gql`
+ fragment ActiveProject on Project {
+ name
+ isActive
+ type
+ }
+ `,
+ });
+ return activeProjRef;
+ },
+ projects(_, { DELETE }) {
+ cache.writeFragment({
+ id: openProject.name,
+ data: openProject,
+ fragment: gql`
+ fragment OpenProject on Project {
+ name
+ isActive
+ type
+ }
+ `,
+ });
+ return DELETE;
+ },
+ },
+ });
+ },
+ });
+ const [closeProject, { error: closeProjErr }] = useMutation(CLOSE_PROJECT, {
+ errorPolicy: "all",
+ onError: () => {},
+ update(cache) {
+ cache.modify({
+ fields: {
+ activeProject() {
+ return null;
+ },
+ projects(_, { DELETE }) {
+ return DELETE;
+ },
+ },
+ });
+ },
+ });
+ const [
+ deleteProject,
+ { loading: deleteProjLoading, error: deleteProjErr },
+ ] = useMutation(DELETE_PROJECT, {
+ errorPolicy: "all",
+ onError: () => {},
+ update(cache) {
+ cache.modify({
+ fields: {
+ projects(_, { DELETE }) {
+ return DELETE;
+ },
+ },
+ });
+ setDeleteDiagOpen(false);
+ setDeleteNotifOpen(true);
+ },
+ });
+
+ const [deleteProjName, setDeleteProjName] = useState(null);
+ const [deleteDiagOpen, setDeleteDiagOpen] = useState(false);
+ const handleDeleteButtonClick = (name: string) => {
+ setDeleteProjName(name);
+ setDeleteDiagOpen(true);
+ };
+ const handleDeleteConfirm = () => {
+ deleteProject({ variables: { name: deleteProjName } });
+ };
+ const handleDeleteCancel = () => {
+ setDeleteDiagOpen(false);
+ };
+
+ const [deleteNotifOpen, setDeleteNotifOpen] = useState(false);
+ const handleCloseDeleteNotif = (_, reason?: string) => {
+ if (reason === "clickaway") {
+ return;
+ }
+ setDeleteNotifOpen(false);
+ };
+
+ return (
+
+
+
+
+
+ Project {deleteProjName} was deleted.
+
+
+
+
+ Manage projects
+
+
+
+ {projLoading &&
+ Error fetching projects: {projErr.message}
+
+ )}
+ {openProjErr && (
+
+ Error opening project: {openProjErr.message}
+
+ )}
+ {closeProjErr && (
+
+ Error closing project: {closeProjErr.message}
+
+ )}
+
+
+ {projData?.projects.length > 0 && (
+
+ There are no projects. Create one to get started.
+
+ )}
+
+ );
+}
+
+export default ProjectList;
diff --git a/admin/src/components/reqlog/LogsOverview.tsx b/admin/src/components/reqlog/LogsOverview.tsx
index 3c5efcc..f8341e3 100644
--- a/admin/src/components/reqlog/LogsOverview.tsx
+++ b/admin/src/components/reqlog/LogsOverview.tsx
@@ -1,7 +1,12 @@
import { useRouter } from "next/router";
import { gql, useQuery } from "@apollo/client";
-import { useState } from "react";
-import { Box, Typography, CircularProgress } from "@material-ui/core";
+import Link from "next/link";
+import {
+ Box,
+ Typography,
+ CircularProgress,
+ Link as MaterialLink,
+} from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";
import RequestList from "./RequestList";
@@ -42,6 +47,17 @@ function LogsOverview(): JSX.Element {
return -
+ {projData.projects.map((project) => (
+
:8080…
+
+ Active project:
+
+
+
+
+ ) : (
+ -
+
+
+ }
+ >
+ Get started
+
+
+
+ }
+ >
+ Manage projects
+
+
+
+