최종 테스트 확인 모달 제시

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 아직 확인하지 않았다면 개요를 확인하세요.

과정의 각 단원은 마지막 단원을 기반으로 하므로 이 단원을 시작하기 전에 마지막 단원인 선택한 버전 유지를 완료했는지 확인하세요.

이 튜토리얼에서는 A/B 테스트 애플리케이션을 구축합니다. 이 애플리케이션은 웹 사이트에서 진행 중인 A/B 테스트에 대한 데이터를 표시하며, 이를 사용하여 사용자 참여에 가장 효과적인 페이지 디자인 버전을 결정합니다. 중요한 목표의 일환으로 실험의 승자를 결정하여 테스트를 종료할 수 있는 섹션을 구축하고 있습니다.

불행하게도 이 섹션의 코드와 디자인에는 몇 가지 문제가 있습니다. 이 과정이 끝날 때 End test [테스트 종료를]누르면 웹사이트의 백앤드 서버에 모든 고객이 여기에서 선택한 버전이 표시되어야 함을 알릴 것입니다. 이는 웹사이트에 되돌릴 수 없는 변화를 가져오기 때문에 파괴적인 행동입니다. End test [테스트 종료를] 를 누르는 파괴성을 고려하려면 애플리케이션의 일부 기능을 수정해야 합니다.

버튼을 중요하게 보이게 하여 시선을 사로잡으세요
테스트를 너무 일찍 종료하지 않도록 테스트를 종료하기 전에 확인 메시지를 직접 확인하세요.

확인 모달 표시 및 숨기기

교과 과정 저장소 의 present-confirmation-modal/ab-test 디렉터리로 변경합니다.

bash

$cd nru-programmability-course/present-confirmation-modal/ab-test

이 디렉터리에는 과정의 이 시점에서 애플리케이션에 있어야 하는 코드가 포함되어 있습니다. 각 레슨을 시작할 때 올바른 디렉토리로 이동하면 사용자 정의 코드를 남겨두어 한 레슨에서 다음 레슨으로 잘못된 코드가 전달되는 것을 방지할 수 있습니다.

nerdlets/ab-test-nerdlet/end-test.js 에서 DESTRUCTIVE 스타일을 사용하도록 Button 를 업데이트합니다.

import React from 'react';
import {
    Button,
    Grid,
    GridItem,
    HeadingText,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE}>End test</Button>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

nru-programmability-course/present-confirmation-modal/ab-test 에서 Nerdpack의 루트로 이동합니다.

Nerdpack에 대한 새 UUID를 생성하십시오.

bash

$nr1 nerdpack:uuid -gf

기존 Nerdpack이 포함된 교과 과정 저장소를 복제했으므로 고유한 식별자를 생성해야 합니다. 이 UUID는 Nerdpack을 New Relic 계정에 매핑합니다.

애플리케이션을 로컬로 제공합니다.

bash

$nr1 nerdpack:serve

https://one.newrelic.com?nerdpacks=local 로 이동하여 Apps [앱] > Your apps [클릭하면] 아래에서 애플리케이션을 확인하세요.

이제 파괴적인 결과를 전달하도록 버튼 스타일을 지정했지만 실수로 클릭하는 것을 방지하기에는 충분하지 않습니다. 다음으로 웹사이트의 백앤드에 대한 쉴드를 만듭니다. 이 추가 보호 계층에서는 실제로 테스트를 종료하기 전에 테스트를 종료할 것인지 확인해야 합니다.

EndTestButton 에 Modal 추가합니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE}>End test</Button>

            <Modal>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

새 모달에는 제목, 확인 메시지, 우승 디자인 버전 및 두 개의 버튼이 포함되어 있습니다. 이 과정의 뒷부분에서 이러한 구성요소 중 일부를 살펴보겠습니다.

Nerdpack이 로컬로 제공되면 애플리케이션을 보고 새 Modal 확인하세요.

팁

서버가 실행되는 동안 코드를 저장하면 서버가 자동으로 업데이트된다는 점을 기억하세요.

모달은 훌륭해 보이지만 세 가지 문제가 있습니다.

End test [테스트 종료를]클릭하기 전에 존재했습니다.
당신은 그것을 무시할 수 없습니다
선택하지 않은 경우에도 항상 "버전 A"를 선택했다고 표시됩니다.

다음 단계에서는 이러한 세 가지 문제를 모두 해결합니다.

EndTestButton 에서 modalHidden 값으로 state 초기화합니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            modalHidden: true,
        }
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE}>End test</Button>

            <Modal>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

modalHidden 모달을 숨길지 여부를 결정합니다. End test [테스트 종료를] 를 선택할 때만 모달을 표시하려고 하므로 modalHidden 의 기본값은 true 입니다.

Modal 에 modalHidden 제공합니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE}>End test</Button>

            <Modal hidden={this.state.modalHidden}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

먼저 구성 요소 소품을 허용하는 생성자를 만들었습니다. 이는 EndTestSection 에 전달한 modalHidden 소품에 대한 구성 요소 액세스를 제공합니다. 그런 다음 Modal 구성요소의 hidden 속성에 modalHidden 값을 제공합니다.

두 개의 새로운 메서드를 EndTestSection 에 추가하고 바인딩합니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }

        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        this.setState({ modalHidden: true });
    }

    showModal() {
        this.setState({ modalHidden: false });
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE}>End test</Button>

            <Modal hidden={this.state.modalHidden}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

사용자가 모달과 상호작용하는 방식에 따라 모달을 각각 닫고 표시하려면 closeModal 및 showModal 사용하세요.

End test [테스트 종료를] 클릭하면 모달이 표시됩니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }

        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        this.setState({ modalHidden: true });
    }

    showModal() {
        this.setState({ modalHidden: false });
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.showModal}>End test</Button>

            <Modal hidden={this.state.modalHidden}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

여기서는 Button 구성요소의 onClick 이벤트에 대한 콜백으로 showModal() 제공했습니다.

https://one.newrelic.com?nerdpacks=local 로 돌아가서 변경 사항을 확인하세요.

모달은 기본적으로 숨겨져 있습니다. 모달을 보려면 End tes [t테스트 종료를] 클릭하세요.

Modal 구성요소의 onClose 콜백과 Yes, end test [예, 테스트 종료] 및 No, continue test [아니요, 테스트 계속] 버튼에서 모달을 닫습니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }

        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        this.setState({ modalHidden: true });
    }

    showModal() {
        this.setState({ modalHidden: false });
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.showModal}>End test</Button>

            <Modal hidden={this.state.modalHidden} onClose={this.closeModal}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button onClick={this.closeModal}>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.closeModal}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

https://one.newrelic.com?nerdpacks=local 로 돌아가서 변경 사항을 확인하세요.

End test [테스트 종료 를] 클릭합니다. 모달이 열리고 확인 메시지가 표시됩니다. 오른쪽 상단, 해당 버튼 중 하나 또는 왼쪽의 어두운 공간에 있는 X를 클릭하여 모달을 닫습니다.

"버전 B"를 선택하더라도 모달에서는 "버전 A"를 선택했다고 표시됩니다. 이는 "버전 A"가 Modal 텍스트에 하드코딩되어 있기 때문입니다. 다음으로 이를 동적으로 만들어 보겠습니다.

모달에서 선택한 버전을 사용하세요

EndTestSection 에서 selectedVersion EndTestButton 에 전달합니다.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }

        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        this.setState({ modalHidden: true });
    }

    showModal() {
        this.setState({ modalHidden: false });
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.showModal}>End test</Button>

            <Modal hidden={this.state.modalHidden} onClose={this.closeModal}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version A</b>
                </BlockText>

                <Button onClick={this.closeModal}>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.closeModal}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton selectedVersion={this.state.selectedVersion}>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

이제 EndTestButton 구성요소의 prop에서 선택한 버전에 액세스할 수 있습니다.

확인 메시지에 selectedVersion 사용하세요.

import React from 'react';
import {
    BlockText,
    Button,
    Grid,
    GridItem,
    HeadingText,
    Modal,
    Select,
    SelectItem,
} from 'nr1';

class VersionSelector extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Select onChange={this.props.selectVersion} value={this.props.selectedVersion}>
            <SelectItem value={'A'}>Version A</SelectItem>
            <SelectItem value={'B'}>Version B</SelectItem>
        </Select>
    }
}

class EndTestButton extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            modalHidden: true,
        }

        this.showModal = this.showModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        this.setState({ modalHidden: true });
    }

    showModal() {
        this.setState({ modalHidden: false });
    }

    render() {
        return <div>
            <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.showModal}>End test</Button>

            <Modal hidden={this.state.modalHidden} onClose={this.closeModal}>
                <HeadingText>Are you sure?</HeadingText>
                <BlockText>
                    If you end the test, all your users will receive the version you selected:
                </BlockText>

                <BlockText spacingType={[BlockText.SPACING_TYPE.LARGE]}>
                    <b>Version {this.props.selectedVersion}</b>
                </BlockText>

                <Button onClick={this.closeModal}>No, continue test</Button>
                <Button type={Button.TYPE.DESTRUCTIVE} onClick={this.closeModal}>Yes, end test</Button>
            </Modal>
        </div>
    }
}

export default class EndTestSection extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            selectedVersion: 'A',
        };

        this.selectVersion = this.selectVersion.bind(this);
    }

    selectVersion(event, value) {
        this.setState({ selectedVersion: value });
    }

    render() {
        return <Grid className="endTestSection">
            <GridItem columnSpan={12}>
                <HeadingText className="endTestHeader">
                    Pick the winner of your A/B test:
                </HeadingText>
            </GridItem>
            <GridItem columnStart={5} columnEnd={6} className="versionSelector">
                <VersionSelector
                    selectedVersion={this.state.selectedVersion}
                    selectVersion={this.selectVersion}
                />
            </GridItem>
            <GridItem columnStart={7} columnEnd={8}>
                <EndTestButton selectedVersion={this.state.selectedVersion}>End test</EndTestButton>
            </GridItem>
        </Grid>
    }
}

https://one.newrelic.com?nerdpacks=local 로 돌아가서 변경 사항을 확인하세요.

메뉴에서 "버전 B"를 선택합니다. End test [테스트 종료를] 클릭하면 확인 모달에서 "버전 B"가 표시됩니다.

작업이 끝나면 로컬 서버의 터미널 창에서 CTRL+C 눌러 New Relic 피규어 제공을 중지하세요.

축하해요! 당신은 많은 일을 해왔고 그것은 당신의 스튜디오의 유용성을 보여줍니다. 모의 데이터를 표시하는 차트를 만들었습니다. 차트를 읽을 수 있는 구조로 구성했습니다. 사용자가 테스트와 상호 작용할 수 있는 인터페이스를 추가했습니다. 이제 실제 데이터가 필요합니다. 다음 강의에서는 차트의 모의 데이터를 백앤드 서비스의 실제 데이터로 바꾸겠습니다.

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 단원으로 계속 진행하세요. NrqlQuery 구성 요소를 nerdlet에 추가하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

팁

확인 모달 표시 및 숨기기 .css-21sua1{background:none;border:none;width:0;padding:0;}

팁

모달에서 선택한 버전을 사용하세요

팁

확인 모달 표시 및 숨기기