-
Notifications
You must be signed in to change notification settings - Fork 72
Adding Deployment message details formatting and removing onRowClick #1117
Changes from 1 commit
20bcd99
ed1a577
39f48d7
cad8c78
a807103
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -57,15 +57,23 @@ export class Deployments extends Component { | |
|
||
onGridReady = gridReadyEvent => this.deploymentGridApi = gridReadyEvent.api; | ||
|
||
getSoftSelectId = ({ id } = '') => id; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is what you meant There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
|
||
onSoftSelectChange = (deviceRowId) => { | ||
const rowData = (this.deploymentGridApi.getDisplayedRowAtIndex(deviceRowId) || {}).data; | ||
this.props.history.push(`/deployments/${rowData.id}`) | ||
} | ||
|
||
render() { | ||
const { t, deployments, error, isPending, fetchDeployments, lastUpdated, history } = this.props; | ||
const { t, deployments, error, isPending, fetchDeployments, lastUpdated } = this.props; | ||
const gridProps = { | ||
onGridReady: this.onGridReady, | ||
rowData: isPending ? undefined : deployments || [], | ||
refresh: fetchDeployments, | ||
onContextMenuChange: this.onContextMenuChange, | ||
t: t, | ||
onRowClicked: ({ data: { id } }) => history.push(`/deployments/${id}`) | ||
getSoftSelectId: this.getSoftSelectId, | ||
onSoftSelectChange: this.onSoftSelectChange | ||
}; | ||
|
||
return ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,6 +32,7 @@ import { | |
import Flyout from 'components/shared/flyout'; | ||
import { TelemetryChart, chartColorObjects } from 'components/pages/dashboard/panels/telemetry'; | ||
import { transformTelemetryResponse } from 'components/pages/dashboard/panels'; | ||
import { getEdgeAgentStatusCode } from 'utilities'; | ||
|
||
import './deviceDetails.css'; | ||
|
||
|
@@ -50,9 +51,10 @@ export class DeviceDetails extends Component { | |
telemetryIsPending: true, | ||
telemetryError: null, | ||
|
||
showRawMessage: false | ||
showRawMessage: false, | ||
currentModuleStatus: undefined | ||
}; | ||
|
||
this.baseState = this.state; | ||
this.columnDefs = [ | ||
{ | ||
...rulesColumnDefs.ruleName, | ||
|
@@ -65,6 +67,14 @@ export class DeviceDetails extends Component { | |
|
||
this.resetTelemetry$ = new Subject(); | ||
this.telemetryRefresh$ = new Subject(); | ||
if (this.props.moduleStatus) { | ||
this.state = { | ||
...this.state, | ||
currentModuleStatus: this.props.moduleStatus | ||
}; | ||
} else { | ||
this.props.fetchModules(this.props.device.id); | ||
} | ||
} | ||
|
||
componentDidMount() { | ||
|
@@ -119,8 +129,41 @@ export class DeviceDetails extends Component { | |
} | ||
|
||
componentWillReceiveProps(nextProps) { | ||
if ((this.props.device || {}).id !== nextProps.device.id) { | ||
const deviceId = (nextProps.device || {}).id; | ||
const { | ||
deviceModuleStatus, | ||
isDeviceModuleStatusPending, | ||
deviceModuleStatusError, | ||
moduleStatus, | ||
resetPendingAndError, | ||
device, | ||
fetchModules | ||
} = nextProps; | ||
|
||
/* | ||
deviceModuleStatus is a prop fetched by making fetchModules() API call through deviceDetails.container on demand. | ||
moduleStatus is a prop sent from deploymentDetailsGrid which it already has in rowData. | ||
Both deviceModuleStatus and moduleStatus have the same content, | ||
but come from different sources based on the page that opens this flyout. | ||
Depending on which one is available, currentModuleStatus is set in component state. | ||
*/ | ||
|
||
// set deviceModuleStatus in state if moduleStatus doesn't exist and devicesReducer successfully received the API response | ||
if (!moduleStatus && !isDeviceModuleStatusPending && !deviceModuleStatusError) { | ||
console.log(deviceModuleStatus); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove console.log There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. removed |
||
this.setState({ currentModuleStatus: deviceModuleStatus }); | ||
} | ||
|
||
// Reset state if the device changes | ||
if ((this.props.device || {}).id !== device.id) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. else if |
||
this.setState(this.baseState); | ||
resetPendingAndError(); | ||
// If moduleStatus exist in props, set it in state, otherwise make an API call to get deviceModuleStatus. | ||
if (moduleStatus) { | ||
this.setState({ currentModuleStatus: moduleStatus }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's try to avoid making so many set state calls back to back. Better to identify all the changes that need to be made and them make them all in a single setState call. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
} else { | ||
fetchModules(device.id); | ||
} | ||
const deviceId = (device || {}).id; | ||
this.resetTelemetry$.next(deviceId); | ||
this.fetchAlerts(deviceId); | ||
} | ||
|
@@ -162,8 +205,16 @@ export class DeviceDetails extends Component { | |
} | ||
|
||
render() { | ||
const { t, onClose, device, theme, timeSeriesExplorerUrl } = this.props; | ||
const { telemetry, lastMessage } = this.state; | ||
const { | ||
t, | ||
onClose, | ||
device, | ||
theme, | ||
timeSeriesExplorerUrl, | ||
isDeviceModuleStatusPending, | ||
deviceModuleStatusError | ||
} = this.props; | ||
const { telemetry, lastMessage, currentModuleStatus } = this.state; | ||
const lastMessageTime = (lastMessage || {}).time; | ||
const isPending = this.state.isAlertsPending && this.props.isRulesPending; | ||
const rulesGridProps = { | ||
|
@@ -176,8 +227,12 @@ export class DeviceDetails extends Component { | |
}; | ||
const tags = Object.entries(device.tags || {}); | ||
const properties = Object.entries(device.properties || {}); | ||
|
||
const moduleQuerySuccessful = currentModuleStatus && | ||
currentModuleStatus !== {} && | ||
!isDeviceModuleStatusPending && | ||
!deviceModuleStatusError; | ||
// Add parameters to Time Series Insights Url | ||
|
||
const timeSeriesParamUrl = | ||
timeSeriesExplorerUrl | ||
? timeSeriesExplorerUrl + | ||
|
@@ -391,6 +446,28 @@ export class DeviceDetails extends Component { | |
|
||
</Section.Content> | ||
</Section.Container> | ||
|
||
<Section.Container> | ||
<Section.Header>{t('devices.flyouts.details.modules.title')}</Section.Header> | ||
<Section.Content> | ||
<SectionDesc> | ||
{t("devices.flyouts.details.modules.description")} | ||
</SectionDesc> | ||
<div className="device-details-deployment-contentbox"> | ||
{ | ||
!moduleQuerySuccessful && | ||
t('devices.flyouts.details.modules.noneExist') | ||
} | ||
{ | ||
moduleQuerySuccessful && | ||
<div> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use componentArray instead of vanilla div There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
<div>{currentModuleStatus.code}: {getEdgeAgentStatusCode(currentModuleStatus.code, t)}</div> | ||
<div>{currentModuleStatus.description}</div> | ||
</div> | ||
} | ||
</div> | ||
</Section.Content> | ||
</Section.Container> | ||
</div> | ||
} | ||
<BtnToolbar> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Caps M
getModuleStatus
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done