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

Migrated available mds components in Logs Page #2998

Merged
merged 2 commits into from
Aug 16, 2023
Merged

Migrated available mds components in Logs Page #2998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e6941f
Migrated available mds components in Logs Page
Aug 15, 2023
d96685c
Merge branch 'master' into migrate-logs-1
prakashsvmx Aug 16, 2023
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
234 changes: 81 additions & 153 deletions portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,90 +13,34 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.

import React, { Fragment, useEffect, useState } from "react";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Theme } from "@mui/material/styles";
import { Button, PageLayout } from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, Button, Grid, PageLayout, Select } from "mds";
import { useSelector } from "react-redux";
import { FormControl, Grid, InputBase, MenuItem, Select } from "@mui/material";

import { ErrorResponseHandler } from "../../../../../src/common/types";
import api from "../../../../../src/common/api";
import { ErrorResponseHandler } from "../../../../common/types";
import { AppState, useAppDispatch } from "../../../../store";

import { wsProtocol } from "../../../../utils/wsUtils";
import {
actionsTray,
containerForHeader,
inlineCheckboxes,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
logMessageReceived,
logResetMessages,
setLogsStarted,
} from "../logsSlice";
import { setHelpName } from "../../../../systemSlice";
import SearchBox from "../../Common/SearchBox";
import api from "../../../../../src/common/api";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import LogLine from "./LogLine";
import {
logMessageReceived,
logResetMessages,
setLogsStarted,
} from "../logsSlice";
import makeStyles from "@mui/styles/makeStyles";
import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../../HelpMenu";
import { setHelpName } from "../../../../systemSlice";

const useStyles = makeStyles((theme: Theme) =>
createStyles({
logList: {
background: "#fff",
minHeight: 400,
height: "calc(100vh - 200px)",
overflow: "auto",
fontSize: 13,
borderRadius: 4,
},
logerror_tab: {
color: "#A52A2A",
paddingLeft: 25,
},
nodeField: {
width: "100%",
},
...actionsTray,
actionsTray: {
...actionsTray.actionsTray,
marginBottom: 0,
},
...searchField,

...inlineCheckboxes,
...containerForHeader,
}),
);

export const SelectStyled = withStyles((theme: Theme) =>
createStyles({
root: {
lineHeight: "50px",
"label + &": {
marginTop: theme.spacing(3),
},
"& .MuiSelect-select:focus": {
backgroundColor: "transparent",
},
},
}),
)(InputBase);

var c: any = null;

const ErrorLogs = () => {
const dispatch = useAppDispatch();
const classes = useStyles();

const messages = useSelector((state: AppState) => state.logs.logMessages);
const logsStarted = useSelector((state: AppState) => state.logs.logsStarted);
Expand Down Expand Up @@ -223,9 +167,6 @@ const ErrorLogs = () => {
.invoke("GET", `/api/v1/nodes`)
.then((res: string[]) => {
setNodes(res);
// if (res.length > 0) {
// setSelectedNode(res[0]);
// }
setLoadingNodes(false);
})
.catch((err: ErrorResponseHandler) => {
Expand All @@ -243,97 +184,64 @@ const ErrorLogs = () => {
<PageHeaderWrapper label="Logs" actions={<HelpMenu />} />

<PageLayout>
<Grid container spacing={1}>
<Grid item xs={4}>
<Grid container sx={{ gap: 15 }}>
<Grid item xs={3}>
{!loadingNodes ? (
<FormControl variant="outlined" className={classes.nodeField}>
<Select
id="node"
name="node"
data-test-id="node-selector"
value={selectedNode}
onChange={(e) => {
setSelectedNode(e.target.value as string);
}}
className={classes.searchField}
disabled={loadingNodes || logsStarted}
input={<SelectStyled />}
placeholder={"Select Node"}
>
<MenuItem value={"all"} key={`select-node-all`}>
All Nodes
</MenuItem>
{nodes.map((aNode) => (
<MenuItem value={aNode} key={`select-node-name-${aNode}`}>
{aNode}
</MenuItem>
))}
</Select>
</FormControl>
<Select
id="node-selector"
name="node"
data-test-id="node-selector"
value={selectedNode}
onChange={(value) => {
setSelectedNode(value as string);
}}
disabled={loadingNodes || logsStarted}
options={[
{ label: "All Nodes", value: "all" },
...nodes.map((aNode) => ({ label: aNode, value: aNode })),
]}
/>
) : (
<h3> Loading nodes</h3>
)}
</Grid>

<Grid item xs={3}>
<FormControl variant="outlined" className={classes.nodeField}>
<Select
id="logType"
name="logType"
data-test-id="log-type"
value={logType}
onChange={(e) => {
setLogType(e.target.value as string);
}}
className={classes.searchField}
disabled={loadingNodes || logsStarted}
input={<SelectStyled />}
placeholder={"Select Log Type"}
>
<MenuItem value="all" key="all-log-types">
All Log Types
</MenuItem>
<MenuItem value="minio" key="minio-log-type">
MinIO
</MenuItem>
<MenuItem value="application" key="app-log-type">
Application
</MenuItem>
</Select>
</FormControl>
<Select
id="logType"
name="logType"
data-test-id="log-type"
value={logType}
onChange={(value) => {
setLogType(value as string);
}}
disabled={loadingNodes || logsStarted}
options={[
{ value: "all", label: "All Log Types" },
{
value: "minio",
label: "MinIO",
},
{ value: "application", label: "Application" },
]}
/>
</Grid>
<Grid item xs={3}>
{userAgents.length > 1 && (
<FormControl variant="outlined" className={classes.nodeField}>
<Select
id="userAgent"
name="userAgent"
data-test-id="user-agent"
value={selectedUserAgent}
onChange={(e) => {
setSelectedUserAgent(e.target.value as string);
}}
className={classes.searchField}
disabled={userAgents.length < 1 || logsStarted}
input={<SelectStyled />}
>
<MenuItem
value={selectedUserAgent}
key={`select-user-agent-default`}
disabled={true}
>
Select User Agent
</MenuItem>
{userAgents.map((anAgent) => (
<MenuItem
value={anAgent}
key={`select-user-agent-${anAgent}`}
>
{anAgent}
</MenuItem>
))}
</Select>
</FormControl>
<Select
id="userAgent"
name="userAgent"
data-test-id="user-agent"
value={selectedUserAgent}
onChange={(value) => {
setSelectedUserAgent(value as string);
}}
disabled={userAgents.length < 1 || logsStarted}
options={userAgents.map((anAgent) => ({
label: anAgent,
value: anAgent,
}))}
/>
)}
</Grid>
<Grid
Expand Down Expand Up @@ -361,7 +269,21 @@ const ErrorLogs = () => {
/>
)}
</Grid>
<Grid item xs={12} className={classes.actionsTray}>
<Grid
item
xs={12}
sx={{
display: "flex" as const,
justifyContent: "space-between" as const,
alignItems: "center",
marginBottom: "1rem",
"& button": {
flexGrow: 0,
marginLeft: 8,
marginBottom: 0,
},
}}
>
<SearchBox
placeholder="Filter"
onChange={(e) => {
Expand All @@ -371,10 +293,16 @@ const ErrorLogs = () => {
/>
</Grid>
<Grid item xs={12}>
<div
<Box
id="logs-container"
className={classes.logList}
data-test-id="logs-list-container"
sx={{
minHeight: 400,
height: "calc(100vh - 200px)",
overflow: "auto",
fontSize: 13,
borderRadius: 4,
}}
>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
Expand All @@ -390,7 +318,7 @@ const ErrorLogs = () => {
</div>
)}
</TableContainer>
</div>
</Box>
</Grid>
</Grid>
</PageLayout>
Expand Down
2 changes: 1 addition & 1 deletion portal-ui/tests/utils/elements.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const settingsAuditKafkaTab = Selector("button").withAttribute(
//----------------------------------------------------
export const logWindow = Selector('[data-test-id="logs-list-container"]');
//Node selector
export const nodeSelector = Selector('[data-test-id="node-selector"]');
export const nodeSelector = Selector("#node-selector-select");
//----------------------------------------------------
// User Details
//----------------------------------------------------
Expand Down