Skip to content

Commit

Permalink
Fix button bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexronquillo
alexronquillo committed Jun 30, 2021
1 parent 8e0235e commit 3b63c22
Showing 1 changed file with 121 additions and 114 deletions.
235 changes: 121 additions & 114 deletions lab3/INSTRUCTIONS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ Update the render method with the code below:
<Grid>
<GridItem
columnSpan={8}>
<form onSubmit={this.onSubmit}>
<form>
<Stack fullWidth>
<StackItem grow={true}>
<TextField
Expand All @@ -427,7 +427,7 @@ Update the render method with the code below:
/>
</StackItem>
<StackItem>
<Button type={Button.TYPE.PRIMARY}>Facet</Button>
<Button type={Button.TYPE.PRIMARY} onClick={this.onSubmit}>Facet</Button>
</StackItem>
</Stack>
<Modal
Expand All @@ -441,11 +441,13 @@ Update the render method with the code below:
<Stack>
<StackItem>
<Button
type={Button.TYPE.DESTRUCTIVE}
onClick={this.rejectFacet}
>No</Button>
</StackItem>
<StackItem>
<Button
type={Button.TYPE.PRIMARY}
onClick={this.confirmFacet}
>Yes</Button>
</StackItem>
Expand Down Expand Up @@ -550,6 +552,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Grid, GridItem, Stack, StackItem, ChartGroup, AreaChart, BarChart, LineChart, TableChart, PieChart, Button, TextField, Modal, Toast } from 'nr1';


export default class MyNerdlet extends React.Component {
static propTypes = {
launcherUrlState: PropTypes.object,
Expand All @@ -559,7 +562,7 @@ export default class MyNerdlet extends React.Component {

constructor(props) {
super(props);
this.accountId = <REPLACE_WITH_YOUR_ACCOUNT_ID>;
this.accountId = <REPLACE_WITH_YOUR_ACCOUNT_ID>;
this.state = {
value: '',
facet: '',
Expand All @@ -578,144 +581,148 @@ export default class MyNerdlet extends React.Component {
this.popToast = this.popToast.bind(this);
}

handleChange(e){
this.setState({value: e.target.value})
handleChange(e) {
this.setState({ value: e.target.value })
}

onSubmit(e){
onSubmit(e) {
e.preventDefault();
this.setState({hideModal: false})
this.setState({ hideModal: false })
}

confirmFacet(e){
confirmFacet(e) {
e.preventDefault();
this.popToast('normal', 'Facet Updated', `The FACET ${this.state.value} has been added to your query.`)
this.setState({facet: 'FACET '+this.state.value, hideModal: true});
this.setState({ facet: 'FACET ' + this.state.value, hideModal: true });
}

rejectFacet(e){
rejectFacet(e) {
e.preventDefault();
this.popToast('critical', 'Facet Rejected', `The FACET ${this.state.value} has been rejected.`)
this.setState({facet: '', value: '', hideModal: true});
this.setState({ facet: '', value: '', hideModal: true });
}

popToast(toastType, toastTitle, toastDisplay){
this.setState({showToast: true, toastType, toastTitle, toastDisplay});
popToast(toastType, toastTitle, toastDisplay) {
this.setState({ showToast: true, toastType, toastTitle, toastDisplay });
}


render() {
const { duration } = this.props.launcherUrlState.timeRange;
const since = ` SINCE ${duration/1000/60} MINUTES AGO `;
const since = ` SINCE ${duration / 1000 / 60} MINUTES AGO `;
const errors = `SELECT count(error) FROM Transaction TIMESERIES`;
const throughput = `SELECT count(*) as 'throughput' FROM Transaction TIMESERIES`;
const transaction_apdex_by_appname = `SELECT count(*) as 'transaction', apdex(duration) as 'apdex' FROM Transaction limit 25`;

return <React.Fragment>
{ this.state.showToast &&
<Toast
type={this.state.toastType}
title={this.state.toastTitle}
description={this.state.toastDisplay}
onHideEnd={()=>{this.setState({showToast: false})}}
/>
}
<ChartGroup>
<Grid>
<GridItem
columnSpan={8}>
<form onSubmit={this.onSubmit}>
<Stack fullWidth>
{this.state.showToast &&
<Toast
type={this.state.toastType}
title={this.state.toastTitle}
description={this.state.toastDisplay}
onHideEnd={() => { this.setState({ showToast: false }) }}
/>
}

<ChartGroup>
<Grid>
<GridItem
columnSpan={8}>
<form>
<Stack fullWidth>
<StackItem grow={true}>
<TextField
value={this.state.value}
onChange={this.handleChange}
/>
</StackItem>
<StackItem>
<Button type={Button.TYPE.PRIMARY} onClick={this.onSubmit}>Facet</Button>
</StackItem>
</Stack>
<Modal
hidden={this.state.hideModal}
onClose={() => { this.setState({ facet: '', value: '', hideModal: true }) }}
>
<Stack>
<StackItem>
<h1 className="Modal-headline">Are you sure you want to apply this facet?</h1>
<p className="facet-value">Facet by: <strong>{this.state.value}</strong></p>
<Stack>
<StackItem>
<Button
type={Button.TYPE.DESTRUCTIVE}
onClick={this.rejectFacet}
>No</Button>
</StackItem>
<StackItem>
<Button
type={Button.TYPE.PRIMARY}
onClick={this.confirmFacet}
>Yes</Button>
</StackItem>
</Stack>
</StackItem>
</Stack>
</Modal>
</form>
<Stack
fullWidth
directionType={Stack.DIRECTION_TYPE.HORIZONTAL}
gapType={Stack.GAP_TYPE.LOOSE}>
<StackItem
grow={true}
className="row-spacing">
<LineChart
query={throughput + since + this.state.facet}
accountId={this.accountId}
className="chart"
onClickLine={(line) => {
console.debug(line); //eslint-disable-line
}}
/>
</StackItem>
</Stack>
<Stack
fullWidth
gapType={Stack.GAP_TYPE.LOOSE}>
<StackItem grow={true}>
<TextField
value={this.state.value}
onChange={this.handleChange}
<AreaChart
query={throughput + since + this.state.facet}
accountId={this.accountId}
className="two-col-chart"
onClickLine={(line) => {
console.debug(line); //eslint-disable-line
}}
/>
</StackItem>
<StackItem>
<Button type={Button.TYPE.PRIMARY}>Facet</Button>
<StackItem grow={true}>
<BarChart className="two-col-chart" query={errors + since + this.state.facet} accountId={this.accountId} />
</StackItem>
</Stack>
<Modal
hidden={this.state.hideModal}
onClose={() => {this.setState({facet: '', value: '', hideModal: true})}}
>
<Stack>
<StackItem>
<h1 className="Modal-headline">Are you sure you want to apply this facet?</h1>
<p className="facet-value">Facet by: <strong>{this.state.value}</strong></p>
<Stack>
<StackItem>
<Button
onClick={this.rejectFacet}
>No</Button>
</StackItem>
<StackItem>
<Button
onClick={this.confirmFacet}
>Yes</Button>
</StackItem>
</Stack>
</StackItem>
</Stack>
</Modal>
</form>
<Stack
fullWidth
directionType={Stack.DIRECTION_TYPE.HORIZONTAL}
gapType={Stack.GAP_TYPE.LOOSE}>
<StackItem
grow={true}
className="row-spacing">
<LineChart
query={throughput+since+this.state.facet}
accountId={this.accountId}
className="chart"
onClickLine={(line) => {
console.debug(line); //eslint-disable-line
}}
/>
</StackItem>
</Stack>
<Stack
fullWidth
gapType={Stack.GAP_TYPE.LOOSE}>
<StackItem grow={true}>
<AreaChart
query={throughput+since+this.state.facet}
accountId={this.accountId}
className="two-col-chart"
onClickLine={(line) => {
console.debug(line); //eslint-disable-line
}}
/>
</StackItem>
<StackItem grow={true}>
<BarChart className="two-col-chart" query={errors+since+this.state.facet} accountId={this.accountId} />
</StackItem>
</Stack>
</GridItem>
<GridItem
columnSpan={4}>
<Stack
className="side-col"
fullWidth
gapType={Stack.GAP_TYPE.TIGHT}
directionType={Stack.DIRECTION_TYPE.VERTICAL}>
<StackItem grow={true}>
<PieChart
className="chart"
query={transaction_apdex_by_appname+since+this.state.facet}
accountId={this.accountId}
/>
</StackItem>
<StackItem grow={true}>
<TableChart className="chart" query={transaction_apdex_by_appname+since+this.state.facet} accountId={this.accountId}/>
</StackItem>
</Stack>
</GridItem>
</Grid>
</ChartGroup>
</React.Fragment>;
</GridItem>
<GridItem
columnSpan={4}>
<Stack
className="side-col"
fullWidth
gapType={Stack.GAP_TYPE.TIGHT}
directionType={Stack.DIRECTION_TYPE.VERTICAL}>
<StackItem grow={true}>
<PieChart
className="chart"
query={transaction_apdex_by_appname + since + this.state.facet}
accountId={this.accountId}
/>
</StackItem>
<StackItem grow={true}>
<TableChart className="chart" query={transaction_apdex_by_appname + since + this.state.facet} accountId={this.accountId} />
</StackItem>
</Stack>
</GridItem>
</Grid>
</ChartGroup>
</React.Fragment>;
}
}
```

0 comments on commit 3b63c22

Please sign in to comment.