Skip to content

Commit

Permalink
fix: finished groups UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@wojtekzyla
wojtekzyla committed Jan 5, 2023
1 parent a61ab32 commit 5bfb791
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 32 deletions.
34 changes: 17 additions & 17 deletions frontend/packages/manager/src/components/groups/AddDeviceModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {useCallback, useContext, useState} from 'react';
import Button from '@splunk/react-ui/Button';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import Modal from '@splunk/react-ui/Modal';
import Select from '@splunk/react-ui/Select';
import Text from '@splunk/react-ui/Text';
Expand All @@ -12,6 +11,7 @@ import { createDOMID } from '@splunk/ui-utils/id';
import P from '@splunk/react-ui/Paragraph';
import { validationGroup, validationMessage } from "../../styles/ValidationStyles";
import { backendHost } from "../../host";
import { StyledControlGroup, StyledModalBody, StyledModalHeader } from "../../styles/inventory/InventoryStyle";


function AddDeviceModal(){
Expand Down Expand Up @@ -107,56 +107,56 @@ function AddDeviceModal(){
return (
<div>
<Modal onRequestClose={handleRequestClose} open={GrCtx.addDeviceOpen} style={{ width: '600px' }}>
<Modal.Header title={((GrCtx.isDeviceEdit) ? `Edit device` : `Add new device to group ${GrCtx.groupName}`)} onRequestClose={handleRequestClose} />
<Modal.Body>
<ControlGroup label="IP address">
<StyledModalHeader title={((GrCtx.isDeviceEdit) ? `Edit device` : `Add new device to group ${GrCtx.groupName}`)} onRequestClose={handleRequestClose} />
<StyledModalBody>
<StyledControlGroup labelWidth={140} label="IP address">
<div style={validationGroup}>
<Text value={GrCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
{((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ControlGroup>
<ControlGroup label="Port" >
</StyledControlGroup>
<StyledControlGroup labelWidth={140} label="Port" >
<div style={validationGroup}>
<Text value={GrCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
{((ValCtx.portErrors) ? ValCtx.portErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ControlGroup>
</StyledControlGroup>

<ControlGroup
<StyledControlGroup
label="SNMP version"
labelFor="customized-select-after"
help="Clicking the label will focus/activate the Select rather than the default first Text."
labelWidth={140}
>
<Select defaultValue={GrCtx.version} inputId="customized-select-after" value={GrCtx.version} onChange={handleChangeVersion}>
<Select.Option label="From inventory" value=""/>
<Select.Option label="1" value="1"/>
<Select.Option label="2c" value="2c"/>
<Select.Option label="3" value="3"/>
</Select>
</ControlGroup>
</StyledControlGroup>

<ControlGroup label="Community">
<StyledControlGroup labelWidth={140} label="Community">
<div style={validationGroup}>
<Text value={GrCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
{((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ControlGroup>
</StyledControlGroup>

<ControlGroup label="Secret">
<StyledControlGroup labelWidth={140} label="Secret">
<div style={validationGroup}>
<Text value={GrCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
{((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ControlGroup>
</StyledControlGroup>

<ControlGroup label="Security Engine">
<StyledControlGroup labelWidth={140} label="Security Engine">
<div style={validationGroup}>
<Text value={GrCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
{((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ControlGroup>
</StyledControlGroup>

</Modal.Body>
</StyledModalBody>
<Modal.Footer>
<Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button appearance="primary" label="Submit" onClick={handleApply} />
Expand Down
58 changes: 43 additions & 15 deletions frontend/packages/manager/src/components/groups/GroupsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ function GroupsList() {
let selected = {};
for (let group of response.data){
selected[group._id] = false;
GrCtx.setDevices([]);
existingGroups.push(group._id);
}
// If page was reloaded after updating one of devices, open tab of that group
Expand All @@ -80,14 +81,14 @@ function GroupsList() {
GrCtx.setGroupId(null);
};

const editGroupButtonHandler = (groupId, groupName) => {
const editGroupHandler = (groupId, groupName) => {
GrCtx.setGroupId(groupId);
GrCtx.setGroupName(groupName);
GrCtx.setIsGroupEdit(true);
GrCtx.setAddGroupOpen(true);
};

const newDeviceButtonHandler = (groupId, groupName) => {
const newDevicenHandler = (groupId, groupName) => {
GrCtx.setGroupId(groupId);
GrCtx.setGroupName(groupName);
GrCtx.setVersion("");
Expand All @@ -97,14 +98,15 @@ function GroupsList() {
GrCtx.resetDevice();
};

const deleteGroupButtonHandler = (groupId, groupName) => {
const groupDeleteHandler = (groupId, groupName) => {
BtnCtx.setDeleteOpen(true);
GrCtx.setDeleteName(groupName);
GrCtx.setDeleteUrl(`http://${backendHost}/groups/delete/${groupId}`);
};

const selectGroup = (groupId, groupName, page) => {
setOpenedGroupId(groupId)
GrCtx.setGroupName(groupName);
const selected = {};
selected[groupId] = true;
setSelectedGroup(prev => {
Expand All @@ -113,7 +115,6 @@ function GroupsList() {
}
return {...prev, ...selected}}
);
GrCtx.setGroupName(groupName)
// If last item from the current page was deleted, page variable
// must be decreased. To do this first we calculate current number
// of pages and then we load devices for this page.
Expand All @@ -134,6 +135,8 @@ function GroupsList() {
}

const paginationHandler = (page, groupId) => {
console.log(page);
console.log(groupId);
selectGroup(groupId, GrCtx.groupName, page);
};

Expand All @@ -145,23 +148,46 @@ function GroupsList() {


const deviceEditHandler = (row) => {
/*GrCtx.setIsDeviceEdit(true);
GrCtx.setGroupId(groupId);
GrCtx.setGroupId(openedGroupId);
GrCtx.setDeviceId(row._id);
GrCtx.setAddress(row.address);
GrCtx.setPort(row.port);
GrCtx.setVersion(row.version);
GrCtx.setCommunity(row.community);
GrCtx.setSecret(row.secret);
GrCtx.setSecurityEngine(row.securityEngine);
GrCtx.setAddDeviceOpen(true);*/
console.log("edit device");
GrCtx.setIsDeviceEdit(true);
GrCtx.setAddDeviceOpen(true);
console.log(`edit device ${GrCtx.deviceId} from group ${GrCtx.groupName} - ${openedGroupId}`);
};

const deviceDeleteHandler = (row) => {
/*this.setRowData(row);
this.context.setDeleteOpen(true);*/
console.log("delete device");
GrCtx.setDeleteName(`${row.address}:${row.port}`);
GrCtx.setDeviceId(row._id);
GrCtx.setGroupId(openedGroupId);
GrCtx.setDeleteUrl(`http://${backendHost}/devices/delete/${row._id}`)
GrCtx.setDeleteOpen(true);
console.log(`remove device ${GrCtx.deviceId} from group ${GrCtx.groupName} - ${openedGroupId}`);
};

const deleteModalRequest = () => {
axios.post(GrCtx.deleteUrl)
.then(function (response) {
if ('message' in response.data){
ErrCtx.setOpen(true);
ErrCtx.setMessage(response.data.message);
}
GrCtx.makeGroupsChange();
})
.catch(function (error) {
console.log(error);
GrCtx.makeGroupsChange();
});
GrCtx.setDeleteOpen(false);
GrCtx.resetDevice();
GrCtx.setDeleteUrl('');
GrCtx.setEditedGroupId(GrCtx.groupId)
GrCtx.addGroupModalToggle?.current?.focus();
};

const groupsList = groups.map((group) => (
Expand All @@ -170,9 +196,9 @@ function GroupsList() {
{group.groupName}
</P>
<div>
<Button style={{ margin: "0" }} onClick={() => (newDeviceButtonHandler(group._id, group.groupName))} appearance="pill" icon={<Plus />} />
<Button style={{ margin: "0" }} onClick={() => (editGroupButtonHandler(group._id, group.groupName))} appearance="pill" icon={<Pencil />} />
<Button style={{ margin: "0" }} onClick={() => console.log(`Delete group ${group.groupName}`)} appearance="pill" icon={<Trash />} />
<Button style={{ margin: "0" }} onClick={() => (newDevicenHandler(group._id, group.groupName))} appearance="pill" icon={<Plus />} />
<Button style={{ margin: "0" }} onClick={() => (editGroupHandler(group._id, group.groupName))} appearance="pill" icon={<Pencil />} />
<Button style={{ margin: "0" }} onClick={() => (groupDeleteHandler(group._id, group.groupName))} appearance="pill" icon={<Trash />} />
</div>
</SingleGroup>
));
Expand Down Expand Up @@ -202,7 +228,7 @@ function GroupsList() {
<Select.Option label="200" value="200" />
</Select>
<Paginator
onChange={paginationHandler}
onChange={(event, { page }) => (paginationHandler(page, openedGroupId))}
current={pageNum}
alwaysShowLastPageLink
totalPages={totalPages}
Expand Down Expand Up @@ -237,6 +263,8 @@ function GroupsList() {
</div>
</GroupDevices>
<AddDeviceModal />
<DeleteModal deleteName={GrCtx.deleteName}
handleDelete={() => (deleteModalRequest())}/>
</GroupsContent>
);
}
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/manager/src/styles/groups/GroupsStyle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ const Pagination = styled.div`
align-items: center;
padding-left: 22px;
padding-right: 22px;
box-sizing: border-box;
border-bottom: 1px #2B3033 solid;
& > button{
Expand Down

0 comments on commit 5bfb791

Please sign in to comment.