Skip to content

Commit

Permalink
Merge pull request meshery#13082 from SAHU-01/prometheus_migration
Browse files Browse the repository at this point in the history 
[UI] Prometheus components MUIv5 migration
  • Loading branch information
@sudhanshutech
sudhanshutech authored Jan 2, 2025
2 parents 0afbf3c + 6134d64 commit 3a71dc6
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 122 deletions.
105 changes: 63 additions & 42 deletions ui/components/telemetry/prometheus/PrometheusComponent.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { NoSsr, Typography } from '@material-ui/core';
import { NoSsr } from '@mui/material';
import { Typography, styled, Box } from '@layer5/sistent';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import dataFetch from '../../../lib/data-fetch';
Expand All @@ -16,24 +16,41 @@ import { withNotify } from '../../../utils/hooks/useNotification';
import { EVENT_TYPES } from '../../../lib/event-types';
import { CONNECTION_KINDS } from '@/utils/Enum';
import { withTelemetryHook } from '@/components/hooks/useTelemetryHook';
import { UsesSistent } from '../../SistentWrapper';

const promStyles = (theme) => ({
buttons: {
const StyledBox = styled(Box)(({ theme }) => ({
'& .buttons': {
display: 'flex',
// justifyContent: 'flex-end',
},
button: {
'& .button': {
marginTop: theme.spacing(3),
// marginLeft: theme.spacing(1),
},
margin: { margin: theme.spacing(1) },
icon: { width: theme.spacing(2.5) },
alignRight: { textAlign: 'right' },
formControl: { margin: theme.spacing(1), minWidth: 180 },
panelChips: { display: 'flex', flexWrap: 'wrap' },
panelChip: { margin: theme.spacing(0.25) },
chartTitle: { marginLeft: theme.spacing(3), marginTop: theme.spacing(2), textAlign: 'center' },
});
'& .margin': {
margin: theme.spacing(1),
},
'& .icon': {
width: theme.spacing(2.5),
},
'& .alignRight': {
textAlign: 'right',
},
'& .formControl': {
margin: theme.spacing(1),
minWidth: 180,
},
'& .panelChips': {
display: 'flex',
flexWrap: 'wrap',
},
'& .panelChip': {
margin: theme.spacing(0.25),
},
'& .chartTitle': {
marginLeft: theme.spacing(3),
marginTop: theme.spacing(2),
textAlign: 'center',
},
}));

// todo
export const submitPrometheusConfigure = (self, cb = () => {}) => {
Expand Down Expand Up @@ -296,30 +313,36 @@ class PrometheusComponent extends Component {
}

return (
<NoSsr>
<React.Fragment>
<PrometheusSelectionComponent
prometheusURL={prometheusURL}
handlePrometheusChipDelete={this.handlePrometheusChipDelete}
addSelectedBoardPanelConfig={this.addSelectedBoardPanelConfig}
handlePrometheusClick={this.handlePrometheusClick}
handleError={this.handleError}
connectionID={connectionID}
/>
{displaySelec}
</React.Fragment>
</NoSsr>
<UsesSistent>
<NoSsr>
<StyledBox>
<PrometheusSelectionComponent
prometheusURL={prometheusURL}
handlePrometheusChipDelete={this.handlePrometheusChipDelete}
addSelectedBoardPanelConfig={this.addSelectedBoardPanelConfig}
handlePrometheusClick={this.handlePrometheusClick}
handleError={this.handleError}
connectionID={connectionID}
/>
{displaySelec}
</StyledBox>
</NoSsr>
</UsesSistent>
);
}
return (
<NoSsr>
<PrometheusConfigComponent
prometheusURL={prometheusURL && { label: prometheusURL, value: prometheusURL }}
urlError={urlError}
handleChange={this.handleChange}
handlePrometheusConfigure={this.handlePrometheusConfigure}
/>
</NoSsr>
<UsesSistent>
<NoSsr>
<StyledBox>
<PrometheusConfigComponent
prometheusURL={prometheusURL && { label: prometheusURL, value: prometheusURL }}
urlError={urlError}
handleChange={this.handleChange}
handlePrometheusConfigure={this.handlePrometheusConfigure}
/>
</StyledBox>
</NoSsr>
</UsesSistent>
);
}
}
Expand All @@ -344,9 +367,7 @@ const mapStateToProps = (st) => {
return { grafana, prometheus, selectedK8sContexts, k8sconfig };
};

export default withStyles(promStyles)(
connect(
mapStateToProps,
mapDispatchToProps,
)(withTelemetryHook(withNotify(PrometheusComponent), CONNECTION_KINDS.PROMETHEUS)),
);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(withTelemetryHook(withNotify(PrometheusComponent), CONNECTION_KINDS.PROMETHEUS));
47 changes: 25 additions & 22 deletions ui/components/telemetry/prometheus/PrometheusConfigComponent.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { NoSsr, Grid, Button } from '@material-ui/core';
import { NoSsr } from '@mui/material';
import { Grid, Button, styled, useTheme } from '@layer5/sistent';
import ReactSelectWrapper from '../../ReactSelectWrapper';
import CAN from '@/utils/can';
import { keys } from '@/utils/permission_constants';
import { useEffect } from 'react';
import { CONNECTION_KINDS, CONNECTION_STATES } from '@/utils/Enum';
import dataFetch from 'lib/data-fetch';
import { UsesSistent } from '@/components/SistentWrapper';

const promStyles = (theme) => ({
promRoot: {
const StyledRoot = styled('div')(() => {
const theme = useTheme();
return {
padding: theme.spacing(5),
backgroundColor: theme.palette.secondary.elevatedComponents,
backgroundColor: theme.palette.background.default,
borderBottomLeftRadius: theme.spacing(1),
borderBottomRightRadius: theme.spacing(1),
marginTop: theme.spacing(2),
},
buttons: { display: 'flex', justifyContent: 'flex-end' },
button: {
};
});

const ButtonContainer = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
'& .submitButton': {
marginTop: theme.spacing(3),
// marginLeft: theme.spacing(1),
},
});
}));

// change this to display all connected prometheuses connecion and based on the selection updat tht erduc prom object
const PrometheusConfigComponent = ({
classes,
prometheusURL,
urlError,
handleChange,
Expand All @@ -50,9 +54,9 @@ const PrometheusConfigComponent = ({
}, []);

return (
<NoSsr>
<React.Fragment>
<div className={classes.promRoot}>
<UsesSistent>
<NoSsr>
<StyledRoot>
<Grid container spacing={1}>
<Grid item xs={12}>
<ReactSelectWrapper
Expand All @@ -70,31 +74,30 @@ const PrometheusConfigComponent = ({
/>
</Grid>
</Grid>
<div className={classes.buttons}>
<ButtonContainer>
<Button
type="submit"
variant="contained"
color="primary"
size="large"
onClick={handlePrometheusConfigure}
className={classes.button}
className="submitButton"
disabled={!CAN(keys.CONNECT_METRICS.action, keys.CONNECT_METRICS.subject)}
>
Submit
</Button>
</div>
</div>
</React.Fragment>
</NoSsr>
</ButtonContainer>
</StyledRoot>
</NoSsr>
</UsesSistent>
);
};

PrometheusConfigComponent.propTypes = {
classes: PropTypes.object.isRequired,
prometheusURL: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
handlePrometheusConfigure: PropTypes.func.isRequired,
options: PropTypes.array.isRequired,
};

export default withStyles(promStyles)(PrometheusConfigComponent);
export default PrometheusConfigComponent;
Loading

0 comments on commit 3a71dc6

Please sign in to comment.