Update application event logging and dataset variable configurations. Removed obsolete PLC connection event, added new application start event, and refined variable definitions for clarity and consistency.
This commit is contained in:
parent
2ed5acf039
commit
bb275dd279
|
|
@ -1,16 +1,5 @@
|
|||
{
|
||||
"events": [
|
||||
{
|
||||
"timestamp": "2025-07-17T15:42:38.052471",
|
||||
"level": "info",
|
||||
"event_type": "plc_connection",
|
||||
"message": "Successfully connected to PLC 10.1.33.11",
|
||||
"details": {
|
||||
"ip": "10.1.33.11",
|
||||
"rack": 0,
|
||||
"slot": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-07-17T15:42:38.053687",
|
||||
"level": "info",
|
||||
|
|
@ -10474,8 +10463,15 @@
|
|||
"event_type": "application_started",
|
||||
"message": "Application initialization completed successfully",
|
||||
"details": {}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-08-13T23:35:44.039580",
|
||||
"level": "info",
|
||||
"event_type": "application_started",
|
||||
"message": "Application initialization completed successfully",
|
||||
"details": {}
|
||||
}
|
||||
],
|
||||
"last_updated": "2025-08-13T23:30:43.779703",
|
||||
"last_updated": "2025-08-13T23:35:44.039580",
|
||||
"total_entries": 1000
|
||||
}
|
||||
|
|
@ -4,28 +4,28 @@
|
|||
"dataset_id": "DAR",
|
||||
"variables": [
|
||||
{
|
||||
"area": "db",
|
||||
"db": 1011,
|
||||
"name": "UR29_Brix",
|
||||
"area": "db",
|
||||
"db": 1011,
|
||||
"offset": 1322,
|
||||
"type": "real",
|
||||
"streaming": true
|
||||
"streaming": true,
|
||||
"type": "real"
|
||||
},
|
||||
{
|
||||
"area": "db",
|
||||
"db": 1011,
|
||||
"name": "UR29_ma",
|
||||
"area": "db",
|
||||
"db": 1011,
|
||||
"offset": 1296,
|
||||
"type": "real",
|
||||
"streaming": true
|
||||
"streaming": true,
|
||||
"type": "real"
|
||||
},
|
||||
{
|
||||
"name": "fUR29_Brix",
|
||||
"area": "db",
|
||||
"db": 1011,
|
||||
"name": "fUR29_Brix",
|
||||
"offset": 1322,
|
||||
"type": "real",
|
||||
"streaming": true
|
||||
"streaming": true,
|
||||
"type": "real"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
|
|
@ -14,17 +14,11 @@ import {
|
|||
CardHeader,
|
||||
Button,
|
||||
Text,
|
||||
Grid,
|
||||
Flex,
|
||||
Spacer,
|
||||
HStack,
|
||||
useColorModeValue,
|
||||
useToast,
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionButton,
|
||||
AccordionPanel,
|
||||
AccordionIcon,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
Spinner,
|
||||
|
|
@ -52,7 +46,7 @@ import allWidgets from '../components/widgets/AllWidgets'
|
|||
import LayoutObjectFieldTemplate from '../components/rjsf/LayoutObjectFieldTemplate'
|
||||
import * as api from '../services/api'
|
||||
|
||||
// Pure RJSF StatusBar Component
|
||||
// StatusBar Component - Real-time PLC status with action buttons
|
||||
function StatusBar({ status, onRefresh }) {
|
||||
const plcConnected = !!status?.plc_connected
|
||||
const streaming = !!status?.streaming
|
||||
|
|
@ -255,7 +249,7 @@ function StatusBar({ status, onRefresh }) {
|
|||
)
|
||||
}
|
||||
|
||||
// Pure RJSF Configuration Panel with Full UI Schema Layout Support
|
||||
// PLC Configuration Panel - Fixed to PLC & UDP settings only
|
||||
function ConfigurationPanel({ schemaData, formData, onFormChange, onSave, saving, message }) {
|
||||
const cardBg = useColorModeValue('white', 'gray.700')
|
||||
const borderColor = useColorModeValue('gray.200', 'gray.600')
|
||||
|
|
@ -316,7 +310,7 @@ function ConfigurationPanel({ schemaData, formData, onFormChange, onSave, saving
|
|||
)
|
||||
}
|
||||
|
||||
// Pure RJSF Dataset Manager
|
||||
// Dataset Manager - Type 3 Form Pattern implementation
|
||||
function DatasetManager() {
|
||||
const [datasetsConfig, setDatasetsConfig] = useState(null)
|
||||
const [variablesConfig, setVariablesConfig] = useState(null)
|
||||
|
|
@ -395,7 +389,7 @@ function DatasetManager() {
|
|||
}
|
||||
}
|
||||
|
||||
// Get filtered variables for selected dataset (Type 3 Form Pattern)
|
||||
// Get filtered variables for selected dataset
|
||||
const getSelectedDatasetVariables = () => {
|
||||
if (!variablesConfig?.variables || !selectedDatasetId) {
|
||||
return { variables: [] }
|
||||
|
|
@ -405,7 +399,7 @@ function DatasetManager() {
|
|||
return datasetVars || { variables: [] }
|
||||
}
|
||||
|
||||
// Update variables for selected dataset (Type 3 Form Pattern)
|
||||
// Update variables for selected dataset
|
||||
const updateSelectedDatasetVariables = (newVariableData) => {
|
||||
if (!variablesConfig?.variables || !selectedDatasetId) return
|
||||
|
||||
|
|
@ -499,12 +493,12 @@ function DatasetManager() {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel p={0} pt={4}>
|
||||
{/* Type 3 Form: Filtered Array Forms with Combo Selectors */}
|
||||
{/* Dataset Variables Configuration with Combo Selector */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Heading size="md">Dataset Variables Configuration</Heading>
|
||||
<Text fontSize="sm" color="gray.500" mt={1}>
|
||||
Type 3 Form: Select a dataset, then configure its variables (combo + filtered form pattern)
|
||||
Select a dataset, then configure its PLC variables and streaming settings
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
|
|
@ -512,7 +506,7 @@ function DatasetManager() {
|
|||
<VStack spacing={4} align="stretch">
|
||||
<Box>
|
||||
<Text fontSize="sm" fontWeight="bold" mb={2}>
|
||||
🎯 Step 1: Select Dataset
|
||||
🎯 Select Dataset
|
||||
</Text>
|
||||
<Select
|
||||
value={selectedDatasetId}
|
||||
|
|
@ -533,19 +527,19 @@ function DatasetManager() {
|
|||
)}
|
||||
</Box>
|
||||
|
||||
{/* Step 2: Filtered Variables Form */}
|
||||
{/* Variables Configuration Form */}
|
||||
{selectedDatasetId && (
|
||||
<Box>
|
||||
<Divider mb={4} />
|
||||
<Text fontSize="sm" fontWeight="bold" mb={2}>
|
||||
⚙️ Step 2: Configure Variables for Dataset "{selectedDatasetId}"
|
||||
⚙️ Configure Variables for Dataset "{selectedDatasetId}"
|
||||
</Text>
|
||||
|
||||
{/* Create a simplified schema for single dataset variables */}
|
||||
{/* Simplified schema for selected dataset variables */}
|
||||
{(() => {
|
||||
const selectedDatasetVars = getSelectedDatasetVariables()
|
||||
|
||||
// Create a simplified schema for just this dataset's variables
|
||||
// Schema for this dataset's variables
|
||||
const singleDatasetSchema = {
|
||||
type: "object",
|
||||
properties: {
|
||||
|
|
@ -713,30 +707,7 @@ function EventsDisplay({ events, loading, onRefresh }) {
|
|||
)
|
||||
}
|
||||
|
||||
// Main Dashboard Component with Pure RJSF and Full UI Schema Layout Support
|
||||
//
|
||||
// This dashboard now supports comprehensive UI schema features:
|
||||
//
|
||||
// 1. Layout Management:
|
||||
// - ui:layout: Grid-based field layouts with customizable column spans
|
||||
// - ui:order: Field ordering control
|
||||
// - ui:column: Responsive column widths (1-12 grid system)
|
||||
//
|
||||
// 2. Widget Support:
|
||||
// - Standard widgets: text, textarea, select, checkbox, updown
|
||||
// - Custom widgets: VariableSelectorWidget, PlcWidgets
|
||||
// - Widget aliases for backward compatibility
|
||||
//
|
||||
// 3. Field Templates:
|
||||
// - LayoutObjectFieldTemplate: Handles ui:layout rendering
|
||||
// - Responsive grid system with Chakra UI SimpleGrid
|
||||
// - Proper field grouping and spacing
|
||||
//
|
||||
// 4. UI Schema Examples:
|
||||
// - ui:layout: [[ { "name": "field1", "width": 6 }, { "name": "field2", "width": 6 } ]]
|
||||
// - ui:widget: "updown", "checkbox", "variableSelector", etc.
|
||||
// - ui:help, ui:placeholder, ui:readonly for enhanced UX
|
||||
//
|
||||
// Main Dashboard Component - PLC S7-31x Streamer & Logger
|
||||
export default function Dashboard() {
|
||||
const [status, setStatus] = useState(null)
|
||||
const [statusLoading, setStatusLoading] = useState(true)
|
||||
|
|
@ -750,8 +721,6 @@ export default function Dashboard() {
|
|||
const [events, setEvents] = useState([])
|
||||
const [eventsLoading, setEventsLoading] = useState(false)
|
||||
|
||||
const sseRef = useRef(null)
|
||||
|
||||
// Load status once
|
||||
const loadStatus = useCallback(async () => {
|
||||
try {
|
||||
|
|
@ -766,35 +735,9 @@ export default function Dashboard() {
|
|||
}
|
||||
}, [])
|
||||
|
||||
// SSE subscription for real-time updates (temporarily disabled due to MIME type issue)
|
||||
// Real-time status updates via polling
|
||||
const subscribeSSE = useCallback(() => {
|
||||
// TODO: Fix SSE endpoint to return proper text/event-stream MIME type
|
||||
// if (sseRef.current) {
|
||||
// sseRef.current.close()
|
||||
// }
|
||||
|
||||
// const eventSource = new EventSource('/api/status')
|
||||
// sseRef.current = eventSource
|
||||
|
||||
// eventSource.onmessage = (event) => {
|
||||
// try {
|
||||
// const data = JSON.parse(event.data)
|
||||
// setStatus(data)
|
||||
// setStatusError('')
|
||||
// } catch (error) {
|
||||
// console.error('SSE parse error:', error)
|
||||
// }
|
||||
// }
|
||||
|
||||
// eventSource.onerror = () => {
|
||||
// console.warn('SSE connection error, will retry...')
|
||||
// }
|
||||
|
||||
// return () => {
|
||||
// eventSource.close()
|
||||
// }
|
||||
|
||||
// For now, use polling instead
|
||||
// Use polling for real-time updates (every 5 seconds)
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
const statusData = await api.getStatus()
|
||||
|
|
@ -803,7 +746,7 @@ export default function Dashboard() {
|
|||
} catch (error) {
|
||||
console.error('Status polling error:', error)
|
||||
}
|
||||
}, 5000) // Poll every 5 seconds
|
||||
}, 5000)
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
|
|
|
|||
Loading…
Reference in New Issue