Skip to content

F
FMS_Project_Frontend
Commit b2fb1362 authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

ShowTrapDetailsAndWebSocket

parent cb512879
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 248 deletions
packages/admin/src/components/dynamic-form/form-header/index.tsx
View file @ b2fb1362
......@@ -21,10 +21,10 @@ const DynamicFormHeader = ({ className, title }: DynamicFormHeaderProps) => {
<Col>
<Row gutter={8}>
<Col>
<FmsButton borderRadius= {"30"} type={"secondary"}>{t("cancel")}</FmsButton>
<FmsButton borderRadius= {32} type={"secondary"}>{t("cancel")}</FmsButton>
</Col>
<Col>
<FmsButton borderRadius= {"30"} htmlType={"submit"} type={"primary"}>
<FmsButton borderRadius= {32} type={"primary"}>
{t("save")}
</FmsButton>
</Col>
......
packages/admin/src/components/dynamic-form/items/date-picker-box/index.tsx
View file @ b2fb1362
......@@ -7,7 +7,6 @@ const DatePickerBox = ({ name, className, label, ...rest }: InputBoxDto) => {
return (
<div >
<div>{label}</div>
{/*// @ts-ignore*/}
<Field name={name}>
{({ field, form }: FieldProps) => (
<DatePicker
......@@ -15,7 +14,7 @@ const DatePickerBox = ({ name, className, label, ...rest }: InputBoxDto) => {
{...rest}
className={`fullContent ${className}`}
value={field.value ? moment(field.value) : null}
onChange={(date) => {
onChange={(date:any) => {
form.setFieldValue(name, date ? date.toISOString() : null);
form.setFieldTouched(name, true, false);
}}
......
packages/admin/src/features/show-traps/columns.tsx
View file @ b2fb1362
export const Columns = [
import {Col, DatePicker, Input, Row } from "antd";
import FmsButton from "../../../../shared-library/src/buttons/fms-button";
export function getColumns(setModalProps:any) {
function changeTimestamp(timestamp:any){
const date = new Date(timestamp);
const hours = date.getHours().toString();
const minutes = date.getMinutes().toString();
const seconds = date.getSeconds().toString();
return date.toDateString() + " "+ hours+ ":" + minutes +":"+ seconds;
}
const { RangePicker } = DatePicker;
return [
{
title: "timestamp",
dataIndex: "timestamp",
key: "timestamp",
resizable: true,
defaultSortOrder: 'descend',
render: (timestamp:any) => <>{changeTimestamp(timestamp)}</>,
sorter: (a:any, b:any) => a.timestamp - b.timestamp,
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }:any) => (
<div style={{ padding: 8 }}>
<RangePicker
value={selectedKeys[0]}
onChange={value => setSelectedKeys(value ? [value] : [])}
onOk={confirm}
style={{ marginBottom: "8px", display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
style={{ marginRight: 8 }}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => {
const [start, end] = value;
const date = new Date(record.timestamp);
return (
(!start || date >= start.startOf('day')) &&
(!end || date <= end.endOf('day'))
);
},
},
{
title: "agent-address",
dataIndex: "agentAddress",
key: "agent-address",
key: "agentAddress",
resizable: true,
sorter: (a:any, b:any) => a.agentAddress.localeCompare(b.agentAddress),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.agentAddress.toLowerCase().includes(value.toLowerCase()),
},
{
title: "time-stamp",
dataIndex: "timeStamp",
key: "time-stamp",
title: "severity",
dataIndex: "severity",
key: "severity",
resizable: true,
render: (text:any) => <Col className={`severity-${text}`}>{text.toUpperCase()}</Col>,
sorter: (a:any, b:any) => a.severity.localeCompare(b.severity),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.severity.toLowerCase().includes(value.toLowerCase()),
},
{
title: "severety",
dataIndex: "severety",
key: "severety",
title: "specific-trap",
dataIndex: "specificTrap",
key: "specificTrap",
resizable: true,
sorter: (a:any, b:any) => a.specificTrap.localeCompare(b.specificTrap),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.specificTrap.toLowerCase().includes(value.toLowerCase()),
},
{
title: "site",
dataIndex: "site",
key: "site",
title: "generic-trap",
dataIndex: "genericTrap",
key: "genericTrap",
resizable: true,
sorter: (a:any, b:any) => a.genericTrap.localeCompare(b.genericTrap),
sortDirections: ['descend', 'ascend'],
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }:any) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search"
value={selectedKeys[0]}
onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Row gutter={12}>
<Col>
<FmsButton
type="primary"
onClick={confirm}
size="small"
borderRadius={10}
>
{"Search"}
</FmsButton>
</Col>
</Row>
</div>
),
onFilter: (value:any, record:any) => record.genericTrap.toLowerCase().includes(value.toLowerCase()),
},
{
title: "device-type",
dataIndex: "deviceType",
key: "device-type",
title: "Actions",
key: "actions",
render: (text: any, record: any) => (
<FmsButton
type="primary"
onClick={() => setModalProps({ isOpen: true, variableBinding: record.variableBindings })}
>
Show Details
</FmsButton>
),
},
]
\ No newline at end of file
];
};
\ No newline at end of file
packages/admin/src/features/show-traps/data-source.tsx
View file @ b2fb1362
// import { parseISO } from "date-fns";
type RoutesType = {
id: string;
agentAddress: string;
timeStamp: string;
severety: string;
site: string;
deviceType: string;
timestamp: any;
severity: string;
specificTrap: string;
genericTrap: string;
};
export const DataSource: Array<RoutesType> = [
{
id: "1",
agentAddress: "string1",
timeStamp: "Date1",
severety: "strin1",
site: "string1",
deviceType: "string1",
timestamp: 1679761119 * 1000,
severity: "warning",
specificTrap: "string1",
genericTrap: "string1",
},
{
id: "2",
agentAddress: "string2",
timeStamp: "Date2",
severety: "strin2",
site: "string2",
deviceType: "string2",
timestamp: 1679781139 * 1000,
severity: "error",
specificTrap: "string2",
genericTrap: "string2",
},
];
packages/admin/src/features/show-traps/index.tsx
View file @ b2fb1362
import * as React from "react";
import { useState } from "react";
import { useState, useEffect } from "react";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
import FmsTable from "../../../../shared-library/src/tables/fms-table";
import { Columns } from "./columns";
import { getColumns } from "./columns";
import { DataSource } from "./data-source";
import ShowDetailsPopup from "./show-details-popup";
export default function ShowTraps() {
const { t } = useTranslation(TranslationFiles.COMMON);
const [columns, setColumns] = useState({
columns: Columns
});
const [modalProps, setModalProps] = useState({ isOpen: false, variableBinding: null });
const [data, setData] = useState([]);
let socket: WebSocket | null = null;
const [data, setData] = useState({
dataSource: DataSource
});
function getWebSocket() {
if (!socket) {
socket = new WebSocket("ws://192.168.26.46:6647/fms-websocket");
socket.onopen = function () {
console.log("Connected to WebSocket server");
};
socket.onmessage = function (event) {
const message = JSON.parse(event.data);
const newData = message.new_val;
const transformedData = {
id: newData.id,
agentAddress: newData.agentAddress,
timestamp: newData.timestamp,
severity: newData.severity,
specificTrap: newData.specificTrap,
genericTrap: newData.genericTrap,
variableBindings: newData.variableBindings,
};
// console.log(transformedData);
setData((prevData: any) => [...prevData, transformedData]);
};
socket.onclose = function () {
console.log("Disconnected from WebSocket server");
socket = null;
};
}
return socket;
}
useEffect(() => {
const socket = getWebSocket();
return () => {
socket.close();
};
}, []);
return (
<div>
<FmsTable
title={t("traps")}
columns={columns.columns}
data={{ dataSource: data.dataSource, total: data.dataSource.length }}
t={t}
setData= {setData}
setColumns={setColumns}
/>
</div>
<div>
<FmsTable
title={t("traps")}
columns={getColumns(setModalProps)}
data={data}
t={t}
setData={setData}
/>
<ShowDetailsPopup
modalProps={modalProps}
setModalProps={setModalProps}
/>
</div>
);
}
packages/admin/src/features/show-traps/show-details-popup.tsx 0 → 100644
View file @ b2fb1362
import React, {useState, useEffect} from "react";
import { Modal } from "antd";
import useTranslation from "next-translate/useTranslation";
import { TranslationFiles } from "@/src/data/core";
interface Props {
modalProps: any;
setModalProps: any;
}
export default function ShowDetailsPopup({ modalProps, setModalProps }: Props) {
const { t } = useTranslation(TranslationFiles.COMMON);
const [variableBinding,setVariableBinding] = useState(null);
const [isModalOpen,setIsModalOpen] = useState(false);
const handleCancel = () => {
setModalProps(false,null);
};
useEffect(() => {
setVariableBinding(modalProps.variableBinding);
setIsModalOpen(modalProps.isOpen);
}, [modalProps])
return (
<Modal title="Trap Details" visible={isModalOpen} onOk={handleCancel} onCancel={handleCancel}>
<div>
{variableBinding &&
variableBinding.map((item: any, index: number) => (
<div key={index}>
<span>{item.oid}</span>: <span>{item.value}</span>
</div>
))}
</div>
</Modal>
);
}
\ No newline at end of file
packages/admin/src/features/show-users/columns.tsx
View file @ b2fb1362
......@@ -31,8 +31,8 @@ const EditButton = ({ id }) => {
const router = useRouter(); // Get the router object from useRouter
const handleEditClick = () => {
router.push(`/edit-user/${id}`); // Navigate to the edit page URL
router.push(`/edit-user`); // Navigate to the edit page URL
};
return <FmsButton type = "link" onClick={handleEditClick}>Edit</FmsButton>; // Render a button with the handleEditClick function as the onClick handler
return <FmsButton type = "link" onClick={handleEditClick}>Edit</FmsButton>;
};
\ No newline at end of file
packages/admin/src/features/show-users/index.tsx
View file @ b2fb1362
......@@ -10,16 +10,16 @@ export default function ShowUsers() {
const [columns, setColumns] = useState({
columns: Columns
});
const [data, setData] = useState({
dataSource: DataSource
});
const [data, setData] = useState(DataSource);
return (
<div>
<FmsTable
title={t("users")}
columns={columns.columns}
data={{ dataSource: data.dataSource, total: data.dataSource.length }}
data={data}
rowSelection={{
type: "checkbox",
}}
t={t}
setData= {setData}
setColumns={setColumns}
......
packages/admin/src/features/web-socket/index.tsx 0 → 100644
View file @ b2fb1362
const websocket = new WebSocket("ws://192.168.26.46:6647/fms-websocket");
websocket.onopen = function () {
console.log("Connected to WebSocket server");
};
websocket.onclose = function () {
console.log("Disconnected from WebSocket server");
};
export default websocket;
\ No newline at end of file
packages/admin/src/styles/global.less
View file @ b2fb1362
......@@ -144,3 +144,23 @@ a {
transform: rotate(405deg);
}
}
.severity-WARNING {
color: #e2d303;
font-weight: 1000;
// font-size: larger;
font-family: 'Times New Roman', Times, serif;
}
.severity-ERROR {
color: #ff2306;
font-weight: 1000;
// font-size: larger;
font-family: 'Times New Roman', Times, serif;
}
.severity-INFO {
color: #06ff83;
font-weight: 1000;
// font-size: larger;
font-family: 'Times New Roman', Times, serif;
}
\ No newline at end of file
packages/shared-library/src/buttons/fms-button.tsx
View file @ b2fb1362
......@@ -2,7 +2,7 @@ import React, { FunctionComponent, MouseEventHandler, ReactNode } from "react";
import { Button } from "antd";
import classes from "./styles.module.css";
export type ButtonTypes = "primary" | "secondary" | "traity" | "link";
export type ButtonTypes = "primary" | "secondary" | "traity" | "link" | "danger";
interface fmsButtonProps {
children: ReactNode;
......
packages/shared-library/src/buttons/styles.module.css
View file @ b2fb1362
......@@ -25,6 +25,17 @@
color: #FFFFFF !important;
border: 1px solid var(--primary-blue-200) !important;
}
.danger {
background-color: rgb(250, 5, 5);
color: #FFFFFF;
border: 1px solid rgb(250, 5, 5);
}
.danger:hover {
background-color: rgb(252, 139, 139);
color: #FFFFFF !important;
border: 1px solid rgb(250, 5, 5) !important;
}
.secondary {
background-color: #FFFFFF;
......@@ -39,9 +50,9 @@
}
.traity {
background-color: var(--secondary-gray);
background-color: var(--primary-indego-50);
color: var(--primary-blue-700);
border: 1px solid var(--secondary-gray);
border: 1px solid var(--secondary-gray-100);
}
.traity:hover {
......@@ -51,15 +62,15 @@
}
.link {
background-color: #08348d;
background-color: var( --primary-blue-600);
color: var(--primary-indego-50);
border: none;
box-shadow: none !important;
}
.link:hover {
background-color: rgba(121, 236, 67, 0.1);
color: var(--primary-gray-600) !important;
background-color: var(--primary-blue-700);
color: var(--secondary-gray-100) !important;
border: none !important;
box-shadow: none !important;
}
......
packages/shared-library/src/tables/fms-table.tsx
View file @ b2fb1362
import React, { FunctionComponent, useState, useEffect } from "react";
import React, { FunctionComponent} from "react";
import {
Table,
Tag,
Dropdown,
Menu,
Modal,
Checkbox,
Input,
Col,
Row,
} from "antd";
import FmsButton from "../buttons/fms-button";
import { MoreOutlined, SearchOutlined } from "@ant-design/icons";
import classes from "./styles.module.css";
interface fmsTableProps {
title: string;
columns: Array<any>;
data: {
dataSource: Array<any>;
total: number;
};
data: Array<any>;
t: Function;
setData: Function;
setColumns: Function;
rowSelection:any;
}
const FmsTable: FunctionComponent<fmsTableProps> = ({
title,
......@@ -31,140 +20,9 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
t,
setData,
setColumns,
rowSelection
}) => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [visibleColumns, setVisibleColumns] = useState(
columns.map((col: any) => col.key)
);
const [selectedColumnKeys, setSelectedColumnKeys] = useState([]);
const [deleteColumnModalVisible, setDeleteColumnModalVisible] =
useState(false);
const [searchText, setSearchText] = useState("");
const [originalData, setOriginalData] = useState(data.dataSource);
// useEffect(() => {
// // Store the original data when the component mounts
// setOriginalData(data.dataSource);
// }, [data.dataSource]);
const handleRowSelectionChange = (selectedRowKeys: any) => {
setSelectedRowKeys(selectedRowKeys);
};
const handleMenuClick = (event: any) => {
const { key } = event;
switch (key) {
case "delete-row":
setData((prevData: any) => ({
...prevData,
dataSource: prevData.dataSource.filter(
(item: any) => !selectedRowKeys.includes(item.id)
),
}));
setSelectedRowKeys([]);
break;
case "delete-return-column":
setDeleteColumnModalVisible(true);
break;
case "orderBy":
// Code to order the table by the selected column
break;
default:
break;
}
};
const handleDeleteColumnModalOk = () => {
setVisibleColumns(
columns
.map((col) => col.key)
.filter((colKey) => !selectedColumnKeys.includes(colKey))
);
setDeleteColumnModalVisible(false);
};
const handleDeleteColumnModalCancel = () => {
setDeleteColumnModalVisible(false);
};
const handleColumnCheckboxChange = (e: any) => {
const colKey = e.target.value;
const checked = e.target.checked;
setSelectedColumnKeys((prevSelectedColumnKeys) => {
if (checked) {
return [...prevSelectedColumnKeys, colKey];
} else {
return prevSelectedColumnKeys.filter((key) => key !== colKey);
}
});
};
const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(e.target.value);
};
const handleSearch = () => {
setData((prevData: any) => ({
...prevData,
dataSource: originalData,
}));
const filteredData = data.dataSource.filter((item: any) =>
Object.values(item).some(
(value) =>
typeof value === "string" &&
value.toLowerCase().includes(searchText.toLowerCase())
)
);
// Update the dataSource prop of the Table component with the filtered data
setData((prevData: any) => ({
...prevData,
dataSource: filteredData,
}));
};
const handleResetSearch = () => {
setSearchText("");
setData((prevData: any) => ({
...prevData,
dataSource: originalData,
}));
};
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="delete-row">{t("delete-row")}</Menu.Item>
<Menu.Item key="delete-return-column">
{t("delete-return-column")}
</Menu.Item>
<Menu.Item key="orderBy">{t("order-by-column")}</Menu.Item>
</Menu>
);
const deleteColumnModal = (
<Modal
open={deleteColumnModalVisible}
onOk={handleDeleteColumnModalOk}
onCancel={handleDeleteColumnModalCancel}
>
<p>{t("select-columns-to-delete-or-return")}</p>
{columns.map((col) => (
<Checkbox
key={col.key}
value={col.key}
checked={selectedColumnKeys.includes(col.key)}
onChange={handleColumnCheckboxChange}
>
{col.title}
</Checkbox>
))}
</Modal>
);
const visibleColumnsData = columns.filter((col) =>
visibleColumns.includes(col.key)
);
return (
<div data-testid="fms-table">
<div className={classes.tableTitleContainer}>
......@@ -173,51 +31,22 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
data-testid="fms-table-total-count"
className={classes.totalCountTag}
>
{`${data.total} row`}
{`${data.length} row`}
</Tag>
<Row gutter={12}>
<Col>
<Input
placeholder={t("search")}
value={searchText}
onChange={handleSearchTextChange}
onPressEnter={handleSearch}
/>
</Col>
<Col>
<FmsButton type="secondary" onClick={handleSearch}>
<SearchOutlined />
</FmsButton>
</Col>
<Col>
<FmsButton type="primary" onClick={handleResetSearch}>
{t("reset")}
</FmsButton>
</Col>
<Col span={24}>
<Dropdown overlay={menu} placement="bottomRight">
<div className={classes.moreIcon}>
<MoreOutlined />
</div>
</Dropdown>
</Col>
</Row>
</div>
<Table
className="fms-table"
columns={visibleColumnsData}
dataSource={data.dataSource}
rowSelection={{
type: "checkbox",
selectedRowKeys,
onChange: handleRowSelectionChange,
}}
columns={columns}
dataSource={data}
rowSelection = {rowSelection}
bordered
scroll={{ x: 1000 }}
pagination={true}
pagination={{ position: ['bottomLeft'],
pageSizeOptions: ["10", "20", "50", "100"],
showSizeChanger: true, locale: { items_per_page: "" } }}
rowKey={"id"}
// onChange={onChange}
/>
{deleteColumnModal}
</div>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab