Code Monkey home page Code Monkey logo

ui's Introduction

Rancher UI

Perhaps you like managing Cattle.

Usage

Prerequisites:

If you're on a Mac and use Homebrew, you can follow these steps:

  brew install node watchman yarn

Setup:

  git clone 'https://github.com/rancher/ui'
  cd 'ui'
  ./scripts/update-dependencies

Run development server:

  yarn start

Connect to UI at https://localhost:8000/ . The server automatically picks up file changes, restarts itself, and reloads the web browser. This is intended only for development, see below for distributing customizations.

Run development server pointed at another instance of the Rancher API

  RANCHER="https://rancher-server" yarn start

RANCHER can also be hostname[:port] or ip[:port].

Compiling for distribution

Rancher releases include a static copy of the UI passed in during build as a tarball. To generate that, run:

  ./scripts/build-static

Customizing

We highly suggest making customizations as an ember-cli addon rather than forking this repo, making a bunch of changes and then fighting conflicts to keep it up to date with upstream forever. ui-driver-skel is an example addon that adds a custom screen for a docker-machine driver. If there is no way for you to get to what you want to change from an addon, PRs to this repo that add generalized hooks so that you can are accepted.

Project Structure

Rancher UI uses Ember CLI Pods for its project structure. We suggest reading the documentation if you have questions about the layout of the Rancher UI project.

Engines and In-repo Addons

Rancher UI uses Ember Engines to break the deliverable code into smaller chunks and only deliver what the end-user will need. When adding new components to an engine ensure you are only re-exporting the component back out of the engine if it is required and can not be placed in the shared in-repo addon. When adding a new service or dependency that is required by an engine ensure that you pass the dependencies to the engine, more info can be found here

The shared in-repo addon is a central repository of shared components for use with both the main app and any in-repo engine.

Translations

Rancher UI supports localization via translations files. You can swap translations live by utilizing the Language Picker located in the footer. If you would like to add your own translations files follow the directions below.

  • Fork the Rancher UI repo
  • Copy the en-us.yaml file located in /translations folder and rename using the <language-code>/<country-code>.yaml format (Supported Locales)
  • Replace the values on each key with you're new values corresponding to your language
  • Ensure you replace the languageName value as this is what will be displayed in the language picker in the UI
  • While developing you can use SHFT + L when not focused in an input or text area to toggle the languages between your currently selected language and a special none language to see what key values are missing
  • When you've finished you're translations issue a pull request back to the Rancher UI repo to have your translation included

Hosting remotely

If you want to customize the UI, re-packaging all of Rancher to distribute the UI is possible but not terribly convenient. Instead you can change Cattle to load the UI source from a remote web server:

Running Tests

  yarn global add ember-cli
  • yarn lint:hbs

  • yarn lint:js

  • yarn lint:js -- --fix

  • ember test

  • ember test --server

Bugs & Issues

Please submit bugs and issues to rancher/rancher with a title starting with [UI] .

Or just click here to create a new issue.

Useful links

License

Copyright (c) 2014-2024 Rancher Labs, Inc.

Licensed 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.

ui's People

Contributors

catherineluse avatar codyrancher avatar daiyuzeng avatar dependabot[bot] avatar displague avatar eva-vashkevich avatar furkatgofurov7 avatar garyhuang123 avatar gggitboy avatar go avatar hypnotortoise avatar jlamillan avatar lvuch avatar ly5156 avatar mantis-toboggan-md avatar mjura avatar momesgin avatar n313893254 avatar nwmac avatar rak-phillip avatar richard-cox avatar rmweir avatar shanewxy avatar shovanmaity avatar superseb avatar tfiduccia avatar vincent99 avatar westlywright avatar wujun2016 avatar zhiyu0729 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.