Syncano Dashboard

Old version of Syncano Dashboard (v4) went into maintenance mode, you can find it at syn4-devel branch

Introduction

Syncano Dashboard is a React based web application that lets you easily visualize your data held on Syncano platform. Thanks to that, you have a complete overview of you applications, you can edit and test your scripts, manage users, collaborate with multiple admins, and more - all from one place.

Code samples

Here is a sample code that will help you to get into our project. This will show how we would create a dumb CloseButton component in react:

import React from 'react';
import { IconButton } from 'material-ui';

const CloseButton = (props) => {
  const styles = {
    style: {
      position: 'absolute',
      top: 10,
      right: 10
    },
    iconStyle: {
      color: '#b8c0c9'
    }
  };

  return (
    <IconButton
      data-e2e={props['data-e2e']}
      style={{ ...styles.style, ...props.style }}
      iconStyle={{ ...styles.iconStyle, ...props.iconStyle }}
      onTouchTap={props.onTouchTap}
      iconClassName="synicon-close"
    />
  );
};

export default CloseButton;

and then use it in PageIntro so user can close it, like this:

import React from 'react';
import { colors as Colors } from 'material-ui/styles';
import CloseButton from '../CloseButton/';

const PageIntro = ({ headline, text, actions, onRequestClose, show = 'true' }) => {
  const styles = {
    main: {
      marginBottom: 24,
      padding: 32,
      background: 'rgba(243, 243, 243, 0.901961)',
      textAlign: 'center',
      position: 'relative'
    },
    headline: {
      marginBottom: 24,
      fontSize: 28,
      color: Colors.grey900,
      lineHeight: 1
    },
    text: {
      margin: 0,
      maxWidth: 640,
      marginLeft: 'auto',
      marginRight: 'auto',
      fontSize: 16,
      lineHeight: '1.5em'
    },
    actions: {
      marginTop: 32
    }
  };

  if (show === 'false') {
    return null;
  }

  return (
    <div style={styles.main}>
      {headline && <div style={styles.headline}>{headline}</div>}
      {text && <div style={styles.text}>{text}</div>}
      {actions && <div style={styles.actions}>{actions}</div>}
      {onRequestClose && <CloseButton onTouchTap={onRequestClose} />}
    </div>
  );
};

export default PageIntro;

Requirements

Dashboard

Dashboard is powered by Node. You will need to install 7.0.0 version, as it is current that we are using. It should come with npm in 3.10.8 version.

Without proper node version everything tends to blow up 🔥 !

Recommended way to manage node versions is n.

If you already have other version of node, just install n:

$ sudo yarn install -g n
$ n 7.0.0

And then type n to prompt selection of an installed node. Use the up / down arrow to navigate, and press enter or the right arrow to select, or ^C to cancel:

$ n

  ο 7.0.0
    6.2.1

E2E Tests

For E2E testing we use nightwatchjs which is an automated UI testing framework powered by Node. It uses Selenium WebDriver API.

To start selenium you will also need:

• Java
• Java Development Kit
• Chrome

All other necessary dependencies will be installed with dashboard and when starting tests for the first time.

Installation

You will need Node, if you already have it follow instructions, if not refer to Requirements section.

To install dependencies just do:

$ cd syncano-dashboard/
$ yarn install

and start local development server (available at https://localhost:8080/):

$ yarn start

Configuration

Some parts of the dashboard (Billing and Social Logins) connect with external services like Stripe, Facebook etc. If you'd like to make them work locally, you'll have to create your own apps that utilize these services. Once you've done this, export appropriate keys, as shown below.

We also have some other commands or exports necessary for other parts of development. They are also listed in this section.

Social login

Social login requires proper configuration of env variables with network ids e.g:

$ export FACEBOOK_ID='xx'
$ export GOOGLE_ID='xx'
$ export GITHUB_ID='xx'

Thus you will have to create:

• Facebook
• Google
• GitHub

Billing

For billing to work, you'll have to create a Stripe account and then:

$ export STRIPE_PUBLISHABLE_KEY='xx'
$ export SYNCANO_BILLING_EMAIL='xx'
$ export SYNCANO_SUPPORT_EMAIL='xx'

Icons

We are using set of Material Design Icons. Icons are attached as font in static assets src/assets so if you want to rebuild whole font just use npm command:

$ yarn run iconfont

and commit your changes.

Tests

Configuration

You will need to export E2E_EMAIL and E2E_PASSWORD for test account creation.

$ export E2E_EMAIL="xx"
$ export E2E_PASSWORD="xx"

It should be your Syncano account email address and password.

Running tests

⚠️ Our current E2E test are in testing phase, and they run on your Syncano account. Please be careful what you do.

ℹ️ E2E tests require development server to be running, be sure to start it.

E2E Test can be started by typing:

$ yarn run e2e

If you want only one test suite to run use:

$ yarn run e2e <tag>

Refer to the test files for the appropriate tag name.

If part of the tests fail for some reason, please check your configuration. When it appeared after your changes be sure to fix tests, if that is not the case please fill in the issue.

Contribute

Syncano Dashboard welcomes contributions in form of pull requests, as main purpose of open sourcing is to make dashboard better and easier to use. We also want to give our community a way to be a part of our project and create features they want.

Contact

If you have any questions, or just want to say hi, drop us a line at [email protected] or join us on slack.

License

MIT