mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced CircularProgress component with new Loader (#1690)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-03-10 15:18:22 -07:00
committed by GitHub
parent e01d8bc10e
commit 5e4ad55bbd
29 changed files with 223 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
portal-ui/src/common/LoadingComponent.tsx
View File

@@ -15,7 +15,8 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { CircularProgress, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import Loader from "../screens/Console/Common/Loader/Loader";
const LoadingComponent = () => {
return (
@@ -28,7 +29,7 @@ const LoadingComponent = () => {
style={{ minHeight: "100vh" }}
>
<Grid item xs={3} style={{ textAlign: "center" }}>
<CircularProgress />
<Loader style={{ width: 35, height: 35 }} />
<br />
Loading...
</Grid>

5
portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
View File

@@ -16,7 +16,7 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Button, LinearProgress, CircularProgress } from "@mui/material";
import { Button, LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -36,6 +36,7 @@ import api from "../../../../common/api";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import Loader from "../../Common/Loader/Loader";
const styles = (theme: Theme) =>
createStyles({
@@ -124,7 +125,7 @@ const SetRetentionConfig = ({
}}
>
{loadingForm ? (
<CircularProgress color="primary" size={16} variant="indeterminate" />
<Loader style={{ width: 16, height: 16 }} />
) : (
<form
noValidate

9
portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
View File

@@ -15,7 +15,8 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Button, CircularProgress } from "@mui/material";
import { Button } from "@mui/material";
import Loader from "../../../Common/Loader/Loader";
type ActionLinkProps = {
isLoading: boolean;
@@ -54,11 +55,7 @@ const ActionLink = ({
disableFocusRipple
{...restProps}
>
{isLoading ? (
<CircularProgress color="primary" size={16} variant="indeterminate" />
) : (
label
)}
{isLoading ? <Loader style={{ width: 16, height: 16 }} /> : label}
</Button>
);
};

7
portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
View File

@@ -17,7 +17,7 @@ import React, { useEffect, useState } from "react";
import { Bucket } from "../../../Watch/types";
import { ErrorResponseHandler } from "../../../../../common/types";
import useApi from "../../../Common/Hooks/useApi";
import { Box, CircularProgress } from "@mui/material";
import { Box } from "@mui/material";
import { IAM_SCOPES } from "../../../../../common/SecureComponent/permissions";
import { SecureComponent } from "../../../../../common/SecureComponent";
import get from "lodash/get";
@@ -25,6 +25,7 @@ import Chip from "@mui/material/Chip";
import CloseIcon from "@mui/icons-material/Close";
import AddIcon from "@mui/icons-material/Add";
import withSuspense from "../../../Common/Components/withSuspense";
import Loader from "../../../Common/Loader/Loader";
const AddBucketTagModal = withSuspense(
React.lazy(() => import("../AddBucketTagModal"))
@@ -89,9 +90,7 @@ const BucketTags = ({ setErrorSnackMessage, bucketName }: BucketTagProps) => {
return (
<Box>
{isLoading ? (
<CircularProgress color="primary" size={16} variant="indeterminate" />
) : null}
{isLoading ? <Loader style={{ width: 16, height: 16 }} /> : null}
<SecureComponent
scopes={[IAM_SCOPES.S3_GET_BUCKET_TAGGING]}
resource={bucketName}

26
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
View File

@@ -80,18 +80,6 @@ import InspectObject from "./InspectObject";
const styles = () =>
createStyles({
tag: {
marginRight: 6,
fontSize: 10,
fontWeight: 700,
"&.MuiChip-sizeSmall": {
height: 18,
},
"& .min-icon": {
height: 10,
width: 10,
},
},
ObjectDetailsTitle: {
display: "flex",
alignItems: "center",
@@ -117,20 +105,6 @@ const styles = () =>
capitalizeFirst: {
textTransform: "capitalize",
},
"@global": {
".progressDetails": {
paddingTop: 3,
display: "inline-block",
position: "relative",
width: 18,
height: 18,
},
".progressDetails > .MuiCircularProgress-root": {
position: "absolute",
left: 0,
top: 3,
},
},
...buttonsStyles,
...actionsTray,
...spacingUtils,

2
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/types.tsx
View File

@@ -21,7 +21,7 @@ export interface BucketObject {
last_modified: Date;
content_type: string;
version_id: string;
delete_flag?:boolean;
delete_flag?: boolean;
}
export interface BucketObjectsList {

55
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
View File

@@ -60,65 +60,10 @@ import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/Selec
const styles = (theme: Theme) =>
createStyles({
propertiesIcon: {
marginLeft: 5,
"& .min-icon": {
height: 12,
},
},
tag: {
marginRight: 6,
fontSize: 10,
fontWeight: 700,
"&.MuiChip-sizeSmall": {
height: 18,
},
"& .min-icon": {
height: 10,
width: 10,
},
},
search: {
marginBottom: 8,
"&.MuiFormControl-root": {
marginRight: 0,
},
},
capitalizeFirst: {
textTransform: "capitalize",
"& .min-icon": {
width: 16,
height: 16,
},
},
titleCol: {
width: "25%",
},
titleItem: {
width: "35%",
},
versionsContainer: {
border: "#EAEDEE 1px solid",
padding: 10,
},
"@global": {
".progressDetails": {
paddingTop: 3,
display: "inline-block",
position: "relative",
width: 18,
height: 18,
},
".progressDetails > .MuiCircularProgress-root": {
position: "absolute",
left: 0,
top: 3,
},
},
tabsContainer: {
border: "1px solid #eaeaea",
borderTop: 0,
},
noBottomBorder: {
borderBottom: 0,
},

2
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -384,7 +384,7 @@ export const objectBrowserCommon = {
},
},
additionalOptions: {
paddingRight: "10px"
paddingRight: "10px",
},
smallLabel: {
color: "#9C9C9C",

15
portal-ui/src/screens/Console/Common/IconsScreen.tsx
View File

@@ -33,7 +33,6 @@ import * as cicons from "../../../icons";
import * as micons from "../../../icons/SidebarMenus";
import Loader from "./Loader/Loader";
interface IIconsScreenSimple {
classes: any;
}
@@ -47,7 +46,7 @@ const styles = (theme: Theme) =>
"& .min-loader": {
width: 45,
height: 45,
}
},
},
def: {},
red: {
@@ -106,12 +105,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
</Grid>
<h1>Loaders</h1>
<Grid
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
container
spacing={4}
textAlign={"center"}
className={clsx(classes.root, {
[classes.red]: color === "red",
})}
>
<Grid item xs={3}>
<Loader />

231
portal-ui/src/screens/Console/Common/Loader/loader.styles.css
View File

@@ -1,300 +1,363 @@
.min-loader {
width: 40px;
height: 40px;
}
#eB8dk2fHKWC2_tr {
animation: eB8dk2fHKWC2_tr__tr 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC2_tr__tr 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC2_tr__tr {
0% {
transform: translate(139.785027px, 140.086989px) rotate(45.236493deg);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
10% {
transform: translate(139.785027px, 140.086989px) rotate(-197.740907deg);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
20% {
transform: translate(139.785027px, 140.086989px) rotate(-108.6deg);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
30% {
transform: translate(139.785027px, 140.086989px) rotate(-17.484014deg);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
33.333333% {
transform: translate(139.785027px, 140.086989px) rotate(-17.48deg);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
43.333333% {
transform: translate(139.785027px, 140.086989px) rotate(160.887995deg)
transform: translate(139.785027px, 140.086989px) rotate(160.887995deg);
}
100% {
transform: translate(139.785027px, 140.086989px) rotate(160.887995deg)
transform: translate(139.785027px, 140.086989px) rotate(160.887995deg);
}
}
#eB8dk2fHKWC2_ts {
animation: eB8dk2fHKWC2_ts__ts 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC2_ts__ts 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC2_ts__ts {
0% {
transform: scale(1, 0.995019)
transform: scale(1, 0.995019);
}
33.333333% {
transform: scale(1, 0.995019);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
43.333333% {
transform: scale(0.101121, 0.102033);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
50% {
transform: scale(0.1, 0.1);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
60% {
transform: scale(1, 1)
transform: scale(1, 1);
}
100% {
transform: scale(1, 1)
transform: scale(1, 1);
}
}
#eB8dk2fHKWC2 {
animation: eB8dk2fHKWC2_c_o 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC2_c_o 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC2_c_o {
0% {
opacity: 1
opacity: 1;
}
6.666667% {
opacity: 1
opacity: 1;
}
10% {
opacity: 0
opacity: 0;
}
13.333333% {
opacity: 0
opacity: 0;
}
20% {
opacity: 1
opacity: 1;
}
30% {
opacity: 1
opacity: 1;
}
36.666667% {
opacity: 1
opacity: 1;
}
40% {
opacity: 0
opacity: 0;
}
100% {
opacity: 0
opacity: 0;
}
}
#eB8dk2fHKWC4 {
animation: eB8dk2fHKWC4__m 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC4__m 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC4__m {
0% {
d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
d: path(
"M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z"
);
}
10% {
d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
d: path(
"M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z"
);
}
20% {
d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
d: path(
"M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z"
);
}
30% {
d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
d: path(
"M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z"
);
}
33.333333% {
d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
d: path(
"M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z"
);
}
43.333333% {
d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')
d: path(
"M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z"
);
}
100% {
d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')
d: path(
"M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z"
);
}
}
#eB8dk2fHKWC6 {
animation: eB8dk2fHKWC6__m 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC6__m 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC6__m {
0% {
d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
d: path(
"M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z"
);
}
10% {
d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')
d: path(
"M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z"
);
}
20% {
d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')
d: path(
"M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z"
);
}
30% {
d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
d: path(
"M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z"
);
}
33.333333% {
d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
d: path(
"M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z"
);
}
43.333333% {
d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')
d: path(
"M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z"
);
}
100% {
d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')
d: path(
"M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z"
);
}
}
#eB8dk2fHKWC8 {
animation: eB8dk2fHKWC8__m 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC8__m 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC8__m {
0% {
d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
d: path(
"M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z"
);
}
10% {
d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')
d: path(
"M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z"
);
}
20% {
d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')
d: path(
"M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z"
);
}
30% {
d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
d: path(
"M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z"
);
}
33.333333% {
d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
d: path(
"M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z"
);
}
43.333333% {
d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')
d: path(
"M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z"
);
}
100% {
d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')
d: path(
"M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z"
);
}
}
#eB8dk2fHKWC10 {
animation: eB8dk2fHKWC10__m 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC10__m 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC10__m {
0% {
d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
d: path(
"M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z"
);
}
3.333333% {
d: path('M4.90273,88.748028C1.236063,104.534694,0.694614,122.375568,4.181281,138.328902C7.119767,155.82704,18.329955,178.442148,31.722495,188.944182C39.448991,194.869945,48.960631,181.919808,35.808325,167.974185C27.053341,155.46954,26.778713,144.786038,23.180834,130.168643C19.139468,114.899686,18.114526,100.786543,20.952073,87.411869C21.572437,79.045425,6.897064,77.595457,4.916661,86.915441L4.90273,88.748028Z')
d: path(
"M4.90273,88.748028C1.236063,104.534694,0.694614,122.375568,4.181281,138.328902C7.119767,155.82704,18.329955,178.442148,31.722495,188.944182C39.448991,194.869945,48.960631,181.919808,35.808325,167.974185C27.053341,155.46954,26.778713,144.786038,23.180834,130.168643C19.139468,114.899686,18.114526,100.786543,20.952073,87.411869C21.572437,79.045425,6.897064,77.595457,4.916661,86.915441L4.90273,88.748028Z"
);
}
10% {
d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')
d: path(
"M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z"
);
}
20% {
d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')
d: path(
"M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z"
);
}
30% {
d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
d: path(
"M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z"
);
}
33.333333% {
d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
d: path(
"M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z"
);
}
43.333333% {
d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')
d: path(
"M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z"
);
}
100% {
d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')
d: path(
"M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z"
);
}
}
#eB8dk2fHKWC11_ts {
animation: eB8dk2fHKWC11_ts__ts 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC11_ts__ts 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC11_ts__ts {
0% {
transform: translate(139.784999px, 140.086986px) scale(1, 1)
transform: translate(139.784999px, 140.086986px) scale(1, 1);
}
30% {
transform: translate(139.784999px, 140.086986px) scale(1, 1)
transform: translate(139.784999px, 140.086986px) scale(1, 1);
}
43.333333% {
transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813)
transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813);
}
50% {
transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813)
transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813);
}
60% {
transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075)
transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075);
}
100% {
transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075)
transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075);
}
}
#eB8dk2fHKWC11 {
animation: eB8dk2fHKWC11_c_o 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC11_c_o 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC11_c_o {
0% {
opacity: 0
opacity: 0;
}
30% {
opacity: 0
opacity: 0;
}
36.666667% {
opacity: 0
opacity: 0;
}
40% {
opacity: 1
opacity: 1;
}
100% {
opacity: 1
opacity: 1;
}
}
#eB8dk2fHKWC13_tr {
animation: eB8dk2fHKWC13_tr__tr 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC13_tr__tr 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC13_tr__tr {
0% {
transform: translate(139.785004px, 140.086979px) rotate(0deg)
transform: translate(139.785004px, 140.086979px) rotate(0deg);
}
10% {
transform: translate(139.785004px, 140.086979px) rotate(0deg)
transform: translate(139.785004px, 140.086979px) rotate(0deg);
}
20% {
transform: translate(139.785004px, 140.086979px) rotate(90.041277deg)
transform: translate(139.785004px, 140.086979px) rotate(90.041277deg);
}
100% {
transform: translate(139.785004px, 140.086979px) rotate(90.041277deg)
transform: translate(139.785004px, 140.086979px) rotate(90.041277deg);
}
}
#eB8dk2fHKWC13 {
animation: eB8dk2fHKWC13_c_o 3000ms linear infinite normal forwards
animation: eB8dk2fHKWC13_c_o 3000ms linear infinite normal forwards;
}
@keyframes eB8dk2fHKWC13_c_o {
0% {
opacity: 0
opacity: 0;
}
6.666667% {
opacity: 0
opacity: 0;
}
10% {
opacity: 1
opacity: 1;
}
13.333333% {
opacity: 1
opacity: 1;
}
20% {
opacity: 0
opacity: 0;
}
100% {
opacity: 0
opacity: 0;
}
}
}

8
portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
View File

@@ -28,7 +28,6 @@ import {
import { AutoSizer, Column, InfiniteLoader, Table } from "react-virtualized";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import CircularProgress from "@mui/material/CircularProgress";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
@@ -40,6 +39,7 @@ import {
radioIcons,
TableRowPredefStyles,
} from "../FormComponents/common/styleLibrary";
import Loader from "../Loader/Loader";
//Interfaces for table Items
@@ -394,10 +394,8 @@ const elementActions = (
if (action.showLoaderFunction(vlSend)) {
return (
<div className={"progress-enabled"}>
<CircularProgress
color="primary"
size={18}
variant="indeterminate"
<Loader
style={{width: 18, height: 18}}
key={`actions-loader-${action.type}-${index.toString()}`}
/>
</div>

5
portal-ui/src/screens/Console/Common/TestWrapper/TestWrapper.tsx
View File

@@ -18,12 +18,13 @@ import React, { Fragment, useState, useEffect } from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { CircularProgress, Grid } from "@mui/material";
import { Grid } from "@mui/material";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { DrivesIcon, VersionIcon } from "../../../../icons";
import { ServerInfo, Usage } from "../../Dashboard/types";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
import Loader from "../Loader/Loader";
interface ITestWrapper {
title: any;
@@ -210,7 +211,7 @@ const TestWrapper = ({
) : (
<Fragment>
<Grid item xs={12} className={classes.loaderAlign}>
<CircularProgress size={25} />
<Loader style={{ width: 25, height: 25 }} />
</Grid>
</Fragment>
)}

8
portal-ui/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx
View File

@@ -4,12 +4,12 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { LinearProgress, Stack } from "@mui/material";
import Grid from "@mui/material/Grid";
import CircularProgress from "@mui/material/CircularProgress";
import ErrorBlock from "../../../shared/ErrorBlock";
import { CircleIcon } from "../../../../icons";
import LabelValuePair from "./LabelValuePair";
import { ValueUnit } from "../../Tenants/ListTenants/types";
import { niceBytes } from "../../../../common/utils";
import Loader from "../Loader/Loader";
interface ISummaryUsageBar {
maxValue: number | undefined;
@@ -134,11 +134,7 @@ const SummaryUsageBar = ({
{loading && (
<div className={classes.padChart}>
<Grid item xs={12} className={classes.centerItem}>
<CircularProgress
color="primary"
size={40}
variant="indeterminate"
/>
<Loader style={{ width: 40, height: 40 }} />
</Grid>
</div>
)}

8
portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
View File

@@ -4,8 +4,8 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import CircularProgress from "@mui/material/CircularProgress";
import ErrorBlock from "../../../shared/ErrorBlock";
import Loader from "../Loader/Loader";
interface IProgressBar {
maxValue: number;
@@ -102,11 +102,7 @@ const UsageBarWrapper = ({
{loading && (
<div className={classes.padChart}>
<Grid item xs={12} className={classes.centerItem}>
<CircularProgress
color="primary"
size={40}
variant="indeterminate"
/>
<Loader />
</Grid>
</div>
)}

5
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/BarChartWidget.tsx
View File

@@ -25,7 +25,7 @@ import {
XAxis,
YAxis,
} from "recharts";
import { CircularProgress, useMediaQuery } from "@mui/material";
import { useMediaQuery } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -40,6 +40,7 @@ import { ErrorResponseHandler } from "../../../../../common/types";
import api from "../../../../../common/api";
import { openZoomPage } from "../../actions";
import { useTheme } from "@mui/styles";
import Loader from "../../../Common/Loader/Loader";
interface IBarChartWidget {
classes: any;
@@ -174,7 +175,7 @@ const BarChartWidget = ({
)}
{loading && (
<div className={classes.loadingAlign}>
<CircularProgress />
<Loader />
</div>
)}
{!loading && (

5
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx
View File

@@ -25,7 +25,7 @@ import {
XAxis,
YAxis,
} from "recharts";
import { CircularProgress, useMediaQuery } from "@mui/material";
import { useMediaQuery } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -40,6 +40,7 @@ import api from "../../../../../common/api";
import LineChartTooltip from "./tooltips/LineChartTooltip";
import { openZoomPage } from "../../actions";
import { useTheme } from "@mui/styles";
import Loader from "../../../Common/Loader/Loader";
interface ILinearGraphWidget {
classes: any;
@@ -212,7 +213,7 @@ const LinearGraphWidget = ({
zoomActivated ? classes.verticalAlignment : classes.containerElements
}
>
{loading && <CircularProgress className={classes.loadingAlign} />}
{loading && <Loader className={classes.loadingAlign} />}
{!loading && (
<React.Fragment>
<div

4
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/PieChartWidget.tsx
View File

@@ -16,7 +16,6 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { CircularProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -29,6 +28,7 @@ import { splitSizeMetric, widgetDetailsToPanel } from "../utils";
import { ErrorResponseHandler } from "../../../../../common/types";
import get from "lodash/get";
import api from "../../../../../common/api";
import Loader from "../../../Common/Loader/Loader";
interface IPieChartWidget {
classes: any;
@@ -135,7 +135,7 @@ const PieChartWidget = ({
<div className={classes.titleContainer}>{title}</div>
{loading && (
<div className={classes.loadingAlign}>
<CircularProgress />
<Loader />
</div>
)}
{!loading && (

4
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SimpleWidget.tsx
View File

@@ -19,12 +19,12 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { CircularProgress } from "@mui/material";
import api from "../../../../../common/api";
import { widgetDetailsToPanel } from "../utils";
import { IDashboardPanel } from "../types";
import { setErrorSnackMessage } from "../../../../../actions";
import { ErrorResponseHandler } from "../../../../../common/types";
import Loader from "../../../Common/Loader/Loader";
interface ISimpleWidget {
classes: any;
@@ -118,7 +118,7 @@ const SimpleWidget = ({
<Fragment>
{loading && (
<div className={classes.loadingAlign}>
<CircularProgress />
<Loader />
</div>
)}
{!loading && (

6
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
View File

@@ -25,10 +25,10 @@ import { connect } from "react-redux";
import { setErrorSnackMessage } from "../../../../../actions";
import { IDashboardPanel } from "../types";
import { widgetDetailsToPanel } from "../utils";
import { CircularProgress } from "@mui/material";
import { ErrorResponseHandler } from "../../../../../common/types";
import api from "../../../../../common/api";
import { representationNumber } from "../../../../../common/utils";
import api from "../../../../../common/api";
import Loader from "../../../Common/Loader/Loader";
interface ISingleRepWidget {
classes: any;
@@ -128,7 +128,7 @@ const SingleRepWidget = ({
<div className={classes.titleContainer}>{title}</div>
{loading && (
<div className={classes.loadingAlign}>
<CircularProgress />
<Loader />
</div>
)}
{!loading && (

8
portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx
View File

@@ -15,16 +15,16 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
import api from "../../../../../common/api";
import Loader from "../../../Common/Loader/Loader";
import { widgetCommon } from "../../../Common/FormComponents/common/styleLibrary";
import { splitSizeMetric, widgetDetailsToPanel } from "../utils";
import { IDashboardPanel } from "../types";
import { connect } from "react-redux";
import { setErrorSnackMessage } from "../../../../../actions";
import { CircularProgress } from "@mui/material";
import { ErrorResponseHandler } from "../../../../../common/types";
interface ISingleValueWidget {
@@ -124,7 +124,7 @@ const SingleValueWidget = ({
<div className={classes.containerAlignment}>
{loading && (
<div className={classes.loadingAlign}>
<CircularProgress />
<Loader />
</div>
)}
{!loading && (

4
portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
View File

@@ -44,11 +44,11 @@ import {
import { Button, Grid } from "@mui/material";
import PageHeader from "../Common/PageHeader/PageHeader";
import { setServerDiagStat, setSnackBarMessage } from "../../../actions";
import CircularProgress from "@mui/material/CircularProgress";
import TestWrapper from "../Common/TestWrapper/TestWrapper";
import PageLayout from "../Common/Layout/PageLayout";
import HelpBox from "../../../common/HelpBox";
import WarnIcon from "../../../icons/WarnIcon";
import Loader from "../Common/Loader/Loader";
const styles = (theme: Theme) =>
createStyles({
@@ -266,7 +266,7 @@ const HealthInfo = ({
<div className={classes.localMessage}>{localMessage}</div>
{serverDiagnosticStatus === DiagStatInProgress ? (
<div className={classes.loading}>
<CircularProgress size={25} />
<Loader style={{ width: 25, height: 25 }} />
</div>
) : (
<Fragment>

4
portal-ui/src/screens/Console/ObjectBrowser/actions.ts
View File

@@ -238,6 +238,6 @@ export const setSelectedVersion = (selectedVersion: string) => {
export const setShowDeletedObjects = (status: boolean) => {
return {
type: BUCKET_BROWSER_SHOW_DELETED,
status
}
status,
};
};

5
portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
View File

@@ -17,7 +17,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { connect } from "react-redux";
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
import { Button, CircularProgress, Grid } from "@mui/material";
import { Button, Grid } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -47,6 +47,7 @@ import { SecureComponent } from "../../../common/SecureComponent";
import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
import HelpBox from "../../../common/HelpBox";
import WarnIcon from "../../../icons/WarnIcon";
import Loader from "../Common/Loader/Loader";
interface ISpeedtest {
classes: any;
@@ -205,7 +206,7 @@ const Speedtest = ({ classes, distributedSetup }: ISpeedtest) => {
{start ? (
<Fragment>
Speedtest in progress...
<CircularProgress size={15} />
<Loader style={{ width: 15, height: 15 }} />
</Fragment>
) : (
<Fragment>

4
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
View File

@@ -19,7 +19,6 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { CircularProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import {
containerForHeader,
@@ -33,6 +32,7 @@ import { setTenantDetailsLoad } from "../actions";
import { ErrorResponseHandler } from "../../../../common/types";
import SubnetLicenseTenant from "./SubnetLicenseTenant";
import api from "../../../../common/api";
import Loader from "../../Common/Loader/Loader";
interface ITenantLicense {
classes: any;
@@ -102,7 +102,7 @@ const TenantLicense = ({
<h1 className={classes.sectionTitle}>License</h1>
{loadingTenant ? (
<div className={classes.loaderAlign}>
<CircularProgress />
<Loader />
</div>
) : (
<Fragment>

7
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
View File

@@ -26,7 +26,7 @@ import {
tenantDetailsStyles,
} from "../../Common/FormComponents/common/styleLibrary";
import Grid from "@mui/material/Grid";
import { CircularProgress, DialogContentText } from "@mui/material";
import { DialogContentText } from "@mui/material";
import Paper from "@mui/material/Paper";
import api from "../../../../common/api";
import { ITenant } from "../ListTenants/types";
@@ -41,6 +41,7 @@ import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import { niceBytes } from "../../../../common/utils";
import Loader from "../../Common/Loader/Loader";
interface ITenantLogs {
classes: any;
@@ -249,7 +250,7 @@ const TenantLogging = ({
{loadingTenant ? (
<tr>
<td className={classes.centerAlign} colSpan={4}>
<CircularProgress />
<Loader />
</td>
</tr>
) : (
@@ -365,7 +366,7 @@ const TenantLogging = ({
{loadingTenant ? (
<tr>
<td className={classes.centerAlign} colSpan={4}>
<CircularProgress />
<Loader />
</td>
</tr>
) : (

5
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
View File

@@ -26,7 +26,7 @@ import {
searchField,
tenantDetailsStyles,
} from "../../Common/FormComponents/common/styleLibrary";
import { CircularProgress, DialogContentText } from "@mui/material";
import { DialogContentText } from "@mui/material";
import Paper from "@mui/material/Paper";
import { ITenant } from "../ListTenants/types";
import { setErrorSnackMessage } from "../../../../actions";
@@ -41,6 +41,7 @@ import KeyPairView from "./KeyPairView";
import { niceBytes } from "../../../../common/utils";
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
import Loader from "../../Common/Loader/Loader";
interface ITenantMonitoring {
classes: any;
@@ -223,7 +224,7 @@ const TenantMonitoring = ({
{loadingTenant ? (
<tr>
<td className={classes.centerAlign} colSpan={4}>
<CircularProgress />
<Loader />
</td>
</tr>
) : (

8
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
View File

@@ -32,7 +32,6 @@ import Moment from "react-moment";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import {
Button,
CircularProgress,
DialogContentText,
Typography,
} from "@mui/material";
@@ -46,6 +45,7 @@ import { ErrorResponseHandler } from "../../../../common/types";
import { setTenantDetailsLoad } from "../actions";
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
import { AddIcon, ConfirmModalIcon } from "../../../../icons";
import Loader from "../../Common/Loader/Loader";
interface ITenantSecurity {
classes: any;
@@ -347,7 +347,7 @@ const TenantSecurity = ({
{loadingTenant ? (
<Paper className={classes.paperContainer}>
<div className={classes.loaderAlign}>
<CircularProgress />
<Loader />
</div>
</Paper>
) : (
@@ -534,7 +534,9 @@ const TenantSecurity = ({
>
{certificateInfo.domains &&
certificateInfo.domains.map((dom) => {
return <div key={`CA-domain-${dom}`}>{dom}</div>;
return (
<div key={`CA-domain-${dom}`}>{dom}</div>
);
})}
</Typography>
<Typography

5
portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
View File

@@ -19,12 +19,13 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Link } from "react-router-dom";
import { Box, CircularProgress, IconButton } from "@mui/material";
import { Box, IconButton } from "@mui/material";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import history from "./../../../../../history";
import RefreshIcon from "../../../../../icons/RefreshIcon";
import Loader from "../../../Common/Loader/Loader";
interface IHopSimple {
classes: any;
@@ -144,7 +145,7 @@ const Hop = ({ classes, match }: IHopSimple) => {
<div className={classes.divContainer}>
{loading && (
<div className={classes.loader}>
<CircularProgress />
<Loader />
</div>
)}
<iframe

6
portal-ui/src/screens/LoginPage/LoginPage.tsx
View File

@@ -17,7 +17,6 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {
CircularProgress,
InputAdornment,
LinearProgress,
TextFieldProps,
@@ -53,6 +52,7 @@ import UserFilledIcon from "../../icons/UsersFilledIcon";
import { SupportMenuIcon } from "../../icons/SidebarMenus";
import GithubIcon from "../../icons/GithubIcon";
import clsx from "clsx";
import Loader from "../Console/Common/Loader/Loader";
const styles = (theme: Theme) =>
createStyles({
@@ -205,6 +205,8 @@ const styles = (theme: Theme) =>
},
loadingLoginStrategy: {
textAlign: "center",
width: 40,
height: 40,
},
headerTitle: {
marginRight: "auto",
@@ -576,7 +578,7 @@ const Login = ({
loginComponent = (
<div className={classes.loaderAlignment}>
{loadingFetchConfiguration ? (
<CircularProgress className={classes.loadingLoginStrategy} />
<Loader className={classes.loadingLoginStrategy} />
) : (
<React.Fragment>
<div>