fix: cockpit-sensors with correty base project
This commit is contained in:
Cristopfer Luis Viana da Silva
parent
f9f2da6974
commit
57ad28ed58
13 changed files with 440 additions and 78 deletions
285
src/app.jsx
285
src/app.jsx
|
|
@ -19,32 +19,289 @@
|
|||
|
||||
import cockpit from 'cockpit';
|
||||
import React from 'react';
|
||||
import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
|
||||
import { Card, CardBody, CardTitle } from "@patternfly/react-core/dist/esm/components/Card/index.js";
|
||||
import { Alert, Card, CardTitle, CardHeader, CardBody, CardExpandableContent, Checkbox, Button, Spinner, Flex, FlexItem } from '@patternfly/react-core';
|
||||
import { FanIcon, ThermometerHalfIcon, ChargingStationIcon, CpuIcon } from '@patternfly/react-icons/dist/esm/icons/';
|
||||
|
||||
const _ = cockpit.gettext;
|
||||
|
||||
export class Application extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = { hostname: _("Unknown") };
|
||||
this.state = { sensors: {}, intervalId: {}, alert: null, fahrenheitTemp: [], fahrenheitChecked: false, isShowBtnInstall: false, sensorArgumet: "-j", isShowLoading: false, isExpanded: {}, expandAllCards: false, isError: false, hidedCards: [] };
|
||||
}
|
||||
|
||||
cockpit.file('/etc/hostname').watch(content => {
|
||||
this.setState({ hostname: content.trim() });
|
||||
componentDidMount() {
|
||||
const intervalId = setInterval(() => {
|
||||
if (!this.state.isShowBtnInstall && !this.state.isError)
|
||||
this.loadSensors();
|
||||
}, 1000);
|
||||
this.setState({ intervalId });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.state.intervalId);
|
||||
}
|
||||
|
||||
loadSensors = () => {
|
||||
cockpit
|
||||
.spawn(["sensors", this.state.sensorArgumet], { err: "message", superuser: "try" })
|
||||
.done((sucess) => {
|
||||
if (this.state.sensorArgumet === "-j") {
|
||||
this.setState({ sensors: JSON.parse(sucess), isShowBtnInstall: false });
|
||||
} else {
|
||||
const sensorsJson = {};
|
||||
sucess.split(/\n\s*\n/).forEach(raw => {
|
||||
let sensorsGroupName = "";
|
||||
let index = 0;
|
||||
let sensorTitle = "";
|
||||
raw.split(/\n\s*/).forEach(element => {
|
||||
if (index === 0) {
|
||||
sensorsGroupName = element;
|
||||
sensorsJson[sensorsGroupName] = {};
|
||||
}
|
||||
if (index === 1) {
|
||||
const adapter = element.split(":");
|
||||
sensorsJson[sensorsGroupName][adapter[0]] = adapter[1].trim();
|
||||
}
|
||||
if (index >= 2) {
|
||||
const sensor = element.trim().split(":");
|
||||
if (sensor[1] === "") {
|
||||
sensorTitle = element.split(":")[0];
|
||||
sensorsJson[sensorsGroupName][sensorTitle] = {};
|
||||
} else {
|
||||
sensorsJson[sensorsGroupName][sensorTitle][sensor[0]] = parseFloat(sensor[1].trim());
|
||||
}
|
||||
}
|
||||
|
||||
index += 1;
|
||||
});
|
||||
});
|
||||
this.setState({ sensors: sensorsJson, isShowBtnInstall: false });
|
||||
}
|
||||
})
|
||||
.fail((err) => {
|
||||
if (err.message === "not-found") {
|
||||
this.setState({ isShowBtnInstall: true });
|
||||
this.setAlert(_('lm-sensors not found, you want install it ?'), 'danger');
|
||||
this.getLmSensorsInstallCmd(0);
|
||||
return;
|
||||
}
|
||||
if (err.message === "sensors: invalid option -- 'j'") {
|
||||
this.setState({ sensorArgumet: "-u" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (err.message === "sensors: invalid option -- 'u'") {
|
||||
this.setAlert(_("this version of lm-sensors don't suport output sensors data!"), 'danger');
|
||||
this.setState({ isError: true });
|
||||
return;
|
||||
}
|
||||
this.setAlert(err.message, 'warning');
|
||||
clearInterval(this.state.intervalId);
|
||||
});
|
||||
};
|
||||
|
||||
setIcon = (name) => {
|
||||
if (typeof name !== 'undefined') {
|
||||
if (name.includes('fan')) {
|
||||
return <FanIcon size='md' />;
|
||||
}
|
||||
if (name.includes('temp')) {
|
||||
return <ThermometerHalfIcon size='md' />;
|
||||
}
|
||||
if (name.includes('in')) {
|
||||
return <ChargingStationIcon size='md' />;
|
||||
}
|
||||
if (name.includes('cpu')) {
|
||||
return <CpuIcon size='md' />;
|
||||
}
|
||||
}
|
||||
return <></>;
|
||||
};
|
||||
|
||||
adjustLabel = (label) => {
|
||||
return label.replace(label.substring(0, label.indexOf('_')) + '_', '');
|
||||
};
|
||||
|
||||
setAlert = (msg, variant) => {
|
||||
this.setState({ alert: { msg, variant } });
|
||||
};
|
||||
|
||||
handleChange = (checked, event) => {
|
||||
this.setState({ fahrenheitChecked: checked });
|
||||
if (checked) {
|
||||
// this.setAlert(_('lm-sensors has a bug that converts all data to fahrenheit, including voltage, fans and etc.'), 'info');
|
||||
this.setState({ fahrenheitTemp: ['-f'] });
|
||||
} else {
|
||||
this.setState({ fahrenheitTemp: [], alert: null });
|
||||
}
|
||||
};
|
||||
|
||||
handleChangeCards = (checked, event) => {
|
||||
const isExpanded = this.state.isExpanded;
|
||||
Object.keys(isExpanded).forEach((element) => {
|
||||
isExpanded[element] = checked;
|
||||
});
|
||||
console.log(this.state.isExpanded, isExpanded);
|
||||
this.setState({ isExpanded, expandAllCards: checked });
|
||||
};
|
||||
|
||||
lstPacktsManager = ["apk", "apt-get", "dnf", "zypper"];
|
||||
installCmd = null;
|
||||
getLmSensorsInstallCmd = async (index) => {
|
||||
const cmd = this.lstPacktsManager[index];
|
||||
await cockpit.spawn([cmd, "-v"])
|
||||
.then((sucesso) => {
|
||||
switch (cmd) {
|
||||
case "apk":
|
||||
this.installCmd = [cmd, "add", "--no-cache", "lm-sensors", "-y"];
|
||||
break;
|
||||
case "dnf":
|
||||
this.installCmd = [cmd, "install", "lm_sensors", "-y"];
|
||||
break;
|
||||
case "zypper":
|
||||
this.installCmd = [cmd, "install", "-y", "sensors"];
|
||||
break;
|
||||
case "apt-get":
|
||||
default:
|
||||
this.installCmd = [cmd, "install", "lm-sensors", "-y"];
|
||||
}
|
||||
})
|
||||
.fail((e) => {
|
||||
this.getLmSensorsInstallCmd(index + 1);
|
||||
});
|
||||
};
|
||||
|
||||
handleInstallSensors = async () => {
|
||||
this.setState({ isShowLoading: true });
|
||||
cockpit.spawn(this.installCmd, { err: "message", superuser: "require" })
|
||||
.done((sucess) => {
|
||||
console.log('instalou ?');
|
||||
this.setState({ isShowLoading: false, isShowBtnInstall: false, alert: null });
|
||||
cockpit.spawn(["sensors-detect", "--auto"], { err: "message", superuser: "require" })
|
||||
.done((sucess) => {
|
||||
cockpit.spawn(["modprobe", "coretemp"], { err: "message", superuser: "require" });
|
||||
cockpit.spawn(["modprobe", "i2c-i801"], { err: "message", superuser: "require" });
|
||||
cockpit.spawn(["modprobe", "drivetemp"], { err: "message", superuser: "require" });
|
||||
})
|
||||
.fail((err) => {
|
||||
this.setAlert(err.message, 'warning');
|
||||
});
|
||||
})
|
||||
.fail((err) => {
|
||||
console.log('erro ?');
|
||||
this.setState({ isShowLoading: false, isShowBtnInstall: false });
|
||||
this.setAlert(err.message, 'warning');
|
||||
});
|
||||
};
|
||||
|
||||
adjustValue = (name, value) => {
|
||||
if (typeof name !== 'undefined') {
|
||||
if (name.includes('temp')) {
|
||||
return this.state.fahrenheitChecked
|
||||
? parseFloat((value * 9 / 5) + 32).toFixed(1)
|
||||
.toString()
|
||||
.concat(' °F')
|
||||
: parseFloat(value).toFixed(1)
|
||||
.toString()
|
||||
.concat(' °C');
|
||||
}
|
||||
|
||||
if (name.includes('fan')) {
|
||||
return value.toString().concat(' RPM');
|
||||
}
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
handleOnExpand = (event, id) => {
|
||||
// eslint-disable-next-line no-console
|
||||
|
||||
const isExpanded = this.state.isExpanded;
|
||||
isExpanded[id] = !isExpanded[id];
|
||||
console.log(id, this.state.isExpanded, isExpanded);
|
||||
this.setState({ isExpanded });
|
||||
};
|
||||
|
||||
hideCard(cardId) {
|
||||
const hidedCards = this.state.hidedCards.push(cardId);
|
||||
console.log(cardId, hidedCards);
|
||||
this.setState({ hidedCards });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { sensors, alert, fahrenheitChecked, isShowBtnInstall, isShowLoading, isExpanded, expandAllCards } = this.state;
|
||||
return (
|
||||
<Card>
|
||||
<CardTitle>Starter Kit</CardTitle>
|
||||
<CardBody>
|
||||
<Alert
|
||||
variant="info"
|
||||
title={ cockpit.format(_("Running on $0"), this.state.hostname) }
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<>
|
||||
<Card>
|
||||
<CardTitle>{_('Sensors')}</CardTitle>
|
||||
<CardBody>
|
||||
<Checkbox
|
||||
label={_("Show temperature in Fahrenheit")}
|
||||
isChecked={fahrenheitChecked}
|
||||
onChange={this.handleChange}
|
||||
id="fahrenheit-checkbox"
|
||||
name="fahrenheit-checkbox"
|
||||
/>
|
||||
<Checkbox
|
||||
label={_("Expand all cards")}
|
||||
isChecked={expandAllCards}
|
||||
onChange={this.handleChangeCards}
|
||||
id="allcards-checkbox"
|
||||
name="allcards-checkbox"
|
||||
/>
|
||||
<>
|
||||
{isShowLoading ? <Spinner isSVG /> : <></>}
|
||||
{alert != null ? <Alert variant={alert.variant}>{alert.msg}</Alert> : <></>}
|
||||
{isShowBtnInstall ? <Button onClick={this.handleInstallSensors}>{_('Install')}</Button> : <></>}
|
||||
</>
|
||||
{sensors !== null
|
||||
? Object.entries(sensors).map((key, keyIndex) =>
|
||||
<Card key={key}>
|
||||
<CardTitle>{key[0]}</CardTitle>
|
||||
<CardBody>
|
||||
<CardTitle>{key[1].Adapter}</CardTitle>
|
||||
<Flex key={key[1]}>
|
||||
{Object.entries(key[1]).map((item, itemIndex) => {
|
||||
if (itemIndex === 0) return "";
|
||||
const chave = keyIndex.toString() + itemIndex.toString();
|
||||
if (isExpanded[chave] === undefined) {
|
||||
isExpanded[chave] = false;
|
||||
}
|
||||
return (
|
||||
<FlexItem key={item} style={{ width: "15%" }}>
|
||||
<Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}>
|
||||
<CardHeader
|
||||
style={{ justifyContent: 'normal' }}
|
||||
onExpand={(e) => this.handleOnExpand(e, chave)}
|
||||
toggleButtonProps={{
|
||||
id: 'toggle-button2',
|
||||
'aria-label': 'Patternfly Details',
|
||||
'aria-expanded': isExpanded[chave]
|
||||
}}
|
||||
><CardTitle>{item[0]}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])}
|
||||
</CardTitle>
|
||||
<CardExpandableContent>
|
||||
<CardBody>
|
||||
{Object.entries(item[1]).map((sensors, index) => (
|
||||
<span key={sensors}>{this.adjustLabel(sensors[0])}: {sensors[1]}<br /></span>
|
||||
))}
|
||||
</CardBody>
|
||||
</CardExpandableContent>
|
||||
</Card>
|
||||
</FlexItem>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
: ''}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue