<commit_before>import * as React from 'react';
import {observer} from 'mobx-react';
import {diInject} from '../app/DIContext';
import {ScriptStore, ScriptViewStore} from './ScriptStore';
import AceEditor from 'react-ace';
import {DropdownButton, MenuItem, Button, Checkbox, Panel, Modal, Alert} from 'react-bootstrap';
import 'brace/mode/groovy';
import 'brace/theme/tomorrow';
import FontAwesome = require('react-fontawesome');

interface Props {
}

@observer
export class ScriptView extends React.Component<Props, any> {

    @diInject() scriptStore: ScriptStore;
    viewStore: ScriptViewStore;

    constructor(props: Props, context: any) {
        super(props, context);
        this.viewStore = this.scriptStore.createScriptViewStore();
    }

    render() {
        return (
            <div className="main-panel">
                <nav className="navbar navbar-default navbar-fixed">
                    <div className="container-fluid">
                        <DropdownButton title={this.viewStore.selectedRuleId || 'Select a Rule'} id="scriptDropdown"
                                        onSelect={this.viewStore.selectRule}>
                            {this.viewStore.rules.map(r => <MenuItem eventKey={r} key={r.id}>{r.id}</MenuItem>)}
                        </DropdownButton>

                        <Checkbox checked={this.viewStore.mockTargets} onChange={this.viewStore.setMockTargets}>
                            Log targets
                        </Checkbox>&nbsp;

                        <Button onClick={this.viewStore.runScript}><FontAwesome name="play"/></Button>&nbsp;
                        <Button onClick={this.viewStore.saveDialog}><FontAwesome name="save"/></Button>
                    </div>
                </nav>

                <div className="content">
                    <div className="row">
                        <div className="col-md-6">
                            <Panel>
                                <AceEditor mode="groovy"
                                           theme="tomorrow"
                                           name="codeEditor"
                                           value={this.viewStore.selectedRuleScript}
                                           onChange={this.viewStore.updateScript}/>
                            </Panel>
                        </div>

                        <div className="col-md-6">
                            <Panel>
                                <div>
                                    <h2>Execution Log</h2>
                                </div>
                                {this.viewStore.runStatus.map((l, i) =>
                                    <div key={i} className="row">
                                        <div
                                            className="col-md-4 log-message-date">{new Date(l.time).toISOString()}</div>
                                        <div className={'col-md-8 log-message-' + l.level}>
                                            [{l.level}] {l.message}</div>
                                    </div>
                                )}
                            </Panel>
                        </div>
                    </div>
                </div>

                <Modal
                    show={this.viewStore.showSaveDialog} onHide={this.viewStore.closeSaveDialog}>
                    <Modal.Header closeButton>
                        <Modal.Title>Save Rule</Modal.Title><commit_msg>Issue #2. Renamed "Log targets" label and moved to the bottom of the script field.<commit_after>import * as React from 'react';
import {observer} from 'mobx-react';
import {diInject} from '../app/DIContext';
import {ScriptStore, ScriptViewStore} from './ScriptStore';
import AceEditor from 'react-ace';
import {DropdownButton, MenuItem, Button, Checkbox, Panel, Modal, Alert} from 'react-bootstrap';
import 'brace/mode/groovy';
import 'brace/theme/tomorrow';
import FontAwesome = require('react-fontawesome');

interface Props {
}

@observer
export class ScriptView extends React.Component<Props, any> {

    @diInject() scriptStore: ScriptStore;
    viewStore: ScriptViewStore;

    constructor(props: Props, context: any) {
        super(props, context);
        this.viewStore = this.scriptStore.createScriptViewStore();
    }

    render() {
        return (
            <div className="main-panel">
                <nav className="navbar navbar-default navbar-fixed">
                    <div className="container-fluid">
                        <DropdownButton title={this.viewStore.selectedRuleId || 'Select a Rule'} id="scriptDropdown"
                                        onSelect={this.viewStore.selectRule}>
                            {this.viewStore.rules.map(r => <MenuItem eventKey={r} key={r.id}>{r.id}</MenuItem>)}
                        </DropdownButton>&nbsp;

                        <Button onClick={this.viewStore.runScript}><FontAwesome name="play"/></Button>&nbsp;
                        <Button onClick={this.viewStore.saveDialog}><FontAwesome name="save"/></Button>
                    </div>
                </nav>

                <div className="content">
                    <div className="row">
                        <div className="col-md-6">
                            <Panel>
                                <AceEditor mode="groovy"
                                           theme="tomorrow"
                                           name="codeEditor"
                                           value={this.viewStore.selectedRuleScript}
                                           onChange={this.viewStore.updateScript}/>
                            </Panel>
                            <Checkbox checked={this.viewStore.mockTargets} onChange={this.viewStore.setMockTargets}>
                                Use sandbox (real messages won't be sent)
                            </Checkbox>
                        </div>

                        <div className="col-md-6">
                            <Panel>
                                <div>
                                    <h2>Execution Log</h2>
                                </div>
                                {this.viewStore.runStatus.map((l, i) =>
                                    <div key={i} className="row">
                                        <div
                                            className="col-md-4 log-message-date">{new Date(l.time).toISOString()}</div>
                                        <div className={'col-md-8 log-message-' + l.level}>
                                            [{l.level}] {l.message}</div>
                                    </div>
                                )}
                            </Panel>
                        </div>
                    </div>
                </div>

                <Modal
                    show={this.viewStore.showSaveDialog} onHide={this.viewStore.closeSaveDialog}>
                    <Modal.Header closeButton>
                        <Modal.Title>Save Rule</Modal.Title>
{'fraction_non_alphanumeric': 0.11136299234910739, 'fraction_numerical': 0.0018418815528478323, 'mean_word_length': 1.1861257355218333, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 97, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 41, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5615599', 'n_tokens_mistral': 1660, 'n_tokens_neox': 1567, 'n_words': 310}