{"id":26064791,"url":"https://github.com/syncano/syncano-dashboard","last_synced_at":"2025-03-17T14:14:36.660Z","repository":{"id":77440702,"uuid":"70053575","full_name":"Syncano/syncano-dashboard","owner":"Syncano","description":"The Syncano Dashboard built with React.","archived":false,"fork":false,"pushed_at":"2018-05-14T09:29:50.000Z","size":5580,"stargazers_count":287,"open_issues_count":3,"forks_count":47,"subscribers_count":18,"default_branch":"devel","last_synced_at":"2025-03-08T18:51:12.061Z","etag":null,"topics":["dashboard","e2e","material-ui","react","serverless","syncano"],"latest_commit_sha":null,"homepage":"https://www.syncano.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Syncano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-05T11:20:49.000Z","updated_at":"2025-03-08T15:50:05.000Z","dependencies_parsed_at":"2023-02-26T10:45:12.931Z","dependency_job_id":null,"html_url":"https://github.com/Syncano/syncano-dashboard","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Syncano%2Fsyncano-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Syncano%2Fsyncano-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Syncano%2Fsyncano-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Syncano%2Fsyncano-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Syncano","download_url":"https://codeload.github.com/Syncano/syncano-dashboard/tar.gz/refs/heads/devel","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047646,"owners_count":20389206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","e2e","material-ui","react","serverless","syncano"],"created_at":"2025-03-08T18:49:23.102Z","updated_at":"2025-03-17T14:14:36.639Z","avatar_url":"https://github.com/Syncano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Syncano Dashboard\n[![Slack](https://img.shields.io/badge/chat-on_slack-blue.svg)](https://www.syncano.io/slack-invite/)\n[![CircleCI](https://circleci.com/gh/Syncano/syncano-dashboard/tree/master.svg?style=shield\u0026circle-token=f0100f84a8aad047680750a7a97c064e0c384766)](https://circleci.com/gh/Syncano/syncano-dashboard/tree/master) [![PRs](https://img.shields.io/badge/PRs-yes-orange.svg)](README.md#contribute) [![license](https://img.shields.io/github/license/syncano/syncano-dashboard.svg)](README.md#license)\n\n\u003e Old version of Syncano Dashboard (v4) went into maintenance mode, you can find it at [syn4-devel](https://github.com/Syncano/syncano-dashboard/tree/syn4-devel) branch\n\n![Dashboard Screenshot](docs/open_dash.png)\n\n## Introduction\n\n[Syncano Dashboard](http://dashboard.syncano.io/) is a [React](https://facebook.github.io/react/) based web application that lets you easily visualize your data held on [Syncano](https://www.syncano.io/) 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](http://docs.syncano.io/docs/syncano-overview#section-the-dashboard) - all from one place.\n\n## Code samples\n\nHere is a sample code that will help you to get into our project.\nThis will show how we would create a dumb **CloseButton** component in react:\n\n```javascript\nimport React from 'react';\nimport { IconButton } from 'material-ui';\n\nconst CloseButton = (props) =\u003e {\n  const styles = {\n    style: {\n      position: 'absolute',\n      top: 10,\n      right: 10\n    },\n    iconStyle: {\n      color: '#b8c0c9'\n    }\n  };\n\n  return (\n    \u003cIconButton\n      data-e2e={props['data-e2e']}\n      style={{ ...styles.style, ...props.style }}\n      iconStyle={{ ...styles.iconStyle, ...props.iconStyle }}\n      onTouchTap={props.onTouchTap}\n      iconClassName=\"synicon-close\"\n    /\u003e\n  );\n};\n\nexport default CloseButton;\n```\nand then use it in **PageIntro** so user can close it, like this:\n\n```javascript\nimport React from 'react';\nimport { colors as Colors } from 'material-ui/styles';\nimport CloseButton from '../CloseButton/';\n\nconst PageIntro = ({ headline, text, actions, onRequestClose, show = 'true' }) =\u003e {\n  const styles = {\n    main: {\n      marginBottom: 24,\n      padding: 32,\n      background: 'rgba(243, 243, 243, 0.901961)',\n      textAlign: 'center',\n      position: 'relative'\n    },\n    headline: {\n      marginBottom: 24,\n      fontSize: 28,\n      color: Colors.grey900,\n      lineHeight: 1\n    },\n    text: {\n      margin: 0,\n      maxWidth: 640,\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      fontSize: 16,\n      lineHeight: '1.5em'\n    },\n    actions: {\n      marginTop: 32\n    }\n  };\n\n  if (show === 'false') {\n    return null;\n  }\n\n  return (\n    \u003cdiv style={styles.main}\u003e\n      {headline \u0026\u0026 \u003cdiv style={styles.headline}\u003e{headline}\u003c/div\u003e}\n      {text \u0026\u0026 \u003cdiv style={styles.text}\u003e{text}\u003c/div\u003e}\n      {actions \u0026\u0026 \u003cdiv style={styles.actions}\u003e{actions}\u003c/div\u003e}\n      {onRequestClose \u0026\u0026 \u003cCloseButton onTouchTap={onRequestClose} /\u003e}\n    \u003c/div\u003e\n  );\n};\n\nexport default PageIntro;\n```\n\n## Requirements\n\n### Dashboard\n\nDashboard is powered by [Node](https://nodejs.org).\nYou will need to install `7.0.0` version, as it is current that we are using. It should come with [npm](https://www.npmjs.com/) in `3.10.8` version.\n\n\u003e Without proper node version everything tends to blow up :fire: !\n\nRecommended way to manage node versions is [n](https://github.com/tj/n).\n\nIf you already have other version of node, just install `n`:\n\n```sh\n$ sudo yarn install -g n\n$ n 7.0.0\n```\n\nAnd then type `n` to prompt selection of an installed node.\nUse the up / down arrow to navigate, and press enter or the right arrow to select, or ^C to cancel:\n\n```sh\n$ n\n\n  ο 7.0.0\n    6.2.1\n```\n\n### E2E Tests\n\nFor E2E testing we use [nightwatchjs](http://nightwatchjs.org/) which is an automated UI testing framework powered by Node.\nIt uses [Selenium](https://github.com/SeleniumHQ/selenium) WebDriver API.\n\nTo start selenium you will also need:\n\n* [Java](https://java.com/en/download/)\n* [Java Development Kit](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)\n* [Chrome](https://www.google.com/chrome/)\n\nAll other necessary dependencies will be installed with dashboard and when starting tests for the first time.\n\n## Installation\n\n\u003e You will need Node, if you already have it follow instructions, if not refer to [Requirements](README.md#requirements) section.\n\nTo install dependencies just do:\n\n```sh\n$ cd syncano-dashboard/\n$ yarn install\n```\n\nand start local development server (available at https://localhost:8080/):\n\n```sh\n$ yarn start\n```\n\n## Configuration\n\nSome 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.\n\nWe also have some other commands or exports necessary for other parts of development. They are also listed in this section.\n\n### Social login\n\nSocial login requires proper configuration of env variables with network ids e.g:\n\n```sh\n$ export FACEBOOK_ID='xx'\n$ export GOOGLE_ID='xx'\n$ export GITHUB_ID='xx'\n```\n\nThus you will have to create:\n\n* [Facebook](https://developers.facebook.com/docs/facebook-login)\n* [Google](https://developers.google.com/identity/sign-in/web/sign-in)\n* [GitHub](https://developer.github.com/v3/oauth/)\n\n### Billing\n\nFor billing to work, you'll have to create a [Stripe](https://stripe.com/docs) account and then:\n\n```sh\n$ export STRIPE_PUBLISHABLE_KEY='xx'\n$ export SYNCANO_BILLING_EMAIL='xx'\n$ export SYNCANO_SUPPORT_EMAIL='xx'\n```\n\n### Icons\n\nWe are using set of [Material Design Icons](http://materialdesignicons.com/).\nIcons are attached as font in static assets `src/assets` so if you want to rebuild whole font just use npm command:\n\n```sh\n$ yarn run iconfont\n```\n\nand commit your changes.\n\n## Tests\n\n### Configuration\n\nYou will need to export `E2E_EMAIL` and `E2E_PASSWORD` for test account creation.\n\n```sh\n$ export E2E_EMAIL=\"xx\"\n$ export E2E_PASSWORD=\"xx\"\n```\n\nIt should be your **Syncano** account email address and password.\n\n### Running tests\n\n:warning: **Our current E2E test are in testing phase, and they run on your Syncano account.\nPlease be careful what you do.**\n\n:information_source: **E2E tests require development server to be running, be sure to start it.**\n\nE2E Test can be started by typing:\n\n```sh\n$ yarn run e2e\n```\n\nIf you want only one test suite to run use:\n\n```sh\n$ yarn run e2e \u003ctag\u003e\n```\n\nRefer to the test files for the appropriate tag name.\n\n\u003e 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.\n\n## Contribute\n\nSyncano Dashboard welcomes contributions in form of pull requests, as main purpose of open sourcing is to make dashboard better and easier to use.\nWe also want to give our community a way to be a part of our project and create features they want.\n\n## Contact\n\nIf you have any questions, or just want to say hi, drop us a line at [support@syncano.com](mailto:support@syncano.com) or join us on [slack](https://www.syncano.io/slack-invite/).\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncano%2Fsyncano-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncano%2Fsyncano-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncano%2Fsyncano-dashboard/lists"}