/dcos-ui

The UI for The Datacenter Operating System

Primary LanguageJavaScriptApache License 2.0Apache-2.0

DC/OS UI Velocity

Requirements

Node 4.x (and above) is required. We suggest using nvm or n to keep multiple Node versions on your system.

DC/OS Installation Instructions:

  1. Follow the instructions here to install a local cluster.
  2. In your dcos-vagrant repo from the previous step, run:
vagrant ssh m1
  1. Open nginx.conf for adminrouter with:
sudo vi /opt/mesosphere/active/adminrouter/nginx/conf/nginx.conf
  1. Find the line:
root /opt/mesosphere/active/dcos-ui/usr;

and comment out by changing the line to:

# root /opt/mesosphere/active/dcos-ui/usr;
  1. Right below the commented out line, add
location ~ ^/(?!service|mesos).*\.(js|css|html|png|jpg|gif|jpeg|swf|map)$ {
  expires -1;
  add_header Cache-Control "no-store";
  proxy_pass http://10.0.2.2:4200;
  proxy_http_version 1.1;
  proxy_set_header Connection "";
}
  1. Save and quit vi
  2. Restart adminrouter with sudo service dcos-adminrouter restart. Your cluster is now prepped for local development.
  3. Start your local development server for DC/OS.
  4. Navigate to http://m1.dcos.

NOTE: http://m1.dcos will only resolve if both your DC/OS UI Server and DC/OS Cluster are operational and running.

DC/OS UI

This repository contains the DC/OS UI application.

Installation Instructions:
  1. Clone this repository (https://github.com/dcos/dcos-ui)
  2. Install NPM
  3. Install development dependencies
npm install
npm install -g gulp
  1. Setup development project configuration
  • Copy src/js/config/Config.template.js to src/js/config/Config.dev.js
  • Override variables in Config.dev.js to reflect your local development configuration
  1. Run development environment
npm run serve

After installing all development dependencies and configuring your local environment (steps 1-4 above), you can run test by running npm test. You can build assets, without actually running the DC/OS UI server by running npm run dist. If you are actively developing, you may want to run npm run livereload to avoid having to refresh your browser with every change.

Adding npm Package Dependencies

If you want to add a new npm package to 'node_modules':

  1. Install the new package

  • Install and save dependencies in package.json

    npm install [your package] --save

  • Then, add the package to devDependencies

    npm install [your package] --save-dev

  1. Create a synced npm-shrinkwrap.json with devDependencies included by running

    npm shrinkwrap --dev

  2. Commit to repository

Development Setup (Sublime Text Only)

  1. Add the following to your Sublime Text User Settings:
{
  ...
  "rulers": [80], // lines no longer than 80 chars
  "tab_size": 2, // use two spaces for indentation
  "translate_tabs_to_spaces": true, // use spaces for indentation
  "ensure_newline_at_eof_on_save": true, // add newline on save
  "trim_trailing_white_space_on_save": true, // trim trailing white space on save
  "default_line_ending": "unix"
}
  1. Add Sublime-linter with jshint & jsxhint:
  • Installing SublimeLinter is straightforward using Sublime Package Manager, see instructions
  • SublimeLinter-eslint needs a global eslint in your system, see instructions
  1. Syntax Highlihgting for files containing JSX

  • Install Babel using Sublime Package Manager, see instructions. From here you can decide to use Babel for all .js files. See their docs for that. If you don't want to do that, continue reading.

  • Installing ApplySyntax using Sublime Package Manager, see instructions

  • Open up the user configuration file for ApplySyntax: Sublime Text -> Preferences -> Package Settings -> ApplySyntax -> Settings - User

  • Replace the contents with this:

    {
  // Put your custom syntax rules here:
  "syntaxes": [
    {
      "name": "Babel/JavaScript (Babel)",
      "rules": [
        {"first_line": "^\\/\\*\\*\\s@jsx\\sReact\\.DOM\\s\\*\\/"}
      ]
    }
  ]
}

Testing

See more info on testing here.

License and Author

Copyright 2016 Mesosphere, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this repository except in compliance with the License.

The contents of this repository are solely licensed under the terms described in the LICENSE file included in this repository.

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.

Authors are listed in Authors.md file.