diff --git a/src/components/Job/JobTable.js b/src/components/Job/JobTable.js
index 9f4b8912640da9fb304efccaf31ff66926915d1f..89f0bea5bc472bb7ed69e8b86fee1c49f282010e 100644
--- a/src/components/Job/JobTable.js
+++ b/src/components/Job/JobTable.js
@@ -27,6 +27,27 @@ const jobLogColumns = [
}
];
+const userPageJobLogColumns = [
+ {
+ field: "type",
+ headerName: "Type",
+ flex: 0,
+ headerAlign: "center",
+ align: "center"
+ },
+ { field: "ioc", headerName: "IOC name", width: "15ch", sortable: false },
+ { field: "version", headerName: "Revision", width: "10ch", sortable: false },
+ { field: "host", headerName: "Host", width: "15ch", sortable: false },
+ {
+ field: "start",
+ headerName: "Time",
+ width: "15ch",
+ sortable: false,
+ headerAlign: "right",
+ textAlign: "right"
+ }
+];
+
function createTableRow(job, colorStyle) {
return {
id: job.id,
@@ -88,7 +109,8 @@ export function JobTable({
loading
}) {
const tableTypeSpecifics = {
- jobLog: [jobLogColumns, createTableRowJobLog]
+ jobLog: [jobLogColumns, createTableRowJobLog],
+ userPageJobLog: [userPageJobLogColumns, createTableRowJobLog]
};
const [columns, createRow] = tableTypeSpecifics[rowType];
diff --git a/src/components/common/User/UserIOCList.js b/src/components/common/User/UserIOCList.js
index ccd470c2583a2723da91cfaafe93e5e469bce6cd..93398e3e43189073ceeaeecfe2f8dd21d550749b 100644
--- a/src/components/common/User/UserIOCList.js
+++ b/src/components/common/User/UserIOCList.js
@@ -42,9 +42,9 @@ export function UserIocList({ userName }) {
};
return (
- <Card>
+ <Card variant="plain">
<CardHeader
- title={`IOCs registered by ${userName}`}
+ title={"IOCs registered"}
titleTypographyProps={{
variant: "h2",
component: "h2"
diff --git a/src/components/common/User/UserOperationList.js b/src/components/common/User/UserOperationList.js
index 371401793ed9ae95e5b406b35e909fa81ad0ec8a..6f57ef0f8a1eadd85ecf2a5e8bba7bd98d67ede8 100644
--- a/src/components/common/User/UserOperationList.js
+++ b/src/components/common/User/UserOperationList.js
@@ -39,9 +39,9 @@ export function UserOperationList({ userName }) {
};
return (
- <Card>
+ <Card variant="plain">
<CardHeader
- title={`Operations by ${userName}`}
+ title={"Operations"}
titleTypographyProps={{
variant: "h2",
component: "h2"
@@ -53,6 +53,7 @@ export function UserOperationList({ userName }) {
loading={loading}
pagination={pagination}
onPage={onPage}
+ rowType="userPageJobLog"
/>
</Card>
);
diff --git a/src/components/common/User/UserProfile.js b/src/components/common/User/UserProfile.js
index 103ea39d0205cbc5944a69d71a109a0e4bf8a408..934a4f00f41e294fe117410cf47817733a39d50b 100644
--- a/src/components/common/User/UserProfile.js
+++ b/src/components/common/User/UserProfile.js
@@ -1,33 +1,41 @@
import React from "react";
-import { Avatar, Card, CardHeader } from "@mui/material";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
+import {
+ Avatar,
+ Card,
+ CardMedia,
+ CardContent,
+ Typography
+} from "@mui/material";
export function UserProfile({ userInfo }) {
- const userData = {
- username: userInfo?.loginName,
- avatar: (
- <Avatar
- src={userInfo?.avatar}
- variant="rounded"
- />
- )
- };
-
return (
- <Card>
- <CardHeader
- title="User profile page"
- titleTypographyProps={{
- variant: "h2",
- component: "h2"
- }}
- />
- <KeyValueTable
- obj={userData}
- variant="overline"
- sx={{ border: 0 }}
- valueOptions={{ headerName: "" }}
- />
+ <Card
+ variant="plain"
+ sx={{ display: "flex", flexDirection: "row" }}
+ >
+ <CardContent>
+ <CardMedia>
+ <Avatar
+ sx={{ width: 96, height: 96 }}
+ src={userInfo?.avatar}
+ variant="circle"
+ />
+ </CardMedia>
+ </CardContent>
+ <CardContent>
+ <Typography
+ component="h2"
+ variant="h2"
+ >
+ {userInfo?.fullName}
+ </Typography>
+ <Typography
+ component="h3"
+ variant="h4"
+ >
+ {`@${userInfo?.loginName}`}
+ </Typography>
+ </CardContent>
</Card>
);
}
diff --git a/src/components/navigation/NavigationMenu/LoginControls.js b/src/components/navigation/NavigationMenu/LoginControls.js
index f5d8dc72914a71de0e948786ca1b8fff93b20861..8e00b7cf3127998cbb0c156d6b30807c7935e8f2 100644
--- a/src/components/navigation/NavigationMenu/LoginControls.js
+++ b/src/components/navigation/NavigationMenu/LoginControls.js
@@ -59,7 +59,7 @@ export function ProfileMenu({ user }) {
menuItems: [
...objUserRoles,
{
- text: "User profile page",
+ text: "User profile",
action: () => userProfile(),
icon: <PersonIcon fontSize="small" />
},
diff --git a/src/views/UserPage/UserDetailsAccessControl.js b/src/views/UserPage/UserDetailsAccessControl.js
index be5aa906b6e4b1c5e7bde3f6ffa4aac468ce78b4..69f010ee62998df1f944a217b27073b57903c6c9 100644
--- a/src/views/UserPage/UserDetailsAccessControl.js
+++ b/src/views/UserPage/UserDetailsAccessControl.js
@@ -2,14 +2,12 @@ import React from "react";
import { RootContainer } from "../../components/common/Container/RootContainer";
import AccessControl from "../../components/auth/AccessControl";
import { UserDetailsContainer } from "./UserDetailsContainer";
-import { useParams } from "react-router-dom";
export function UserDetailsAccessControl() {
- const { userName } = useParams();
return (
<RootContainer>
<AccessControl allowedRoles={[]}>
- <UserDetailsContainer userName={userName} />
+ <UserDetailsContainer />
</AccessControl>
</RootContainer>
);
diff --git a/src/views/UserPage/UserDetailsContainer.js b/src/views/UserPage/UserDetailsContainer.js
index 0aac2aa77a2192767a51d194cfd475fe9aa89dee..868c4c84783f4649b0e77beae93c712bfa9ac668 100644
--- a/src/views/UserPage/UserDetailsContainer.js
+++ b/src/views/UserPage/UserDetailsContainer.js
@@ -3,9 +3,11 @@ import { UserPageView } from "./UserPageView";
import { LinearProgress } from "@mui/material";
import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
import { useUserInfo } from "../../api/SwaggerApi";
+import { useParams } from "react-router-dom";
import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
-export function UserDetailsContainer({ userName }) {
+export function UserDetailsContainer() {
+ const { userName } = useParams();
const { user } = useContext(userContext);
const [error, setError] = useState(null);
@@ -52,7 +54,7 @@ export function UserDetailsContainer({ userName }) {
status={error?.status ?? "404"}
message={error?.message}
/>
- ) : user?.loginName === userName ? (
+ ) : user ? (
<UserPageView
userName={userName}
user={user}
diff --git a/src/views/UserPage/UserPageView.js b/src/views/UserPage/UserPageView.js
index f0885d8b7d501ac55e390d741496b9f8fc6fa2ba..71d3681abb06f0e66c8576353067a13488718e0d 100644
--- a/src/views/UserPage/UserPageView.js
+++ b/src/views/UserPage/UserPageView.js
@@ -1,27 +1,17 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
import { Grid } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { GlobalAppBarContext, RootPaper } from "@ess-ics/ce-ui-common";
+import { applicationTitle } from "../../components/common/Helper";
import { UserProfile } from "../../components/common/User/UserProfile";
import { UserIocList } from "../../components/common/User/UserIOCList";
import { UserOperationList } from "../../components/common/User/UserOperationList";
-const PREFIX = "UserPage";
-
-const classes = {
- paper: `${PREFIX}-paper`
-};
-
-const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
- [`& .${classes.paper}`]: {
- maxWidth: "80%",
- padding: theme.spacing(4)
- }
-}));
-
export function UserPageView({ userName, userInfo }) {
+ const { setTitle } = useContext(GlobalAppBarContext);
+ useEffect(() => setTitle(applicationTitle(userName)), [setTitle, userName]);
+
return (
- <StyledRootContainer>
+ <RootPaper>
<Grid
container
spacing={1}
@@ -36,15 +26,15 @@ export function UserPageView({ userName, userInfo }) {
item
xs={12}
>
- <UserOperationList userName={userName} />
+ <UserIocList userName={userName} />
</Grid>
<Grid
item
xs={12}
>
- <UserIocList userName={userName} />
+ <UserOperationList userName={userName} />
</Grid>
</Grid>
- </StyledRootContainer>
+ </RootPaper>
);
}
diff --git a/src/views/UserPage/index.js b/src/views/UserPage/index.js
index 232a503f885e084f47d64b422b4d761f9d8497f5..f77d92acac161553da4fab13bdfcdaede52dd61e 100644
--- a/src/views/UserPage/index.js
+++ b/src/views/UserPage/index.js
@@ -1,4 +1,6 @@
import { UserPageView } from "./UserPageView";
+import { UserDetailsAccessControl } from "./UserDetailsAccessControl";
+import { UserDetailsContainer } from "./UserDetailsContainer";
-export { UserPageView };
+export { UserPageView, UserDetailsAccessControl, UserDetailsContainer };
export default UserPageView;