Initial Tools Pages Migrations (#2978)
Tools Pages Migrations - Call Home - Inspect - Profile - Health Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
GitHub
@@ -15,120 +15,20 @@
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Fragment, useEffect, useState } from "react";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { Grid } from "@mui/material";
|
||||
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
||||
import { DrivesIcon, Loader, VersionIcon } from "mds";
|
||||
import { DrivesIcon, Loader, SectionTitle, VersionIcon, Grid } from "mds";
|
||||
import { api } from "api";
|
||||
import { ServerProperties } from "api/consoleApi";
|
||||
|
||||
interface ITestWrapper {
|
||||
title: any;
|
||||
children: any;
|
||||
classes: any;
|
||||
advancedVisible: boolean;
|
||||
advancedContent?: any;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
titleBar: {
|
||||
borderBottom: "#E5E5E5 1px solid",
|
||||
padding: "30px 25px",
|
||||
fontSize: 20,
|
||||
color: "#07193E",
|
||||
fontWeight: "bold",
|
||||
borderRadius: "10px 10px 0px 0px",
|
||||
paddingTop: 0,
|
||||
},
|
||||
divisorContainer: {
|
||||
padding: 25,
|
||||
},
|
||||
serversData: {
|
||||
color: "#07193E",
|
||||
fontSize: 18,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"& svg": {
|
||||
marginRight: 10,
|
||||
},
|
||||
},
|
||||
minioVersionContainer: {
|
||||
fontSize: 12,
|
||||
color: "#07193E",
|
||||
justifyContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
},
|
||||
versionIcon: {
|
||||
color: "#07193E",
|
||||
marginRight: 20,
|
||||
},
|
||||
loaderAlign: {
|
||||
textAlign: "center",
|
||||
},
|
||||
advancedContainer: {
|
||||
justifyContent: "flex-end",
|
||||
display: "flex",
|
||||
},
|
||||
optionsContainer: {
|
||||
padding: 0,
|
||||
marginBottom: 25,
|
||||
},
|
||||
advancedConfiguration: {
|
||||
color: "#2781B0",
|
||||
fontSize: 10,
|
||||
textDecoration: "underline",
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
cursor: "pointer",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
|
||||
"&:hover": {
|
||||
color: "#07193E",
|
||||
},
|
||||
|
||||
"& svg": {
|
||||
width: 10,
|
||||
alignSelf: "center",
|
||||
marginLeft: 5,
|
||||
},
|
||||
},
|
||||
advancedOpen: {
|
||||
transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
|
||||
},
|
||||
advancedClosed: {
|
||||
transform: "rotateZ(90deg)",
|
||||
},
|
||||
advancedContent: {
|
||||
backgroundColor: "#F5F7F9",
|
||||
maxHeight: 0,
|
||||
transitionDuration: "0.3s",
|
||||
overflow: "hidden",
|
||||
padding: "0 15px",
|
||||
"&.open": {
|
||||
maxHeight: 400,
|
||||
padding: 15,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const TestWrapper = ({
|
||||
title,
|
||||
children,
|
||||
classes,
|
||||
advancedVisible,
|
||||
advancedContent,
|
||||
}: ITestWrapper) => {
|
||||
const TestWrapper = ({ title, children }: ITestWrapper) => {
|
||||
const [version, setVersion] = useState<string>("N/A");
|
||||
const [totalNodes, setTotalNodes] = useState<number>(0);
|
||||
const [totalDrives, setTotalDrives] = useState<number>(0);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [advancedOpen, setAdvancedOpen] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
@@ -165,15 +65,37 @@ const TestWrapper = ({
|
||||
|
||||
return (
|
||||
<Grid item xs={12}>
|
||||
<Grid item xs={12} className={classes.titleBar}>
|
||||
{title}
|
||||
</Grid>
|
||||
<SectionTitle separator>{title}</SectionTitle>
|
||||
<Grid item xs={12}>
|
||||
<Grid item xs={12} className={classes.optionsContainer}>
|
||||
<Grid container className={classes.divisorContainer}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
padding: 0,
|
||||
marginBottom: 25,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
padding: 25,
|
||||
}}
|
||||
>
|
||||
{!loading ? (
|
||||
<Fragment>
|
||||
<Grid item xs={12} md={4} className={classes.serversData}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"& svg": {
|
||||
marginRight: 10,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DrivesIcon /> <strong>{totalNodes}</strong>
|
||||
nodes,
|
||||
<strong>{totalDrives}</strong> drives
|
||||
@@ -182,53 +104,32 @@ const TestWrapper = ({
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
className={classes.minioVersionContainer}
|
||||
sx={{
|
||||
fontSize: 12,
|
||||
justifyContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span className={classes.versionIcon}>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 20,
|
||||
}}
|
||||
>
|
||||
<VersionIcon />
|
||||
</span>{" "}
|
||||
MinIO VERSION <strong>{version}</strong>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4} className={classes.advancedContainer}>
|
||||
{advancedVisible && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setAdvancedOpen(!advancedOpen);
|
||||
}}
|
||||
className={classes.advancedConfiguration}
|
||||
>
|
||||
Advanced configurations{" "}
|
||||
<span
|
||||
className={
|
||||
advancedOpen
|
||||
? classes.advancedOpen
|
||||
: classes.advancedClosed
|
||||
}
|
||||
>
|
||||
<ArrowForwardIosIcon />
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</Grid>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Grid item xs={12} className={classes.loaderAlign}>
|
||||
<Grid item xs={12} sx={{ textAlign: "center" }}>
|
||||
<Loader style={{ width: 25, height: 25 }} />
|
||||
</Grid>
|
||||
</Fragment>
|
||||
)}
|
||||
</Grid>
|
||||
{advancedContent && (
|
||||
<Grid
|
||||
xs={12}
|
||||
className={`${classes.advancedContent} ${
|
||||
advancedOpen ? "open" : ""
|
||||
}`}
|
||||
>
|
||||
{advancedContent}
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
{children}
|
||||
</Grid>
|
||||
@@ -236,4 +137,4 @@ const TestWrapper = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(TestWrapper);
|
||||
export default TestWrapper;
|
||||
|
||||
@@ -14,13 +14,11 @@
|
||||
// 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 {
|
||||
ICloseEvent,
|
||||
IMessageEvent,
|
||||
w3cwebsocket as W3CWebSocket,
|
||||
} from "websocket";
|
||||
import { AppState, useAppDispatch } from "../../../store";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Box, Button, Grid, HelpBox, InfoIcon, Loader, PageLayout } from "mds";
|
||||
@@ -31,71 +29,25 @@ import {
|
||||
HealthInfoMessage,
|
||||
ReportMessage,
|
||||
} from "./types";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { AppState, useAppDispatch } from "../../../store";
|
||||
import {
|
||||
WSCloseAbnormalClosure,
|
||||
WSCloseInternalServerErr,
|
||||
WSClosePolicyViolation,
|
||||
wsProtocol,
|
||||
} from "../../../utils/wsUtils";
|
||||
import {
|
||||
actionsTray,
|
||||
containerForHeader,
|
||||
} from "../Common/FormComponents/common/styleLibrary";
|
||||
|
||||
import TestWrapper from "../Common/TestWrapper/TestWrapper";
|
||||
import { setHelpName, setServerDiagStat } from "../../../systemSlice";
|
||||
import {
|
||||
healthInfoMessageReceived,
|
||||
healthInfoResetMessage,
|
||||
} from "./healthInfoSlice";
|
||||
import { registeredCluster } from "../../../config";
|
||||
import TestWrapper from "../Common/TestWrapper/TestWrapper";
|
||||
import RegisterCluster from "../Support/RegisterCluster";
|
||||
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
|
||||
import { registeredCluster } from "../../../config";
|
||||
import HelpMenu from "../HelpMenu";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
loading: {
|
||||
paddingTop: 8,
|
||||
paddingLeft: 40,
|
||||
},
|
||||
buttons: {
|
||||
justifyContent: "flex-start",
|
||||
gap: 20,
|
||||
},
|
||||
localMessage: {
|
||||
fontSize: 24,
|
||||
color: "#07193E",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
progressResult: {
|
||||
textAlign: "center",
|
||||
marginBottom: 25,
|
||||
},
|
||||
startDiagnostic: {
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
margin: 25,
|
||||
marginBottom: 0,
|
||||
},
|
||||
startDiagnosticCenter: {
|
||||
textAlign: "center",
|
||||
marginTop: 0,
|
||||
},
|
||||
...actionsTray,
|
||||
...containerForHeader,
|
||||
});
|
||||
|
||||
interface IHealthInfo {
|
||||
classes: any;
|
||||
}
|
||||
|
||||
const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
const HealthInfo = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -266,21 +218,35 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
|
||||
<PageLayout>
|
||||
{!clusterRegistered && <RegisterCluster compactMode />}
|
||||
<Grid item xs={12} className={classes.boxy}>
|
||||
<TestWrapper title={title} advancedVisible={false}>
|
||||
<Grid container className={classes.buttons}>
|
||||
<Box withBorders>
|
||||
<TestWrapper title={title}>
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
gap: 20,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
key="start-download"
|
||||
item
|
||||
xs={12}
|
||||
className={classes.progressResult}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
marginBottom: 25,
|
||||
}}
|
||||
>
|
||||
<div className={classes.localMessage}>{localMessage}</div>
|
||||
<div className={classes.progressResult}>
|
||||
<h2>{localMessage}</h2>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
marginBottom: 25,
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{subnetResponse !== "" &&
|
||||
!subnetResponse.toLowerCase().includes("error") && (
|
||||
<Grid item xs={12} className={classes.serversData}>
|
||||
<Grid item xs={12}>
|
||||
<strong>
|
||||
Health report uploaded to Subnet successfully!
|
||||
</strong>
|
||||
@@ -294,7 +260,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
{(subnetResponse === "" ||
|
||||
subnetResponse.toLowerCase().includes("error")) &&
|
||||
serverDiagnosticStatus === DiagStatSuccess && (
|
||||
<Grid item xs={12} className={classes.serversData}>
|
||||
<Grid item xs={12}>
|
||||
<strong>
|
||||
Something went wrong uploading your Health report to
|
||||
Subnet.
|
||||
@@ -307,11 +273,16 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
</strong>
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
{serverDiagnosticStatus === DiagStatInProgress ? (
|
||||
<div className={classes.loading}>
|
||||
<Box
|
||||
sx={{
|
||||
paddingTop: 8,
|
||||
paddingLeft: 40,
|
||||
}}
|
||||
>
|
||||
<Loader style={{ width: 25, height: 25 }} />
|
||||
</div>
|
||||
</Box>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Box
|
||||
@@ -353,7 +324,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TestWrapper>
|
||||
</Grid>
|
||||
</Box>
|
||||
{!startDiagnostic && clusterRegistered && (
|
||||
<Fragment>
|
||||
<br />
|
||||
@@ -373,4 +344,4 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(HealthInfo);
|
||||
export default HealthInfo;
|
||||
|
||||
@@ -15,8 +15,16 @@
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Fragment, useEffect, useState } from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import { Button, CallHomeMenuIcon, HelpBox, Loader, PageLayout } from "mds";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
CallHomeMenuIcon,
|
||||
FormLayout,
|
||||
HelpBox,
|
||||
Loader,
|
||||
PageLayout,
|
||||
Switch,
|
||||
} from "mds";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import api from "../../../common/api";
|
||||
import { ErrorResponseHandler } from "../../../common/types";
|
||||
@@ -26,21 +34,9 @@ import { ICallHomeResponse } from "./types";
|
||||
import { registeredCluster } from "../../../config";
|
||||
import CallHomeConfirmation from "./CallHomeConfirmation";
|
||||
import RegisterCluster from "./RegisterCluster";
|
||||
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
|
||||
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
|
||||
import HelpMenu from "../HelpMenu";
|
||||
|
||||
const PromoLabels = ({ title, text }: { title: string; text: string }) => {
|
||||
return (
|
||||
<div style={{ marginTop: 15 }}>
|
||||
<div style={{ marginBottom: 10, fontWeight: "bold" }}>{title}</div>
|
||||
<div style={{ color: "#969696", fontSize: 12, marginBottom: 40 }}>
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CallHome = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
@@ -124,175 +120,13 @@ const CallHome = () => {
|
||||
<PageHeaderWrapper label="Call Home" actions={<HelpMenu />} />
|
||||
<PageLayout>
|
||||
{!clusterRegistered && <RegisterCluster compactMode />}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "flex-start",
|
||||
border: "1px solid #eaeaea",
|
||||
padding: {
|
||||
lg: "40px",
|
||||
xs: "15px",
|
||||
},
|
||||
flexWrap: "wrap",
|
||||
gap: {
|
||||
lg: "55px",
|
||||
xs: "20px",
|
||||
},
|
||||
height: {
|
||||
md: "calc(100vh - 120px)",
|
||||
xs: "100%",
|
||||
},
|
||||
flexFlow: {
|
||||
lg: "row",
|
||||
xs: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
flex: {
|
||||
md: 2,
|
||||
xs: 1,
|
||||
},
|
||||
width: {
|
||||
lg: "auto",
|
||||
xs: "100%",
|
||||
},
|
||||
padding: {
|
||||
lg: "40px",
|
||||
xs: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<span style={{ marginLeft: 5 }}>
|
||||
<Loader style={{ width: 16, height: 16 }} />
|
||||
</span>
|
||||
) : (
|
||||
<Fragment>
|
||||
<div style={{ marginBottom: 25 }}>
|
||||
<FormSwitchWrapper
|
||||
value="enableDiag"
|
||||
id="enableDiag"
|
||||
name="enableDiag"
|
||||
checked={diagEnabled}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDiagEnabled(event.target.checked);
|
||||
}}
|
||||
label={"Daily Health Report"}
|
||||
disabled={!clusterRegistered}
|
||||
/>
|
||||
<PromoLabels
|
||||
title={"When you enable diagnostics"}
|
||||
text={
|
||||
"Daily Health Report enables you to proactively identify potential issues in your deployment before they escalate."
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormSwitchWrapper
|
||||
value="enableLogs"
|
||||
id="enableLogs"
|
||||
name="enableLogs"
|
||||
checked={logsEnabled}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLogsEnabled(event.target.checked);
|
||||
}}
|
||||
label={"Live Error Logs"}
|
||||
disabled={!clusterRegistered}
|
||||
/>
|
||||
<PromoLabels
|
||||
title={"When you enable logs"}
|
||||
text={
|
||||
"Live Error Logs will enable MinIO's support team and automatic diagnostics system to catch failures early."
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "55px",
|
||||
gap: "0px 10px",
|
||||
}}
|
||||
>
|
||||
{(oDiagEnabled || oLogsEnabled) && (
|
||||
<Button
|
||||
id={"callhome-action"}
|
||||
variant={"secondary"}
|
||||
data-test-id="call-home-toggle-button"
|
||||
onClick={disableCallHomeAction}
|
||||
disabled={loading}
|
||||
>
|
||||
Disable Call Home
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
id={"callhome-action"}
|
||||
type="button"
|
||||
variant={mainVariant}
|
||||
data-test-id="call-home-toggle-button"
|
||||
onClick={confirmCallHomeAction}
|
||||
disabled={loading}
|
||||
>
|
||||
Save Configuration
|
||||
</Button>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: {
|
||||
md: "365px",
|
||||
xs: "100%",
|
||||
},
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<FormLayout
|
||||
helpBox={
|
||||
<HelpBox
|
||||
title={""}
|
||||
iconComponent={null}
|
||||
title={"Learn more about Call Home"}
|
||||
iconComponent={<CallHomeMenuIcon />}
|
||||
help={
|
||||
<Fragment>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "-25px",
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
padding: "2px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#07193E",
|
||||
height: "15px",
|
||||
width: "15px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "50%",
|
||||
marginRight: "18px",
|
||||
padding: "3px",
|
||||
"& .min-icon": {
|
||||
height: "11px",
|
||||
width: "11px",
|
||||
fill: "#ffffff",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CallHomeMenuIcon />
|
||||
</Box>
|
||||
Learn more about Call Home
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@@ -322,8 +156,76 @@ const CallHome = () => {
|
||||
</Fragment>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{loading ? (
|
||||
<span style={{ marginLeft: 5 }}>
|
||||
<Loader style={{ width: 16, height: 16 }} />
|
||||
</span>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Switch
|
||||
value="enableDiag"
|
||||
id="enableDiag"
|
||||
name="enableDiag"
|
||||
checked={diagEnabled}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDiagEnabled(event.target.checked);
|
||||
}}
|
||||
label={"Daily Health Report"}
|
||||
disabled={!clusterRegistered}
|
||||
description={
|
||||
"Daily Health Report enables you to proactively identify potential issues in your deployment before they escalate."
|
||||
}
|
||||
/>
|
||||
<Switch
|
||||
value="enableLogs"
|
||||
id="enableLogs"
|
||||
name="enableLogs"
|
||||
checked={logsEnabled}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLogsEnabled(event.target.checked);
|
||||
}}
|
||||
label={"Live Error Logs"}
|
||||
disabled={!clusterRegistered}
|
||||
description={
|
||||
"Live Error Logs will enable MinIO's support team and automatic diagnostics system to catch failures early."
|
||||
}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "55px",
|
||||
gap: "0px 10px",
|
||||
}}
|
||||
>
|
||||
{(oDiagEnabled || oLogsEnabled) && (
|
||||
<Button
|
||||
id={"callhome-action"}
|
||||
variant={"secondary"}
|
||||
data-test-id="call-home-toggle-button"
|
||||
onClick={disableCallHomeAction}
|
||||
disabled={loading}
|
||||
>
|
||||
Disable Call Home
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
id={"callhome-action"}
|
||||
type="button"
|
||||
variant={mainVariant}
|
||||
data-test-id="call-home-toggle-button"
|
||||
onClick={confirmCallHomeAction}
|
||||
disabled={loading}
|
||||
>
|
||||
Save Configuration
|
||||
</Button>
|
||||
</Box>
|
||||
</Fragment>
|
||||
)}
|
||||
</FormLayout>
|
||||
</PageLayout>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
@@ -1,67 +1,34 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// 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 { Grid } from "@mui/material";
|
||||
import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
|
||||
import { Button, PageLayout, FormLayout, Box, Checkbox, InputLabel } from "mds";
|
||||
import { wsProtocol } from "../../../utils/wsUtils";
|
||||
import {
|
||||
actionsTray,
|
||||
containerForHeader,
|
||||
inlineCheckboxes,
|
||||
} from "../Common/FormComponents/common/styleLibrary";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import RegisterCluster from "./RegisterCluster";
|
||||
import { registeredCluster } from "../../../config";
|
||||
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
|
||||
import HelpMenu from "../HelpMenu";
|
||||
import { useAppDispatch } from "../../../store";
|
||||
import { setHelpName } from "../../../systemSlice";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
buttonContainer: {
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 24,
|
||||
"& button": {
|
||||
marginLeft: 8,
|
||||
},
|
||||
},
|
||||
dropdown: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
checkboxLabel: {
|
||||
marginTop: 12,
|
||||
marginRight: 4,
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
},
|
||||
checkboxDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
inlineCheckboxes: {
|
||||
...inlineCheckboxes.inlineCheckboxes,
|
||||
alignItems: "center",
|
||||
|
||||
"@media (max-width: 900px)": {
|
||||
flexFlow: "column",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
},
|
||||
...actionsTray,
|
||||
...containerForHeader,
|
||||
});
|
||||
|
||||
interface IProfileProps {
|
||||
classes: any;
|
||||
}
|
||||
import RegisterCluster from "./RegisterCluster";
|
||||
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
|
||||
import HelpMenu from "../HelpMenu";
|
||||
|
||||
var c: any = null;
|
||||
|
||||
const Profile = ({ classes }: IProfileProps) => {
|
||||
const Profile = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [profilingStarted, setProfilingStarted] = useState<boolean>(false);
|
||||
@@ -150,34 +117,39 @@ const Profile = ({ classes }: IProfileProps) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<PageHeaderWrapper label="Profile" actions={<HelpMenu />} />
|
||||
|
||||
<PageLayout>
|
||||
{!clusterRegistered && <RegisterCluster compactMode />}
|
||||
<Grid item xs={12} className={classes.boxy}>
|
||||
<Grid item xs={12} className={classes.dropdown}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className={`${classes.inlineCheckboxes} ${
|
||||
profilingStarted && classes.checkboxDisabled
|
||||
}`}
|
||||
>
|
||||
<div className={classes.checkboxLabel}>Types to profile:</div>
|
||||
{typesList.map((t) => (
|
||||
<CheckboxWrapper
|
||||
checked={types.indexOf(t.value) > -1}
|
||||
disabled={profilingStarted}
|
||||
key={`checkbox-${t.label}`}
|
||||
id={`checkbox-${t.label}`}
|
||||
label={t.label}
|
||||
name={`checkbox-${t.label}`}
|
||||
onChange={onCheckboxClick}
|
||||
value={t.value}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.buttonContainer}>
|
||||
<FormLayout>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: 10,
|
||||
"& div": { width: "initial" },
|
||||
"& .inputItem:not(:last-of-type)": { marginBottom: 0 },
|
||||
}}
|
||||
>
|
||||
<InputLabel noMinWidth>Types to profile:</InputLabel>
|
||||
{typesList.map((t) => (
|
||||
<Checkbox
|
||||
checked={types.indexOf(t.value) > -1}
|
||||
disabled={profilingStarted}
|
||||
key={`checkbox-${t.label}`}
|
||||
id={`checkbox-${t.label}`}
|
||||
label={t.label}
|
||||
name={`checkbox-${t.label}`}
|
||||
onChange={onCheckboxClick}
|
||||
value={t.value}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 24,
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
id={"start-profiling"}
|
||||
type="submit"
|
||||
@@ -203,11 +175,11 @@ const Profile = ({ classes }: IProfileProps) => {
|
||||
}}
|
||||
label={"Stop Profiling"}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</FormLayout>
|
||||
</PageLayout>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(Profile);
|
||||
export default Profile;
|
||||
|
||||
@@ -65,7 +65,7 @@ const RegisterCluster = ({ compactMode = false }: IRegisterCluster) => {
|
||||
</div>
|
||||
}
|
||||
iconComponent={<WarnIcon />}
|
||||
help={<Fragment />}
|
||||
help={null}
|
||||
/>
|
||||
</Grid>
|
||||
<br />
|
||||
|
||||
@@ -15,25 +15,19 @@
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Fragment, useEffect, useState } from "react";
|
||||
import { Box, DialogContentText } from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
breakPoints,
|
||||
Button,
|
||||
FormLayout,
|
||||
HelpBox,
|
||||
InputBox,
|
||||
InspectMenuIcon,
|
||||
PageLayout,
|
||||
PasswordKeyIcon,
|
||||
Switch,
|
||||
} from "mds";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
|
||||
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
|
||||
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import {
|
||||
deleteDialogStyles,
|
||||
modalStyleUtils,
|
||||
} from "../Common/FormComponents/common/styleLibrary";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { useSelector } from "react-redux";
|
||||
import {
|
||||
deleteCookie,
|
||||
@@ -41,28 +35,20 @@ import {
|
||||
getCookieValue,
|
||||
performDownload,
|
||||
} from "../../../common/utils";
|
||||
import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
|
||||
import KeyRevealer from "./KeyRevealer";
|
||||
import {
|
||||
selDistSet,
|
||||
setErrorSnackMessage,
|
||||
setHelpName,
|
||||
} from "../../../systemSlice";
|
||||
import { useAppDispatch } from "../../../store";
|
||||
import RegisterCluster from "../Support/RegisterCluster";
|
||||
import { registeredCluster } from "../../../config";
|
||||
import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
|
||||
import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
|
||||
import KeyRevealer from "./KeyRevealer";
|
||||
import RegisterCluster from "../Support/RegisterCluster";
|
||||
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
|
||||
import HelpMenu from "../HelpMenu";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
switchLabel: {
|
||||
fontWeight: "normal",
|
||||
},
|
||||
...deleteDialogStyles,
|
||||
...modalStyleUtils,
|
||||
});
|
||||
|
||||
const ExampleBlock = ({
|
||||
volumeVal,
|
||||
pathVal,
|
||||
@@ -77,9 +63,9 @@ const ExampleBlock = ({
|
||||
sx={{
|
||||
display: "flex",
|
||||
marginBottom: "5px",
|
||||
flexFlow: {
|
||||
sm: "row",
|
||||
xs: "column",
|
||||
flexFlow: "row",
|
||||
[`@media (max-width: ${breakPoints.sm}px)`]: {
|
||||
flexFlow: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -88,9 +74,9 @@ const ExampleBlock = ({
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexFlow: {
|
||||
sm: "row",
|
||||
xs: "column",
|
||||
flexFlow: "row",
|
||||
[`@media (max-width: ${breakPoints.sm}px)`]: {
|
||||
flexFlow: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -102,7 +88,7 @@ const ExampleBlock = ({
|
||||
);
|
||||
};
|
||||
|
||||
const Inspect = ({ classes }: { classes: any }) => {
|
||||
const Inspect = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate();
|
||||
const distributedSetup = useSelector(selDistSet);
|
||||
@@ -218,200 +204,13 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
entity={"Inspect"}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "flex-start",
|
||||
border: "1px solid #eaeaea",
|
||||
padding: {
|
||||
lg: "40px",
|
||||
xs: "15px",
|
||||
},
|
||||
flexWrap: "wrap",
|
||||
gap: {
|
||||
lg: "55px",
|
||||
xs: "20px",
|
||||
},
|
||||
height: {
|
||||
md: "calc(100vh - 120px)",
|
||||
xs: "100%",
|
||||
},
|
||||
flexFlow: {
|
||||
lg: "row",
|
||||
xs: "column",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #eaeaea",
|
||||
flex: {
|
||||
md: 2,
|
||||
xs: 1,
|
||||
},
|
||||
width: {
|
||||
lg: "auto",
|
||||
xs: "100%",
|
||||
},
|
||||
padding: {
|
||||
lg: "40px",
|
||||
xs: "15px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<form
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (!clusterRegistered) {
|
||||
navigate("/support/register");
|
||||
return;
|
||||
}
|
||||
performInspect();
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<InputBoxWrapper
|
||||
id="inspect_volume"
|
||||
name="inspect_volume"
|
||||
extraInputProps={{
|
||||
"data-test-id": "inspect_volume",
|
||||
}}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setVolumeName(e.target.value);
|
||||
}}
|
||||
label="Volume or Bucket Name"
|
||||
value={volumeName}
|
||||
error={volumeError}
|
||||
required
|
||||
placeholder={"test-bucket"}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
>
|
||||
<InputBoxWrapper
|
||||
id="inspect_path"
|
||||
name="inspect_path"
|
||||
extraInputProps={{
|
||||
"data-test-id": "inspect_path",
|
||||
}}
|
||||
error={pathError}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInspectPath(e.target.value);
|
||||
}}
|
||||
label="File or Path to inspect"
|
||||
value={inspectPath}
|
||||
required
|
||||
placeholder={"test*/xl.meta"}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "25px",
|
||||
}}
|
||||
>
|
||||
<FormSwitchWrapper
|
||||
classes={{
|
||||
inputLabel: classes.switchLabel,
|
||||
}}
|
||||
extraInputProps={{
|
||||
"data-test-id": "inspect_encrypt",
|
||||
}}
|
||||
label="Encrypt"
|
||||
indicatorLabels={["True", "False"]}
|
||||
checked={isEncrypt}
|
||||
value={"true"}
|
||||
id="inspect_encrypt"
|
||||
name="inspect_encrypt"
|
||||
onChange={(e) => {
|
||||
setIsEncrypt(!isEncrypt);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "55px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
id={"inspect-clear-button"}
|
||||
style={{
|
||||
marginRight: "15px",
|
||||
}}
|
||||
type="button"
|
||||
variant="regular"
|
||||
data-test-id="inspect-clear-button"
|
||||
onClick={resetForm}
|
||||
label={"Clear"}
|
||||
/>
|
||||
<Button
|
||||
id={"inspect-start"}
|
||||
type="submit"
|
||||
variant={!clusterRegistered ? "regular" : "callAction"}
|
||||
data-test-id="inspect-submit-button"
|
||||
disabled={!isFormValid}
|
||||
label={"Inspect"}
|
||||
/>
|
||||
</Box>
|
||||
</form>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: {
|
||||
md: "365px",
|
||||
xs: "100%",
|
||||
},
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<FormLayout
|
||||
helpBox={
|
||||
<HelpBox
|
||||
title={""}
|
||||
iconComponent={null}
|
||||
title={"Learn more about the Inspect feature"}
|
||||
iconComponent={<InspectMenuIcon />}
|
||||
help={
|
||||
<Fragment>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "-25px",
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
padding: "2px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#07193E",
|
||||
height: "15px",
|
||||
width: "15px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "50%",
|
||||
marginRight: "18px",
|
||||
padding: "3px",
|
||||
"& .min-icon": {
|
||||
height: "11px",
|
||||
width: "11px",
|
||||
fill: "#ffffff",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<InspectMenuIcon />
|
||||
</Box>
|
||||
Learn more about the Inspect feature
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "16px",
|
||||
@@ -429,16 +228,6 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
flexFlow: "column",
|
||||
fontSize: "14px",
|
||||
flex: "2",
|
||||
"& .step-number": {
|
||||
color: "#ffffff",
|
||||
height: "25px",
|
||||
width: "25px",
|
||||
background: "#081C42",
|
||||
marginRight: "10px",
|
||||
textAlign: "center",
|
||||
fontWeight: 600,
|
||||
borderRadius: "50%",
|
||||
},
|
||||
|
||||
"& .step-row": {
|
||||
fontSize: "14px",
|
||||
@@ -472,19 +261,16 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
|
||||
"& .example-code-block label": {
|
||||
display: "inline-block",
|
||||
width: {
|
||||
sm: "160px",
|
||||
xs: "100%",
|
||||
},
|
||||
width: 160,
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
fontSize: 14,
|
||||
[`@media (max-width: ${breakPoints.sm}px)`]: {
|
||||
width: "100%",
|
||||
},
|
||||
},
|
||||
|
||||
"& code": {
|
||||
width: {
|
||||
sm: "100px",
|
||||
xs: "100%",
|
||||
},
|
||||
width: 100,
|
||||
paddingLeft: "10px",
|
||||
fontFamily: "monospace",
|
||||
paddingRight: "10px",
|
||||
@@ -493,8 +279,10 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
borderRadius: "2px",
|
||||
border: "1px solid #eaeaea",
|
||||
fontSize: "10px",
|
||||
color: "#082146",
|
||||
fontWeight: 500,
|
||||
[`@media (max-width: ${breakPoints.sm}px)`]: {
|
||||
width: "100%",
|
||||
},
|
||||
},
|
||||
"& .spacer": {
|
||||
marginBottom: "5px",
|
||||
@@ -564,8 +352,85 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
</Fragment>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<form
|
||||
noValidate
|
||||
autoComplete="off"
|
||||
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (!clusterRegistered) {
|
||||
navigate("/support/register");
|
||||
return;
|
||||
}
|
||||
performInspect();
|
||||
}}
|
||||
>
|
||||
<InputBox
|
||||
id="inspect_volume"
|
||||
name="inspect_volume"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setVolumeName(e.target.value);
|
||||
}}
|
||||
label="Volume or Bucket Name"
|
||||
value={volumeName}
|
||||
error={volumeError}
|
||||
required
|
||||
placeholder={"test-bucket"}
|
||||
/>
|
||||
<InputBox
|
||||
id="inspect_path"
|
||||
name="inspect_path"
|
||||
error={pathError}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInspectPath(e.target.value);
|
||||
}}
|
||||
label="File or Path to inspect"
|
||||
value={inspectPath}
|
||||
required
|
||||
placeholder={"test*/xl.meta"}
|
||||
/>
|
||||
<Switch
|
||||
label="Encrypt"
|
||||
indicatorLabels={["True", "False"]}
|
||||
checked={isEncrypt}
|
||||
value={"true"}
|
||||
id="inspect_encrypt"
|
||||
name="inspect_encrypt"
|
||||
onChange={() => {
|
||||
setIsEncrypt(!isEncrypt);
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
marginTop: "55px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
id={"inspect-clear-button"}
|
||||
style={{
|
||||
marginRight: "15px",
|
||||
}}
|
||||
type="button"
|
||||
variant="regular"
|
||||
data-test-id="inspect-clear-button"
|
||||
onClick={resetForm}
|
||||
label={"Clear"}
|
||||
/>
|
||||
<Button
|
||||
id={"inspect-start"}
|
||||
type="submit"
|
||||
variant={!clusterRegistered ? "regular" : "callAction"}
|
||||
data-test-id="inspect-submit-button"
|
||||
disabled={!isFormValid}
|
||||
label={"Inspect"}
|
||||
/>
|
||||
</Box>
|
||||
</form>
|
||||
</FormLayout>
|
||||
)}
|
||||
{decryptionKey ? (
|
||||
<ModalWrapper
|
||||
@@ -574,7 +439,7 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
onClose={onCloseDecKeyModal}
|
||||
titleIcon={<PasswordKeyIcon />}
|
||||
>
|
||||
<DialogContentText component="div">
|
||||
<Fragment>
|
||||
<Box>
|
||||
This will be displayed only once. It cannot be recovered.
|
||||
<br />
|
||||
@@ -588,7 +453,7 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
>
|
||||
<KeyRevealer value={decryptionKey} />
|
||||
</form>
|
||||
</DialogContentText>
|
||||
</Fragment>
|
||||
</ModalWrapper>
|
||||
) : null}
|
||||
</PageLayout>
|
||||
@@ -596,4 +461,4 @@ const Inspect = ({ classes }: { classes: any }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withStyles(styles)(Inspect);
|
||||
export default Inspect;
|
||||
|
||||
@@ -52,15 +52,15 @@ export const inspectEl = Selector(".MuiPaper-root")
|
||||
.find("ul")
|
||||
.child("#inspect");
|
||||
|
||||
export const inspect_volume_input = Selector('[data-test-id="inspect_volume"]');
|
||||
export const inspect_path_input = Selector('[data-test-id="inspect_path"]');
|
||||
export const inspect_volume_input = Selector("#inspect_volume");
|
||||
export const inspect_path_input = Selector("#inspect_path");
|
||||
|
||||
export const inspect_volume_input_err = Selector("#inspect_volume-helper-text");
|
||||
export const inspect_path_input_err = Selector("#inspect_path-helper-text");
|
||||
export const inspect_volume_input_err =
|
||||
Selector("#inspect_volume").sibling("div.errorText");
|
||||
export const inspect_path_input_err =
|
||||
Selector("#inspect_path").sibling("div.errorText");
|
||||
|
||||
export const inspect_encrypt_input = Selector(
|
||||
'[data-test-id="inspect_encrypt"]',
|
||||
);
|
||||
export const inspect_encrypt_input = Selector("#inspect_encrypt");
|
||||
export const inspect_form_clear_btn = Selector(
|
||||
'[data-test-id="inspect-clear-button"]',
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user