Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.

Add metrics to button (part of #508) #582

Closed
wants to merge 5 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 47 additions & 3 deletions gui/web/src/components/atoms/Button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import classNames from 'classnames';
import styles from './Button.module.scss';
import Icon from '../Icon/Icon';
import LoadingAnimation from '../LoadingAnimation/LoadingAnimation';
import sendMetricEvent from '../../../kelp-ops-api/sendMetricEvent';

const iconSizes = {
small:'10px',
Expand All @@ -18,14 +19,22 @@ const iconSizesRound = {
}

class Button extends Component {
constructor(props) {
super(props);
this.trackOnClick = this.trackOnClick.bind(this);
this.sendMetricEvent = this.sendMetricEvent.bind(this);

this._asyncRequests = {};
}

static defaultProps = {
icon: null,
size: 'medium',
variant: '',
hsize: 'regular',
loading: false,
onClick: () => {},
disabled: false
disabled: false,
}

static propTypes = {
Expand All @@ -34,8 +43,43 @@ class Button extends Component {
variant: PropTypes.string,
onClick: PropTypes.func,
loading: PropTypes.bool,
disabled: PropTypes.bool
disabled: PropTypes.bool,
eventName: PropTypes.string,
};

sendMetricEvent() {
if (this._asyncRequests["sendMetricEvent"]) {
return
}

nikhilsaraf marked this conversation as resolved.
Show resolved Hide resolved
if (this.props.eventName === "" || this.props.eventName === undefined) {
return
}

var _this = this
var eventData = {
nikhilsaraf marked this conversation as resolved.
Show resolved Hide resolved
'eventName': this.props.eventName,
'type': 'generic',
'component': 'button'
}
this._asyncRequests["sendMetricEvent"] = sendMetricEvent(this.props.baseUrl, this.props.eventName, eventData).then(resp => {
if (!_this._asyncRequests["sendMetricEvent"]) {
// if it has been deleted it means we don't want to process the result
return
}

delete _this._asyncRequests["sendMetricEvent"];

if (resp["success"] === undefined) {
nikhilsaraf marked this conversation as resolved.
Show resolved Hide resolved
console.log(resp["error"])
}
nikhilsaraf marked this conversation as resolved.
Show resolved Hide resolved
})
}

trackOnClick() {
this.props.onClick()
this.sendMetricEvent()
}

render() {
const iconOnly = this.props.children ? null : styles.iconOnly;
Expand All @@ -57,7 +101,7 @@ class Button extends Component {
<button
className={classNameList}
disabled={this.props.disabled || this.props.loading }
onClick= {this.props.onClick}
onClick={this.trackOnClick}
>
{this.props.loading &&
<span className={styles.loader}>
Expand Down