wake component
parent
5e7aa9bbc7
commit
647daee657
|
@ -10,6 +10,7 @@ import {
|
||||||
import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
|
import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
import MachineLog from "./MachineLog";
|
import MachineLog from "./MachineLog";
|
||||||
|
import WakeComponent from "./WakeComponent";
|
||||||
|
|
||||||
const useRowStyles = makeStyles({
|
const useRowStyles = makeStyles({
|
||||||
root: {
|
root: {
|
||||||
|
@ -19,7 +20,7 @@ const useRowStyles = makeStyles({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const Machine = ({ machine, actions, logs }) => {
|
const Machine = ({ machine, actions, logs, addLog }) => {
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
|
|
||||||
|
@ -42,25 +43,24 @@ const Machine = ({ machine, actions, logs }) => {
|
||||||
<TableCell>{machine.iPv4Address}</TableCell>
|
<TableCell>{machine.iPv4Address}</TableCell>
|
||||||
<TableCell>{machine.macAddress}</TableCell>
|
<TableCell>{machine.macAddress}</TableCell>
|
||||||
<TableCell align="right">
|
<TableCell align="right">
|
||||||
<>
|
<WakeComponent machine={machine} addLog={addLog} />
|
||||||
{actions.map(action => (
|
{actions.map(action => (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={action.tooltip}
|
title={action.tooltip}
|
||||||
key={`machine-item-${machine.machineId}-${action.code}-tooltip`}
|
key={`machine-item-${machine.machineId}-${action.code}-tooltip`}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<IconButton
|
<IconButton
|
||||||
id={`machine-item-${machine.machineId}-${action.code}`}
|
id={`machine-item-${machine.machineId}-${action.code}`}
|
||||||
size={"small"}
|
size={"small"}
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onClick={action.effect(machine)}
|
onClick={action.effect(machine)}
|
||||||
>
|
>
|
||||||
<action.icon />
|
<action.icon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
))}
|
))}
|
||||||
</>
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
|
@ -84,7 +84,8 @@ Machine.propTypes = {
|
||||||
description: PropTypes.string
|
description: PropTypes.string
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
actions: PropTypes.array.isRequired,
|
actions: PropTypes.array.isRequired,
|
||||||
logs: PropTypes.array.isRequired
|
logs: PropTypes.array.isRequired,
|
||||||
|
addLog: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Machine;
|
export default Machine;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState, useCallback } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import Machine from "./Machine";
|
import Machine from "./Machine";
|
||||||
import * as api from "../api";
|
import * as api from "../api";
|
||||||
import { useToast } from "../../../hooks";
|
import { useToast } from "../../../hooks";
|
||||||
import { PowerSettingsNew, LastPage } from "@material-ui/icons";
|
import { LastPage } from "@material-ui/icons";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
const MachineContainer = ({ machine }) => {
|
const MachineContainer = ({ machine }) => {
|
||||||
|
@ -15,35 +15,22 @@ const MachineContainer = ({ machine }) => {
|
||||||
setLogs(prev => [...prev, text]);
|
setLogs(prev => [...prev, text]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const wakeMachine = machine => async () => {
|
const pingMachine = useCallback(
|
||||||
const result = await api.wakeMachine(machine.macAddress);
|
machine => async () => {
|
||||||
addLog(`Success: ${result.success}. Status: ${result.status}`);
|
const result = await api.pingMachine(
|
||||||
if (result.success) {
|
machine.iPv4Address || machine.machineName
|
||||||
success(result.status);
|
);
|
||||||
} else {
|
addLog(`Success: ${result.success}. Status: ${result.status}`);
|
||||||
error(result.status);
|
if (result.success) {
|
||||||
}
|
success(result.status);
|
||||||
};
|
} else {
|
||||||
|
error(result.status);
|
||||||
const pingMachine = machine => async () => {
|
}
|
||||||
const result = await api.pingMachine(
|
},
|
||||||
machine.iPv4Address || machine.machineName
|
[error, success]
|
||||||
);
|
);
|
||||||
addLog(`Success: ${result.success}. Status: ${result.status}`);
|
|
||||||
if (result.success) {
|
|
||||||
success(result.status);
|
|
||||||
} else {
|
|
||||||
error(result.status);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const actions = [
|
const actions = [
|
||||||
{
|
|
||||||
code: "wake",
|
|
||||||
effect: wakeMachine,
|
|
||||||
icon: PowerSettingsNew,
|
|
||||||
tooltip: t("Machine.Actions.Wake")
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
code: "ping",
|
code: "ping",
|
||||||
effect: pingMachine,
|
effect: pingMachine,
|
||||||
|
@ -52,7 +39,9 @@ const MachineContainer = ({ machine }) => {
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return <Machine machine={machine} actions={actions} logs={logs} />;
|
return (
|
||||||
|
<Machine machine={machine} actions={actions} logs={logs} addLog={addLog} />
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
MachineContainer.propTypes = {
|
MachineContainer.propTypes = {
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { IconButton, Tooltip } from "@material-ui/core";
|
||||||
|
import { PowerSettingsNew } from "@material-ui/icons";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useToast } from "../../../hooks";
|
||||||
|
import * as api from "../api";
|
||||||
|
|
||||||
|
const WakeComponent = ({ machine, addLog }) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { success, error } = useToast();
|
||||||
|
|
||||||
|
const wakeMachine = machine => async () => {
|
||||||
|
const result = await api.wakeMachine(machine.macAddress);
|
||||||
|
addLog(`Success: ${result.success}. Status: ${result.status}`);
|
||||||
|
if (result.success) {
|
||||||
|
success(result.status);
|
||||||
|
} else {
|
||||||
|
error(result.status);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
alert("AAA");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title={t("Machine.Actions.Wake")}>
|
||||||
|
<span>
|
||||||
|
<IconButton
|
||||||
|
id={`machine-${machine.machineId}-wake`}
|
||||||
|
size={"small"}
|
||||||
|
disabled={false}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
<PowerSettingsNew />
|
||||||
|
</IconButton>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
WakeComponent.propTypes = {
|
||||||
|
machine: PropTypes.object.isRequired,
|
||||||
|
addLog: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WakeComponent;
|
|
@ -1,6 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import MachinesContainer from "../../machines/components/MachinesContainer";
|
import MachinesContainer from "../../machines/components/MachinesContainer";
|
||||||
import NotesContainer from "../../notes/components/NotesContainer";
|
//import NotesContainer from "../../notes/components/NotesContainer";
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
import styles from "../styles";
|
import styles from "../styles";
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue