mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Replace deprecated <FormSwitcher/> in metrics-cluster-feature extension (#6060)
* Use new <Switch/> inside deprecated material switcher Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Clean up material UI (except types) from FormSwitch Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix button size in Metrics Settings Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove material-ui references from <Switcher/> & <FormSwitcher/> Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Change to newer <Switch/> component Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
GitHub
parent
0c32490fb0
commit
edd5d54e49
@ -15,7 +15,7 @@ const {
|
||||
forCluster, StatefulSet, DaemonSet, Deployment,
|
||||
},
|
||||
Component: {
|
||||
SubTitle, FormSwitch, Switcher, Button,
|
||||
SubTitle, Switch, Button,
|
||||
},
|
||||
} = Renderer;
|
||||
|
||||
@ -207,17 +207,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
|
||||
)}
|
||||
<section>
|
||||
<SubTitle title="Prometheus" />
|
||||
<FormSwitch
|
||||
control={(
|
||||
<Switcher
|
||||
disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
|
||||
onChange={v => this.togglePrometheus(v.target.checked)}
|
||||
name="prometheus"
|
||||
/>
|
||||
)}
|
||||
label="Enable bundled Prometheus metrics stack"
|
||||
/>
|
||||
<Switch
|
||||
disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.prometheus && this.props.cluster.status.phase == "connected"}
|
||||
onChange={checked => this.togglePrometheus(checked)}
|
||||
name="prometheus"
|
||||
>
|
||||
Enable bundled Prometheus metrics stack
|
||||
</Switch>
|
||||
<small className="hint">
|
||||
Enable timeseries data visualization (Prometheus stack) for your cluster.
|
||||
</small>
|
||||
@ -225,17 +222,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
|
||||
|
||||
<section>
|
||||
<SubTitle title="Kube State Metrics" />
|
||||
<FormSwitch
|
||||
control={(
|
||||
<Switcher
|
||||
disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
|
||||
onChange={v => this.toggleKubeStateMetrics(v.target.checked)}
|
||||
name="node-exporter"
|
||||
/>
|
||||
)}
|
||||
label="Enable bundled kube-state-metrics stack"
|
||||
/>
|
||||
<Switch
|
||||
disabled={this.featureStates.kubeStateMetrics === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.kubeStateMetrics && this.props.cluster.status.phase == "connected"}
|
||||
onChange={checked => this.toggleKubeStateMetrics(checked)}
|
||||
name="kube-state-metrics"
|
||||
>
|
||||
Enable bundled kube-state-metrics stack
|
||||
</Switch>
|
||||
<small className="hint">
|
||||
Enable Kubernetes API object metrics for your cluster.
|
||||
Enable this only if you don't have existing kube-state-metrics stack installed.
|
||||
@ -244,17 +238,14 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
|
||||
|
||||
<section>
|
||||
<SubTitle title="Node Exporter" />
|
||||
<FormSwitch
|
||||
control={(
|
||||
<Switcher
|
||||
disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
|
||||
onChange={v => this.toggleNodeExporter(v.target.checked)}
|
||||
name="node-exporter"
|
||||
/>
|
||||
)}
|
||||
label="Enable bundled node-exporter stack"
|
||||
/>
|
||||
<Switch
|
||||
disabled={this.featureStates.nodeExporter === undefined || !this.isTogglable}
|
||||
checked={!!this.featureStates.nodeExporter && this.props.cluster.status.phase == "connected"}
|
||||
onChange={checked => this.toggleNodeExporter(checked)}
|
||||
name="node-exporter"
|
||||
>
|
||||
Enable bundled node-exporter stack
|
||||
</Switch>
|
||||
<small className="hint">
|
||||
Enable node level metrics for your cluster.
|
||||
Enable this only if you don't have existing node-exporter stack installed.
|
||||
@ -262,20 +253,22 @@ export class MetricsSettings extends React.Component<MetricsSettingsProps> {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Button
|
||||
label={this.buttonLabel}
|
||||
waiting={this.inProgress}
|
||||
onClick={() => this.save()}
|
||||
primary
|
||||
disabled={!this.changed}
|
||||
className="w-60 h-14"
|
||||
/>
|
||||
<div>
|
||||
<Button
|
||||
primary
|
||||
label={this.buttonLabel}
|
||||
waiting={this.inProgress}
|
||||
onClick={() => this.save()}
|
||||
disabled={!this.changed}
|
||||
style={{ width: "20ch", padding: "0.5rem" }}
|
||||
/>
|
||||
|
||||
{this.canUpgrade && (
|
||||
<small className="hint">
|
||||
An update is available for enabled metrics components.
|
||||
</small>
|
||||
)}
|
||||
{this.canUpgrade && (
|
||||
<small className="hint">
|
||||
An update is available for enabled metrics components.
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,34 +4,19 @@
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import type { FormControlLabelProps } from "@material-ui/core/FormControlLabel";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import { makeStyles } from "@material-ui/styles";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
margin: 0,
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
flex: 1,
|
||||
color: "var(--textColorAccent)",
|
||||
},
|
||||
},
|
||||
});
|
||||
interface FormControlLabelProps {
|
||||
control: React.ReactElement<any, any>;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use <Switch/> instead from "../switch.tsx".
|
||||
*/
|
||||
export function FormSwitch(props: FormControlLabelProps) {
|
||||
const classes = useStyles();
|
||||
export function FormSwitch(props: FormControlLabelProps & { children?: React.ReactNode }) {
|
||||
const ClonedElement = React.cloneElement(props.control, {
|
||||
children: <span>{props.label}</span>,
|
||||
});
|
||||
|
||||
return (
|
||||
<FormControlLabel
|
||||
control={props.control}
|
||||
labelPlacement="start"
|
||||
label={props.label}
|
||||
className={classes.root}
|
||||
/>
|
||||
);
|
||||
return ClonedElement;
|
||||
}
|
||||
|
||||
@ -4,75 +4,28 @@
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import type { Theme } from "@material-ui/core/styles";
|
||||
import { createStyles, withStyles } from "@material-ui/core/styles";
|
||||
import type { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
|
||||
import Switch from "@material-ui/core/Switch";
|
||||
import { Switch } from "./switch";
|
||||
|
||||
interface Styles extends Partial<Record<SwitchClassKey, string>> {
|
||||
focusVisible?: string;
|
||||
}
|
||||
|
||||
export interface SwitcherProps extends SwitchProps {
|
||||
classes: Styles;
|
||||
export interface SwitcherProps {
|
||||
disabled?: boolean;
|
||||
children?: React.ReactNode;
|
||||
checked?: boolean;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use <Switch/> instead from "../switch.tsx".
|
||||
*/
|
||||
export const Switcher = withStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
width: 40,
|
||||
height: 24,
|
||||
padding: 0,
|
||||
margin: "0 0 0 8px",
|
||||
},
|
||||
switchBase: {
|
||||
padding: 1,
|
||||
paddingLeft: 4,
|
||||
"&$checked": {
|
||||
transform: "translateX(14px)",
|
||||
color: "white",
|
||||
"& + $track": {
|
||||
backgroundColor: "#52d869",
|
||||
opacity: 1,
|
||||
border: "none",
|
||||
},
|
||||
},
|
||||
"&$focusVisible $thumb": {
|
||||
color: "#52d869",
|
||||
border: "6px solid #fff",
|
||||
},
|
||||
},
|
||||
thumb: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
marginTop: 2,
|
||||
boxShadow: "none",
|
||||
},
|
||||
track: {
|
||||
borderRadius: 26 / 2,
|
||||
backgroundColor: "#72767b",
|
||||
opacity: 1,
|
||||
transition: theme.transitions.create(["background-color", "border"]),
|
||||
},
|
||||
checked: {},
|
||||
focusVisible: {},
|
||||
}),
|
||||
)(({ classes, ...props }: SwitcherProps) => {
|
||||
export function Switcher({ disabled, checked, onChange, name, children }: SwitcherProps) {
|
||||
return (
|
||||
<Switch
|
||||
focusVisibleClassName={classes.focusVisible}
|
||||
disableRipple
|
||||
classes={{
|
||||
root: classes.root,
|
||||
switchBase: classes.switchBase,
|
||||
thumb: classes.thumb,
|
||||
track: classes.track,
|
||||
checked: classes.checked,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
disabled={disabled}
|
||||
checked={checked}
|
||||
name={name}
|
||||
onChange={(checked, event) => onChange?.(event, checked)}
|
||||
>
|
||||
{children}
|
||||
</Switch>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user