How to use the vlow.Component function in vlow

import DatabasesActions from '../../../Actions/DatabasesActions.jsx';
import DatabasesStore from '../../../Stores/DatabasesStore.jsx';
import ConfirmModal from './ConfirmModal.jsx';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

const tooltipDn = 
    Database name which you want to extend with a new replica.
    ;
const tooltipSn = 
    Address of a SiriDB server hosting the database. If the database already has more than one server, just choose one.
    ;
const tooltipUn = 
    Username with full privileges to the database. Note: do not confuse a database user with a service account.
    ;

class NewReplica extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            dbname: '',
            server: '',
            username: '',
            password: '',
            pool: 0,
            showConfirm: false
        };
        this.mapStore(DatabasesStore); // required so the store will be initialized
    }

    onNewReplica() {
        DatabasesActions.newReplica(

import DatabasesActions from '../../../Actions/DatabasesActions.jsx';
import DatabasesStore from '../../../Stores/DatabasesStore.jsx';
import ConfirmModal from './ConfirmModal.jsx';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

const tooltipDn = 
    Database name which you want to extend with a new pool.
    ;
const tooltipSn = 
    Address of a SiriDB server hosting the database. If the database already has more than one server, just choose one.
    ;
const tooltipUn = 
    Username with full privileges to the database. Note: do not confuse a database user with a service account.
    ;

class NewPool extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            dbname: '',
            server: '',
            username: '',
            password: '',
            showConfirm: false
        };
        this.mapStore(DatabasesStore); // required so the store will be initialized
    }

    onNewPool() {
        DatabasesActions.newPool(
            this.state.dbname,

import React from 'react';
import Vlow from 'vlow';
import { render } from 'react-dom';
import { Link } from 'react-router';
import AlertActions from '../../../Actions/AlertActions.jsx';
import AccountsActions from '../../../Actions/AccountsActions.jsx';
import AccountsStore from '../../../Stores/AccountsStore.jsx';

class NewAccount extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
        this.mapStore(AccountsStore); // required so the store will be initialized
        AlertActions.clearAlert();
    }

    onNewAccount() {
        AccountsActions.newAccount(
            this.state.username,
            this.state.password,
            () => this.props.router.push('accounts')

const tooltipTp = 
    Precision used for storing timestamps in the database. This value cannot be changed once the database is created.
    ;
const tooltipBs = 
    Each series uses a buffer space in both memory and disk before points are actually written to shards.
    The size for this buffer cannot be changed once the database is created.
const tooltipDn = 
    Points are written to shards and each shard has points for a specific time range. The size or time window
    can be chosen but not changed once the database is created. For example: the value '1w' will create shards holding points for 1 week.
const tooltipDl = 
    Like numeric duration but then for log values.
    At the moment log values are not supported by SiriDB but this will be implemented in a future release.


class NewDatabase extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            dbname: '',
            timePrecision: 'ms',
            bufferSize: 1024,
            durationNum: '1w',
            durationLog: '1d',
            showConfirm: false
        };
        this.mapStore(DatabasesStore); // required so the store will be initialized
    }

    onNewDatabase() {
        DatabasesActions.newDatabase(

import React from 'react';
import Vlow from 'vlow';
import { render } from 'react-dom';
import { Link, IndexLink } from 'react-router';
import DatabasesStore from '../../../Stores/DatabasesStore.jsx';
import VersionStore from '../../../Stores/VersionStore.jsx';
import DatabasesActions from '../../../Actions/DatabasesActions.jsx';
import AlertActions from '../../../Actions/AlertActions.jsx';
import DropModal from './DropModal.jsx';

class Databases extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            showDrop: false,
            dropName: ''
        }
        this.mapStores([DatabasesStore, VersionStore]);
        DatabasesActions.fetch();
    }

    checkVersion = (requiredVersion) => {
        if (this.state.version === undefined) {
            return false;
        }
        let required = requiredVersion.split('.');

import React from 'react';
import Vlow from 'vlow';
import { render } from 'react-dom';
import { Link, IndexLink } from 'react-router';
import AccountsStore from '../../../Stores/AccountsStore.jsx';
import AccountsActions from '../../../Actions/AccountsActions.jsx';
import DropModal from './DropModal.jsx';

class View extends Vlow.Component {

    constructor(props) {
        super(props);
        this.state = {
            showDrop: false,
            dropName: ''
        }
        this.mapStore(AccountsStore);
        AccountsActions.fetch();
    }

    onDrop(name) {
        this.setState({
            showDrop: true,
            dropName: name
        });

import React from 'react';
import Vlow from 'vlow';
import { render } from 'react-dom';
import AuthStore from '../../Stores/AuthStore.jsx';
import AlertStore from '../../Stores/AlertStore.jsx';
import AlertActions from '../../Actions/AlertActions.jsx';
import Auth from '../Auth/Auth.jsx';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';


class App extends Vlow.Component {

    constructor(props) {
        super(props);
        this.mapStores([AuthStore, AlertStore]);
    }

    render() {
        let error = (this.state.alert !== null) ? (
            <div><a>×</a>{this.state.alert.msg}</div>
        ) : null;
        return (
            <div>
                <div>
                    <img alt="SiriDB Logo" src="/img/siridb-large.png">
                </div>
                { (this.state.user) ? this.props.children :  }</div>

import React from 'react';
import Vlow from 'vlow';
import { render } from 'react-dom';
import { IndexLink } from 'react-router';
import VersionStore from '../../Stores/VersionStore.jsx';

class VersionInfo extends Vlow.Component {

    constructor(props) {
        super(props);
        this.mapStore(VersionStore);
    }

    render() {
        return (
            <div>
                <h1>Version information</h1>
                <dl>
                    <dt>Version:</dt>
                    <dd>{this.state.version}</dd>
                </dl>
                <ul>
                    <li><i></i>back</li></ul></div>