Skip to content

Commit

Permalink
fix: working on groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@wojtekzyla
wojtekzyla committed Jan 4, 2023
1 parent 1bb9e10 commit a61ab32
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 69 deletions.
160 changes: 93 additions & 67 deletions frontend/packages/manager/src/components/groups/GroupsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,31 @@ import AddDeviceModal from "./AddDeviceModal";
import ButtonsModal from "../ButtonsModal";
import DeleteModal from "../DeleteModal";
import Paginator from '@splunk/react-ui/Paginator';
import Select from '@splunk/react-ui/Select';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import { backendHost } from "../../host";
import ErrorsModalContext from "../../store/errors-modal-contxt";
import Plus from '@splunk/react-icons/Plus';
import Trash from '@splunk/react-icons/Trash';
import Pencil from '@splunk/react-icons/Pencil';
import { GroupsContent, GroupsNames, GroupsNamesHeader, SingleGroup, GroupDevices } from "../../styles/groups/GroupsStyle";
import { GroupsContent, GroupsNames, GroupsNamesHeader,
SingleGroup, GroupDevices, Pagination } from "../../styles/groups/GroupsStyle";
import Select from '@splunk/react-ui/Select';



function GroupsList() {
const columns = [
{sortKey: 'address', label: 'Address'},
{sortKey: 'port', label: 'Port'},
{sortKey: 'version', label: 'Version'},
{sortKey: 'community', label: 'Community'},
{sortKey: 'secret', label: 'Secret'},
{sortKey: 'securityEngine', label: 'Security Engine'},
{sortKey: `actions`, label: 'Actions'},
];

const [groups, setGroups] = useState([]);
const [openedGroups, setOpenedGroups] = useState({});
const [selectedGroup, setSelectedGroup] = useState({});
const GrCtx = useContext(GroupContext);
const BtnCtx = useContext(ButtonsContext);
const ErrCtx = useContext(ErrorsModalContext);
Expand All @@ -41,16 +52,16 @@ function GroupsList() {
if (isMounted){
setGroups(response.data);
let existingGroups = [];
let opened = {};
let selected = {};
for (let group of response.data){
opened[group._id] = false;
selected[group._id] = false;
existingGroups.push(group._id);
}
// If page was reloaded after updating one of devices, open tab of that group
if (GrCtx.editedGroupId && existingGroups.includes(GrCtx.editedGroupId)){
openCollapsible(GrCtx.editedGroupId, pageNum);
selectGroup(GrCtx.editedGroupId, GrCtx.groupName, pageNum);
}else{
setOpenedGroups(opened);
setSelectedGroup(selected);
}
}
});
Expand Down Expand Up @@ -92,18 +103,18 @@ function GroupsList() {
GrCtx.setDeleteUrl(`http://${backendHost}/groups/delete/${groupId}`);
};

const openCollapsible = (groupId, page) => {
const selectGroup = (groupId, groupName, page) => {
setOpenedGroupId(groupId)
const opened = {};
opened[groupId] = true;
setOpenedGroups(prev => {
const selected = {};
selected[groupId] = true;
setSelectedGroup(prev => {
for (const prop in prev){
prev[prop] = false;
}
return {...prev, ...opened}}
return {...prev, ...selected}}
);

// If last item from from current page was deleted, page variable
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.
axios.get(`http://${backendHost}/group/${groupId}/devices/count`)
Expand All @@ -122,17 +133,19 @@ function GroupsList() {
});
}

const closeCollapsible = (groupId) => {
const opened = {};
opened[groupId] = false;
setOpenedGroups(prev => {return {...prev, ...opened}});
GrCtx.setDevices([]);
}
const paginationHandler = (page, groupId) => {
selectGroup(groupId, GrCtx.groupName, page);
};

const handleRowClick = (row, groupId) => {
GrCtx.setButtonsOpen(true);
GrCtx.setIsDeviceEdit(true);
GrCtx.setDeleteName(`${row.address}:${row.port}`)
const devicesPerPageHandler = (e, { value }) => {
setDevicesPerPage(value);
setPageNum(1);
GrCtx.makeGroupsChange();
};


const deviceEditHandler = (row) => {
/*GrCtx.setIsDeviceEdit(true);
GrCtx.setGroupId(groupId);
GrCtx.setDeviceId(row._id);
GrCtx.setAddress(row.address);
Expand All @@ -141,62 +154,30 @@ function GroupsList() {
GrCtx.setCommunity(row.community);
GrCtx.setSecret(row.secret);
GrCtx.setSecurityEngine(row.securityEngine);
GrCtx.setAddDeviceOpen(true);*/
console.log("edit device");
};

const handlePagination = (page, groupId) => {
openCollapsible(groupId, page);
};

const handleDevicesPerPage = (e, { value }) => {
setDevicesPerPage(value);
setPageNum(1);
GrCtx.makeGroupsChange();
};

const buttonsRequestDeleteDevice = (context) => {
context.setButtonsOpen(false);
context.setDeleteUrl(`http://${backendHost}/devices/delete/${GrCtx.deviceId}`)
context.setDeleteOpen(true);
};

const buttonsRequestEditDevice = (context) => {
context.setButtonsOpen(false);
context.setAddDeviceOpen(true);
};

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

const groupsList = groups.map((group) => (
<SingleGroup key={createDOMID()}>
<SingleGroup onClick={() => selectGroup(group._id, group.groupName, 1)} style={{ backgroundColor: (selectedGroup[group._id]) ? "#E1E6EB" : "#FFFFF" }} key={createDOMID()}>
<P>
{group.groupName}
</P>
<div>
<Button style={{ margin: "0" }} onClick={() => console.log("dodaj device")} appearance="pill" icon={<Plus />} />
<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={() => (deleteGroupButtonHandler(group._id, group.groupName))} appearance="pill" icon={<Trash />} />
<Button style={{ margin: "0" }} onClick={() => console.log(`Delete group ${group.groupName}`)} appearance="pill" icon={<Trash />} />
</div>
</SingleGroup>
));


return (
<GroupsContent>
<GroupsNames>
Expand All @@ -209,8 +190,53 @@ function GroupsList() {
{groupsList}
</GroupsNames>
<GroupDevices>
TEST
<div style={{width: '100%' }}>
<Pagination>
<Select appearance="pill" suffixLabel="inventory items per page"
value={devicesPerPage} onChange={devicesPerPageHandler}
defaultValue={"3"}>
<Select.Option label="3" value="3" />
<Select.Option label="10" value="10" />
<Select.Option label="50" value="50" />
<Select.Option label="100" value="100" />
<Select.Option label="200" value="200" />
</Select>
<Paginator
onChange={paginationHandler}
current={pageNum}
alwaysShowLastPageLink
totalPages={totalPages}
/>
</Pagination>
<Table stripeRows resizableFillLayout>
<Table.Head>
{columns.map((headData) => (
<Table.HeadCell key={createDOMID()} width={headData.label == "Actions" ? 100 : "auto"}>
{headData.label}
</Table.HeadCell>
))}
</Table.Head>
<Table.Body>
{GrCtx.devices
.map((row) => (
<Table.Row key={createDOMID()} >
<Table.Cell>{row.address}</Table.Cell>
<Table.Cell>{row.port}</Table.Cell>
<Table.Cell>{row.version}</Table.Cell>
<Table.Cell>{row.community}</Table.Cell>
<Table.Cell>{row.secret}</Table.Cell>
<Table.Cell>{row.securityEngine}</Table.Cell>
<Table.Cell>
<Button onClick={() => deviceEditHandler(JSON.parse(JSON.stringify(row)))} icon={<Pencil />} />
<Button onClick={() => deviceDeleteHandler(JSON.parse(JSON.stringify(row)))} icon={<Trash />} />
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</div>
</GroupDevices>
<AddDeviceModal />
</GroupsContent>
);
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/packages/manager/src/components/inventory/InventoryList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ class SortableColumns extends Component {
alwaysShowLastPageLink
totalPages={this.state.totalPages}
/>
</Pagination>
</Pagination>
<Table stripeRows resizableFillLayout>
<Table.Head>
{columns.map((headData) => (
Expand Down
25 changes: 24 additions & 1 deletion frontend/packages/manager/src/styles/groups/GroupsStyle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const GroupsContent = styled.div`
display: flex;
border-top: 1px #2B3033 solid;
height: 100%;
width: 100%;
`;

const GroupsNames = styled.div`
Expand Down Expand Up @@ -54,6 +55,28 @@ const SingleGroup = styled.div`
`;

const GroupDevices = styled.div`
width: 100%;
`;

const Pagination = styled.div`
width: 100%;
display: flex;
height: 53px;
justify-content: space-between;
align-items: center;
padding-left: 22px;
padding-right: 22px;
border-bottom: 1px #2B3033 solid;
& > button{
padding-left: 0;
padding-right: 0;
}
& > button > span > span:nth-child(1){
margin-right: 6px;
padding: 0;
}
`;

export { GroupsContent, GroupsNames, GroupsNamesHeader, SingleGroup, GroupDevices };
export { GroupsContent, GroupsNames, GroupsNamesHeader, SingleGroup, GroupDevices, Pagination };

0 comments on commit a61ab32

Please sign in to comment.