<commit_before>/*
 *  Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 *  WSO2 Inc. licenses this file to you under the Apache License,
 *  Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing,
 *  software distributed under the License is distributed on an
 *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 *  KIND, either express or implied.  See the License for the
 *  specific language governing permissions and limitations
 *  under the License.
 *
 */

import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
// Material UI Components
import { Step, StepLabel, Stepper } from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import ExpandTransition from 'material-ui/internal/ExpandTransition';
import Paper from 'material-ui/Paper';
import Snackbar from 'material-ui/Snackbar';
import { darkBaseTheme, getMuiTheme, MuiThemeProvider } from 'material-ui/styles';
// App Components
import { FormPanel, Header } from '../../common';
import ChartConfigurator from './ChartConfigurator';
import ProviderConfigurator from './ProviderConfigurator';
import UtilFunctions from '../utils/UtilFunctions';
import GadgetDetailsConfigurator from './GadgetDetailsConfigurator';
// API
import GadgetsGenerationAPI from '../../utils/apis/GadgetsGenerationAPI';

const appContext = window.contextPath;

/**
 * Material UI theme
 */
const muiTheme = getMuiTheme(darkBaseTheme);

/**
 * Style constants
 */
const styles = {
    messageBox: { textAlign: 'center', color: 'white' },
    errorMessage: { backgroundColor: '#FF5722', color: 'white' },
    successMessage: { backgroundColor: '#4CAF50', color: 'white' },
    completedStepperText: {color: 'white'},
    activeStepperText: { color: '#0097A7' },
    inactiveStepperText: { color: '#9E9E9E' },
};

/**
 * Represents a main chart, that can have Line / Bar / Area as sub charts
 */
class GadgetsGenerationWizard extends Component {
    constructor() {
        super();
        this.state = {
            // Data related
            isGadgetDetailsValid: false,
            isProviderConfigurationValid: false,
            gadgetDetails: {
                name: '',
            },
            providerType: '',
            providersList: [],
            providerConfiguration: {},
            chartConfiguration: {},
            metadata: {
                names: ['rpm', 'torque', 'horsepower', 'EngineType'],
                types: ['linear', 'linear', 'linear', 'ordinal'],
            },
            data: [],
            // UI related
            isSnackbarOpen: false,
            snackbarMessage: '',
            snackbarMessageType: '',
            loading: false,
            finished: false,
            stepIndex: 0,
            previewChart: false,
        };
        this.handleGadgetDetailsChange = this.handleGadgetDetailsChange.bind(this);
        this.handleProviderTypeChange = this.handleProviderTypeChange.bind(this);
        this.handleProviderConfigPropertyChange = this.handleProviderConfigPropertyChange.bind(this);
        this.updateChartConfiguration = this.updateChartConfiguration.bind(this);
        this.toggleChartPreview = this.toggleChartPreview.bind(this);
        this.updateChartPreview = this.updateChartPreview.bind(this);
        this.dummyAsync = this.dummyAsync.bind(this);
        this.handleNext = this.handleNext.bind(this);
        this.handlePrev = this.handlePrev.bind(this);
    }

    componentDidMount() {
        const api = new GadgetsGenerationAPI()
        api.getProvidersList().then((response) => {
            this.setState({
                providersList: response.data,
            });
        });
    }

    /**
     * Updates the value of a detail related to the gadget
     * @param key
     * @param value
     */
    handleGadgetDetailsChange(key, value) {
        const state = this.state;
        state.gadgetDetails[key] = value;
        this.setState(state);
    }

    /**
     * Updates the selected provider's type, and specific configuration in the state when a provider is selected
     * @param providerType
     */
    handleProviderTypeChange(providerType) {
        const apis = new GadgetsGenerationAPI();
        apis.getProviderConfiguration(providerType).then((response) => {
            this.setState({
                providerType,
                providerConfiguration: response.data,
            });
        }).catch(() => {
            this.displaySnackbar('Failed to load provider configurations', 'errorMessage');
        });
    }

    /**
     * Sets changed property value of provider configuration in state
     * @param propertyKey
     * @param propertyValue
     */
    handleProviderConfigPropertyChange(propertyKey, propertyValue) {
        const state = this.state;
        state.providerConfiguration[propertyKey] = propertyValue;
        this.setState(state);
    }

    /**
     * Updates the chart configuration
     * @param chartConfiguration
     */
    updateChartConfiguration(chartConfiguration) {
        this.setState({ chartConfiguration });
    }

    /**
     * Toggles the chart preview
     */
    toggleChartPreview() {
        this.setState({ previewChart: (!this.state.previewChart) });
    }

    /**
     * Updates the chart preview by passing random values
     */
    updateChartPreview(data) {
        this.setState({ data });
    }

    /**
     * Submits gadget configuration
     */
    submitGadgetConfig() {
        if (!UtilFunctions.isEmpty(this.state.chartConfiguration)) {
            const submittableConfig = {
                name: this.state.gadgetDetails.name,
                id: '',
                chartConfig: this.state.chartConfiguration,
                providerConfig: this.state.providerConfiguration
            };<commit_msg>Minor fix in the providerConfig element for the final config to be saved<commit_after>/*
 *  Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 *  WSO2 Inc. licenses this file to you under the Apache License,
 *  Version 2.0 (the "License"); you may not use this file except
 *  in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing,
 *  software distributed under the License is distributed on an
 *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 *  KIND, either express or implied.  See the License for the
 *  specific language governing permissions and limitations
 *  under the License.
 *
 */

import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
// Material UI Components
import { Step, StepLabel, Stepper } from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import ExpandTransition from 'material-ui/internal/ExpandTransition';
import Paper from 'material-ui/Paper';
import Snackbar from 'material-ui/Snackbar';
import { darkBaseTheme, getMuiTheme, MuiThemeProvider } from 'material-ui/styles';
// App Components
import { FormPanel, Header } from '../../common';
import ChartConfigurator from './ChartConfigurator';
import ProviderConfigurator from './ProviderConfigurator';
import UtilFunctions from '../utils/UtilFunctions';
import GadgetDetailsConfigurator from './GadgetDetailsConfigurator';
// API
import GadgetsGenerationAPI from '../../utils/apis/GadgetsGenerationAPI';

const appContext = window.contextPath;

/**
 * Material UI theme
 */
const muiTheme = getMuiTheme(darkBaseTheme);

/**
 * Style constants
 */
const styles = {
    messageBox: { textAlign: 'center', color: 'white' },
    errorMessage: { backgroundColor: '#FF5722', color: 'white' },
    successMessage: { backgroundColor: '#4CAF50', color: 'white' },
    completedStepperText: {color: 'white'},
    activeStepperText: { color: '#0097A7' },
    inactiveStepperText: { color: '#9E9E9E' },
};

/**
 * Represents a main chart, that can have Line / Bar / Area as sub charts
 */
class GadgetsGenerationWizard extends Component {
    constructor() {
        super();
        this.state = {
            // Data related
            isGadgetDetailsValid: false,
            isProviderConfigurationValid: false,
            gadgetDetails: {
                name: '',
            },
            providerType: '',
            providersList: [],
            providerConfiguration: {},
            chartConfiguration: {},
            metadata: {
                names: ['rpm', 'torque', 'horsepower', 'EngineType'],
                types: ['linear', 'linear', 'linear', 'ordinal'],
            },
            data: [],
            // UI related
            isSnackbarOpen: false,
            snackbarMessage: '',
            snackbarMessageType: '',
            loading: false,
            finished: false,
            stepIndex: 0,
            previewChart: false,
        };
        this.handleGadgetDetailsChange = this.handleGadgetDetailsChange.bind(this);
        this.handleProviderTypeChange = this.handleProviderTypeChange.bind(this);
        this.handleProviderConfigPropertyChange = this.handleProviderConfigPropertyChange.bind(this);
        this.updateChartConfiguration = this.updateChartConfiguration.bind(this);
        this.toggleChartPreview = this.toggleChartPreview.bind(this);
        this.updateChartPreview = this.updateChartPreview.bind(this);
        this.dummyAsync = this.dummyAsync.bind(this);
        this.handleNext = this.handleNext.bind(this);
        this.handlePrev = this.handlePrev.bind(this);
    }

    componentDidMount() {
        const api = new GadgetsGenerationAPI()
        api.getProvidersList().then((response) => {
            this.setState({
                providersList: response.data,
            });
        });
    }

    /**
     * Updates the value of a detail related to the gadget
     * @param key
     * @param value
     */
    handleGadgetDetailsChange(key, value) {
        const state = this.state;
        state.gadgetDetails[key] = value;
        this.setState(state);
    }

    /**
     * Updates the selected provider's type, and specific configuration in the state when a provider is selected
     * @param providerType
     */
    handleProviderTypeChange(providerType) {
        const apis = new GadgetsGenerationAPI();
        apis.getProviderConfiguration(providerType).then((response) => {
            this.setState({
                providerType,
                providerConfiguration: response.data,
            });
        }).catch(() => {
            this.displaySnackbar('Failed to load provider configurations', 'errorMessage');
        });
    }

    /**
     * Sets changed property value of provider configuration in state
     * @param propertyKey
     * @param propertyValue
     */
    handleProviderConfigPropertyChange(propertyKey, propertyValue) {
        const state = this.state;
        state.providerConfiguration[propertyKey] = propertyValue;
        this.setState(state);
    }

    /**
     * Updates the chart configuration
     * @param chartConfiguration
     */
    updateChartConfiguration(chartConfiguration) {
        this.setState({ chartConfiguration });
    }

    /**
     * Toggles the chart preview
     */
    toggleChartPreview() {
        this.setState({ previewChart: (!this.state.previewChart) });
    }

    /**
     * Updates the chart preview by passing random values
     */
    updateChartPreview(data) {
        this.setState({ data });
    }

    /**
     * Submits gadget configuration
     */
    submitGadgetConfig() {
        if (!UtilFunctions.isEmpty(this.state.chartConfiguration)) {
            const submittableConfig = {
                name: this.state.gadgetDetails.name,
                id: '',
                configs: {
                    chartConfig: this.state.chartConfiguration,
                    providerConfig: {
                        type: this.state.providerType,
                        config: this.state.providerConfiguration,
                    },
                },
            };
{'fraction_non_alphanumeric': 0.10737983492474511, 'fraction_numerical': 0.004369639100178022, 'mean_word_length': 2.506099290780142, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1225472', 'n_tokens_mistral': 3245, 'n_tokens_neox': 3193, 'n_words': 834}