Skip to content
This repository has been archived by the owner on Aug 2, 2023. It is now read-only.

Commit

Permalink
Add Diagnostics Events (#1194)
Browse files Browse the repository at this point in the history
* Basic Dashboard events

dashboard click, filters selected

* Add alert panel explore link event

* Add device group events

Add events for create/edit device groups

* Add rules page click event

* Add Help and Refresh events

add events for help dropdown. Also add event when refresh is clicked

* Add map click event

* Style fixes

Style fixes. Fix issue with new version of link--doesn't work for external links. Switch to <a> instead

* addressed comments

style fixes

* Remove unused code

* Address comments

style fixes, some renaming
  • Loading branch information
Molly Moen authored Dec 10, 2018
1 parent 1b4a82d commit 3c094ee
Show file tree
Hide file tree
Showing 39 changed files with 212 additions and 63 deletions.
2 changes: 1 addition & 1 deletion docs/walkthrough/addNewGrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Grids in remote monitoring are based on [ag-grid][ag-grid], with our own customi
1. Open your page's file [pageWithGrid.js](/src/walkthrough/components/pages/pageWithGrid/pageWithGrid.js) so the grid and refresh bar can be added.
1. Import your grid as well as other components like `AjaxError` and `RefreshBar`.
```js
import { AjaxError, RefreshBar } from 'components/shared';
import { AjaxError, RefreshBarContainer as RefreshBar } from 'components/shared';
import { ExampleGrid } from './exampleGrid';
```
- `AjaxError` is optional, but adding it provides a simple and consistent way to display errors resulting from loading data.
Expand Down
8 changes: 4 additions & 4 deletions src/components/pages/dashboard/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import { Grid, Cell } from './grid';
import { PanelErrorBoundary } from './panel';
import { DeviceGroupDropdownContainer as DeviceGroupDropdown } from 'components/shell/deviceGroupDropdown';
import { ManageDeviceGroupsBtnContainer as ManageDeviceGroupsBtn } from 'components/shell/manageDeviceGroupsBtn';
import { TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { TimeIntervalDropdownContainer as TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import {
OverviewPanel,
AlertsPanel,
AlertsPanelContainer as AlertsPanel,
TelemetryPanel,
AnalyticsPanel,
MapPanel,
MapPanelContainer as MapPanel,
ExamplePanel,
transformTelemetryResponse,
chartColorObjects
Expand All @@ -29,7 +29,7 @@ import {
ContextMenuAlign,
PageContent,
Protected,
RefreshBar
RefreshBarContainer as RefreshBar
} from 'components/shared';

import './dashboard.scss';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Copyright (c) Microsoft. All rights reserved.

import { connect } from 'react-redux';
import { epics as appEpics } from 'store/reducers/appReducer';
import { AlertsPanel } from './alertsPanel';

const mapDispatchToProps = dispatch => ({
logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
});

export const AlertsPanelContainer = connect(null, mapDispatchToProps)(AlertsPanel);
11 changes: 10 additions & 1 deletion src/components/pages/dashboard/panels/alerts/alertsPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
PanelOverlay
} from 'components/pages/dashboard/panel';
import { RulesGrid, rulesColumnDefs } from 'components/pages/rules/rulesGrid';
import { LinkRenderer } from 'components/shared/cellRenderers';
import { toDiagnosticsModel } from 'services/models';
import { translateColumnDefs } from 'utilities';

export class AlertsPanel extends Component {
Expand All @@ -31,10 +33,17 @@ export class AlertsPanel extends Component {
headerName: 'rules.grid.count',
field: 'count'
},
rulesColumnDefs.explore
{
...rulesColumnDefs.explore,
cellRendererFramework: props => <LinkRenderer {...props} to={`/maintenance/rule/${props.value}`} onLinkClick={this.logExploreClick} />
}
];
}

logExploreClick = () => {
this.props.logEvent(toDiagnosticsModel('AlertsPanel_ExploreClick', {}));
}

render() {
const { t, alerts, isPending, error } = this.props;
const gridProps = {
Expand Down
1 change: 1 addition & 0 deletions src/components/pages/dashboard/panels/alerts/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Copyright (c) Microsoft. All rights reserved.

export * from './alertsPanel';
export * from './alertsPanel.container';
1 change: 1 addition & 0 deletions src/components/pages/dashboard/panels/map/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Copyright (c) Microsoft. All rights reserved.

export * from './mapPanel';
export * from './mapPanel.container';
11 changes: 11 additions & 0 deletions src/components/pages/dashboard/panels/map/mapPanel.container.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Copyright (c) Microsoft. All rights reserved.

import { connect } from 'react-redux';
import { epics as appEpics } from 'store/reducers/appReducer';
import { MapPanel } from './mapPanel';

const mapDispatchToProps = dispatch => ({
logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
});

export const MapPanelContainer = connect(null, mapDispatchToProps)(MapPanel);
2 changes: 2 additions & 0 deletions src/components/pages/dashboard/panels/map/mapPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
PanelError
} from 'components/pages/dashboard/panel';
import { DeviceDetailsContainer } from 'components/pages/devices/flyouts/deviceDetails';
import { toDiagnosticsModel } from 'services/models';
import { AzureMap } from './azureMap';

import './mapPanel.scss';
Expand Down Expand Up @@ -62,6 +63,7 @@ export class MapPanel extends Component {
position: pin.geometry.coordinates,
content: this.buildDevicePopup(pin.properties, classname)
});
this.props.logEvent(toDiagnosticsModel('Map_DeviceClick', {}));
this.popup.open(map);
});
});
Expand Down
1 change: 1 addition & 0 deletions src/components/pages/dashboard/panels/telemetry/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@

export * from './telemetryPanel';
export * from './telemetryChart';
export * from './telemetryChart.container'
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Copyright (c) Microsoft. All rights reserved.

import { connect } from 'react-redux';
import { epics as appEpics } from 'store/reducers/appReducer';
import { TelemetryChart } from './telemetryChart'


const mapDispatchToProps = dispatch => ({
logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
});

export const TelemetryChartContainer = connect(null, mapDispatchToProps)(TelemetryChart);
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
import 'tsiclient';

import { joinClasses } from 'utilities';
import { toDiagnosticsModel } from 'services/models';

import './telemetryChart.scss';

Expand Down Expand Up @@ -141,7 +142,10 @@ export class TelemetryChart extends Component {
}
}

setTelemetryKey = telemetryKey => () => this.setState({ telemetryKey });
setTelemetryKey = telemetryKey => () => {
this.props.logEvent(toDiagnosticsModel('TelemetryChartFilter_Click', {}));
this.setState({ telemetryKey });
}

render() {
const { telemetry } = this.props;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
PanelOverlay
} from 'components/pages/dashboard/panel';

import { TelemetryChart } from './telemetryChart';
import { TelemetryChartContainer as TelemetryChart } from './telemetryChart.container';

import './telemetryPanel.scss';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
Indicator,
PageContent,
Protected,
RefreshBar,
RefreshBarContainer as RefreshBar,
StatSection,
StatGroup,
StatProperty,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
ContextMenuAlign,
PageContent,
Protected,
RefreshBar,
RefreshBarContainer as RefreshBar,
PageTitle
} from 'components/shared';
import { DeviceGroupDropdownContainer as DeviceGroupDropdown } from 'components/shell/deviceGroupDropdown';
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/devices/devices.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
PageContent,
PageTitle,
Protected,
RefreshBar,
RefreshBarContainer as RefreshBar,
SearchInput
} from 'components/shared';
import { DeviceNewContainer } from './flyouts/deviceNew';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
TimeSeriesInsightsLinkContainer
} from 'components/shared';
import Flyout from 'components/shared/flyout';
import { TelemetryChart, chartColorObjects } from 'components/pages/dashboard/panels/telemetry';
import { TelemetryChartContainer as TelemetryChart, chartColorObjects } from 'components/pages/dashboard/panels/telemetry';
import { transformTelemetryResponse } from 'components/pages/dashboard/panels';
import { getEdgeAgentStatusCode } from 'utilities';

Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/maintenance/jobDetails/jobDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import {
ContextMenuAlign,
PageContent,
PageTitle,
RefreshBar
RefreshBarContainer as RefreshBar
} from 'components/shared';
import { DevicesGridContainer } from 'components/pages/devices/devicesGrid/devicesGrid.container';
import { JobGrid, JobStatusGrid } from 'components/pages/maintenance/grids';
import { TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { TimeIntervalDropdownContainer as TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';

import { IoTHubManagerService } from 'services';
import { toDiagnosticsModel } from 'services/models';
Expand Down
6 changes: 3 additions & 3 deletions src/components/pages/maintenance/ruleDetails/ruleDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ import {
PageContent,
PageTitle,
Protected,
RefreshBar
RefreshBarContainer as RefreshBar
} from 'components/shared';
import { svgs, joinClasses, renderUndefined } from 'utilities';
import { DevicesGridContainer } from 'components/pages/devices/devicesGrid/devicesGrid.container';
import { DeviceGroupDropdownContainer as DeviceGroupDropdown } from 'components/shell/deviceGroupDropdown';
import { ManageDeviceGroupsBtnContainer as ManageDeviceGroupsBtn } from 'components/shell/manageDeviceGroupsBtn';
import { TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { TelemetryChart, transformTelemetryResponse, chartColorObjects } from 'components/pages/dashboard/panels/telemetry';
import { TimeIntervalDropdownContainer as TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { TelemetryChartContainer as TelemetryChart, transformTelemetryResponse, chartColorObjects } from 'components/pages/dashboard/panels/telemetry';
import { TelemetryService } from 'services';
import { TimeRenderer, SeverityRenderer } from 'components/shared/cellRenderers';
import { AlertOccurrencesGrid } from 'components/pages/maintenance/grids';
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/maintenance/summary/summary.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import { NavLink } from 'react-router-dom';
import { permissions, toDiagnosticsModel } from 'services/models';
import { DeviceGroupDropdownContainer as DeviceGroupDropdown } from 'components/shell/deviceGroupDropdown';
import { ManageDeviceGroupsBtnContainer as ManageDeviceGroupsBtn } from 'components/shell/manageDeviceGroupsBtn';
import { TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { TimeIntervalDropdownContainer as TimeIntervalDropdown } from 'components/shell/timeIntervalDropdown';
import { Notifications } from './notifications';
import { Jobs } from './jobs';
import {
ComponentArray,
ContextMenu,
ContextMenuAlign,
RefreshBar,
RefreshBarContainer as RefreshBar,
PageContent,
PageTitle,
Protected,
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/packages/packages.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
ContextMenuAlign,
PageContent,
Protected,
RefreshBar,
RefreshBarContainer as RefreshBar,
PageTitle
} from 'components/shared';
import { PackageNewContainer } from './flyouts';
Expand Down
3 changes: 2 additions & 1 deletion src/components/pages/rules/rules.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
PageContent,
PageTitle,
Protected,
RefreshBar,
RefreshBarContainer as RefreshBar,
SearchInput
} from 'components/shared';
import { NewRuleFlyout } from './flyouts';
Expand Down Expand Up @@ -43,6 +43,7 @@ export class Rules extends Component {
}

this.props.updateCurrentWindow('Rules');

if (this.props.applicationPermissionsAssigned !== undefined) {
this.logApplicationPermissions(this.props.applicationPermissionsAssigned);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import { svgs } from 'utilities';

import '../cellRenderer.scss';

export const LinkRenderer = ({ to, svgPath }) => {
export const LinkRenderer = ({ to, svgPath, onLinkClick }) => {
return (
<div className="pcs-renderer-cell">
<NavLink to={to} className="pcs-renderer-link">
<Svg path={svgPath || svgs.ellipsis} />
<Svg path={svgPath || svgs.ellipsis} onClick = {onLinkClick} />
</NavLink>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions src/components/shared/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@ export * from './pcsGrid/pcsGrid';
export * from './propertyGrid'
export * from './protected'
export * from './refreshBar/refreshBar';
export * from './refreshBar/refreshBar.container';
export * from './svg';
export * from './timeSeriesInsightsLink';
11 changes: 11 additions & 0 deletions src/components/shared/refreshBar/refreshBar.container.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Copyright (c) Microsoft. All rights reserved.

import { connect } from 'react-redux';
import { epics as appEpics } from 'store/reducers/appReducer';
import { RefreshBar } from './refreshBar'

const mapDispatchToProps = dispatch => ({
logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
});

export const RefreshBarContainer = connect(null, mapDispatchToProps)(RefreshBar);
6 changes: 5 additions & 1 deletion src/components/shared/refreshBar/refreshBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@
import React, { Component } from 'react';
import moment from 'moment';
import { Btn } from 'components/shared';
import { toDiagnosticsModel } from 'services/models';
import { svgs } from 'utilities';
import { DEFAULT_TIME_FORMAT } from 'components/shared/pcsGrid/pcsGridConfig';

import './refreshBar.scss';

export class RefreshBar extends Component {

refresh = () => !this.props.isPending && this.props.refresh();
refresh = () => {
this.props.logEvent(toDiagnosticsModel('Refresh_Click', {}));
return !this.props.isPending && this.props.refresh();
}

render () {
const { t, isPending, time} = this.props;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@

import { connect } from 'react-redux';
import { withNamespaces } from 'react-i18next';
import { redux as appRedux, epics as appEpics, getDeviceGroups, getActiveDeviceGroupId } from 'store/reducers/appReducer';
import {
redux as appRedux,
epics as appEpics,
getDeviceGroups,
getActiveDeviceGroupId
} from 'store/reducers/appReducer';

import { DeviceGroupDropdown } from './deviceGroupDropdown';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import './deviceGroupDropdown.scss';
export class DeviceGroupDropdown extends Component {

onChange = (deviceGroupIds) => ({ target: { value: { value } = {} } = {} }) => {
this.props.logEvent(toDiagnosticsModel('DeviceGroupFilter_Select', {}));
// Don't try to update the device group if the device id doesn't exist
if (deviceGroupIds.indexOf(value) > -1) {
this.props.changeDeviceGroup(value);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { withNamespaces } from 'react-i18next';
import { ManageDeviceGroups } from './manageDeviceGroups';
import {
redux as appRedux,
epics as appEpics,
getDeviceGroups,
getActiveDeviceGroupId
} from 'store/reducers/appReducer';
Expand All @@ -17,7 +18,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({
closeFlyout: () => dispatch(appRedux.actions.setDeviceGroupFlyoutStatus(false)),
deleteDeviceGroups: (ids) => dispatch(appRedux.actions.deleteDeviceGroups(ids)),
insertDeviceGroups: (deviceGroups) => dispatch(appRedux.actions.insertDeviceGroups(deviceGroups))
insertDeviceGroups: (deviceGroups) => dispatch(appRedux.actions.insertDeviceGroups(deviceGroups)),
logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
});

export const ManageDeviceGroupsContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(ManageDeviceGroups));
Loading

0 comments on commit 3c094ee

Please sign in to comment.