juju-core

Merge lp:~makyo/juju-core/gui-docs into lp:juju-core/docs

  1. gui-docs
  2. Merge into docs
Proposed by Madison Scott-Clary
Status: Merged
Merged at revision: 124
Proposed branch: lp:~makyo/juju-core/gui-docs
Merge into: lp:juju-core/docs
Diff against target: 320 lines (+286/-1)
3 files modified
htmldocs/howto-gui-management.html (+283/-0)
htmldocs/navigation.html (+1/-0)
htmldocs/navigation.json (+2/-1)
To merge this branch: bzr merge lp:~makyo/juju-core/gui-docs
Reviewer Review Type Date Requested Status
Nick Veitch Pending
Review via email: mp+186088@code.launchpad.net

Description of the change

Add GUI Management page.

This branch adds a page about managing a Juju environment with the GUI, including a few pictures and a video.

To post a comment you must log in.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'htmldocs/howto-gui-management.html'
2--- htmldocs/howto-gui-management.html 1970-01-01 00:00:00 +0000
3+++ htmldocs/howto-gui-management.html 2013-09-17 16:18:19 +0000
4@@ -0,0 +1,283 @@
5+<!DOCTYPE html>
6+<html>
7+<!--Head-->
8+ <head>
9+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
10+ <title>Juju Documentation</title>
11+ <script src="/wp-content/themes/ubuntu/library/js/all-yui.js"></script>
12+ <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic|Ubuntu+Mono" rel="stylesheet" type="text/css">
13+ <link rel="stylesheet" type="text/css" media="screen" href="https://juju.ubuntu.com/wp-content/themes/juju-website/css/reset.css">
14+ <link rel="shortcut icon" href="//assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico" />
15+ <link rel="stylesheet" type="text/css" media="screen" href="//assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css" />
16+ <link rel="stylesheet" type="text/css" media="screen" href="//assets.ubuntu.com/sites/ubuntu/latest/u/css/global.css" />
17+ <link rel="stylesheet" type="text/css" media="screen" href="https://juju.ubuntu.com/wp-content/themes/juju-website/css/960.css">
18+ <link rel="stylesheet" type="text/css" media="screen" href="https://juju.ubuntu.com/wp-content/themes/juju-website/css/home-new.css">
19+ <link rel="stylesheet" id="stacktack-css" href="https://juju.ubuntu.com/wp-content/plugins/stacktack/css/stacktack.min.css?ver=3.4.2" type="text/css" media="all">
20+ <link href="https://juju.ubuntu.com/docs/css/main.css?1375975745" rel="stylesheet" type="text/css">
21+
22+ <!--[if lt IE 9]>
23+ <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
24+ <![endif]-->
25+ </head>
26+<!--End-Head-->
27+ <body class="resources">
28+<!--Header-->
29+
30+ <header class="banner global" role="banner">
31+ <nav role="navigation" class="nav-primary nav-right">
32+ <div class="logo">
33+ <a class="logo-ubuntu" href="https://juju.ubuntu.com/">
34+ <img width="118" height="27" src="//assets.ubuntu.com/sites/ubuntu/latest/u/img/logo.png" alt="Juju logo" />
35+ <span>Juju</span>
36+ </a>
37+ </div>
38+ <ul>
39+ <li class="accessibility-aid"><a accesskey="s" href="#main-content">Jump to content</a></li>
40+ <li class="page_item page-item-8"><a href="https://juju.ubuntu.com/charms/">Charms</a></li>
41+ <li class="page_item page-item-10"><a href="https://juju.ubuntu.com/features/">Features</a></li>
42+ <li class="page_item page-item-12"><a href="https://juju.ubuntu.com/deployment/">Deploy</a></li>
43+ <li class="page_item page-item-14"><a href="https://juju.ubuntu.com/resources/">Resources</a></li>
44+ <li class="page_item page-item-16"><a href="https://juju.ubuntu.com/community/">Community</a></li>
45+ <li class="page_item page-item-18"><a href="https://juju.ubuntu.com/download/">Install Juju</a></li>
46+ </ul>
47+ <div id="box-search">
48+ <form class="search-form" method="get" id="searchform" action="https://juju.ubuntu.com/">
49+ <label class="off-left" for="s">Search:</label>
50+ <input class="form-text" type="text" value="" name="s" id="s" />
51+ <button class="off-left form-submit" type="submit" id="searchsubmit">Search</button>
52+ </form>
53+ </div>
54+ </nav>
55+ </header>
56+<!--End-Header-->
57+<!--Preamble-->
58+<div class="wrapper">
59+ <div id="main-content" class="inner-wrapper" role="main">
60+ <div class="row no-border">
61+ <div class="header-navigation-secondary"></div>
62+ <h2 class="pagetitle">Juju documentation</h2>
63+ </div>
64+ <section id="content" class="container-12">
65+ <div class="grid-12 doc-container">
66+ <div id="navlinks" class="grid-3 doc-navigation">LINKS</div>
67+ <div class="grid-9 doc-content">
68+<!--End-Preamble-->
69+ <article>
70+ <section id="what-is-the-gui">
71+ <h1>What is the GUI?</h1>
72+
73+ <p>Juju has a graphical user interface (GUI) available to help
74+ with the tasks of managing and monitoring your Juju environment.
75+ The GUI is a JavaScript and HTML web application that is
76+ encapsulated in its own charm, which can be installed to its own
77+ service or alongside another service. Once installed, the GUI will
78+ talk with Juju over a websocket to provide a real-time interface
79+ with the services installed, the units that comprise them, and the
80+ machines available. Additionally, the GUI can talk with the charm
81+ store in order to search, browse, and deploy charms to your
82+ environment.</p>
83+ </section>
84+
85+ <section id="installation">
86+ <h1>Installation</h1>
87+ <p>Installing the GUI works the same as installing any other
88+ charm:</p>
89+
90+ <pre>
91+ juju deploy juju-gui
92+ juju expose juju-gui
93+ </pre>
94+
95+ <p>Once the service is deployed and exposed, you can find the
96+ address for the GUI by running <span class="pre">juju status</span>
97+ and looking for the <span class="pre">public-address</span> field
98+ for the juju-gui service</p>
99+
100+ <p>In more recent versions of Juju, you can also deploy the GUI
101+ along-side another service on an existing machine. This might be
102+ the case if you wish to conserve resources. The following command
103+ will deploy juju-gui to an existing machine 1:</p>
104+
105+ <pre>
106+ juju deploy --to 1 juju-gui
107+ juju expose juju-gui
108+ </pre>
109+
110+ <p>Check <span class="pre">juju help deploy</span> to find out more
111+ about this option, and whether or not it is available in your
112+ version.</p>
113+
114+ <p class="note"><strong>Note:</strong> If you are deploying behind
115+ a firewall, make sure to check out the charm's <a
116+ href="https://jujucharms.com/fullscreen/search/precise/juju-gui/#bws-readme"
117+ target="_blank">README</a> for more information on getting the
118+ GUI up and running and talking to your environment</p>
119+ </section>
120+
121+ <h2>Configuration</h2>
122+ <p>There are a few pertinent configuration options that might help
123+ you when working with the GUI. You can read about all of them on
124+ the GUI's <a
125+ href="https://jujucharms.com/fullscreen/search/precise/juju-gui/"
126+ target="_blank">charm page</a>, but there is one that is worth
127+ discussing immediately:
128+
129+ <p><span class="pre">read-only</span> - this option will cause the
130+ GUI to display services, units, and machines, along with all of
131+ their meta-data, in a read-only mode, meaning that you will not be
132+ able to make changes to the environment through the GUI. This is
133+ good for a monitoring type scenario.</p>
134+
135+ <p class="note"><strong>Note:</strong> read-only mode in the GUI
136+ simply prevents actions taken within the GUI from being sent to the
137+ Juju environment, and is <em>not</em> additional security against
138+ the Juju API.</p>
139+
140+ <section id="using">
141+ <h1>Using the GUI</h1>
142+ <p>The GUI has a few different uses. You can use it to monitor the
143+ status of your environment, and you can use it to interact with your
144+ environment.</p>
145+
146+ <h2>Monitoring</h2>
147+ <p>One of the primary uses for the GUI, particularly in read-only
148+ mode, is that of monitoring. The GUI provides not only an overview
149+ of the health of your environment and the services comprising it,
150+ but also details into the units and machines comprising those
151+ services.</p>
152+
153+ <img src="./media/gui_management-status.png" width="600" />
154+
155+ <p>The blocks representing services contain a health indicator
156+ showing the percentage of running units, pending units, and units in
157+ an error state. By viewing the service, you can also see a more
158+ in-depth list of units and their states, as well as further
159+ information about them such as their public address, relations, and
160+ more</p>
161+
162+ <img src="./media/gui_management-unit.png" width="600" />
163+
164+ <p>The GUI can be used to offer insight into not only the status of
165+ your cloud deployment, but also the overall structure of your
166+ services and how they are related, adding to the ability to
167+ visualize the way in which all of the components of your project
168+ work together.</p>
169+
170+ <h2>Building</h2>
171+ <p>Another use for the GUI is building and managing an environment
172+ in an intuitive and graphical interface. The GUI gives you access
173+ to all of the charms in the Charm Store, allowing you to deploy
174+ hundreds of different services to your environment, or even to a
175+ sandbox environment, which you can then export to use later.</p>
176+
177+ <p>On the left side of the GUI, all of the charms in the charm store
178+ are visible. Clicking on these will provide all of the details
179+ about the charm, including information about whether or not it's
180+ recommended, the number of times it has been deployed and
181+ contributed to, and so on. From here, you can add the charm to your
182+ environment (or simply drag it onto the canvas from the side-bar),
183+ which will give you the option to configure and deploy a new
184+ service.</p>
185+
186+ <img src="./media/gui_mangement-charmstore.png" width="600" />
187+
188+ <p>Once deployed, clicking on the service will allow you to not only
189+ view the units and machines comprising it, but also to scale the
190+ service out or back, change constraints on new units, re-configure
191+ the service, resolve or retry units in an error state and more.</p>
192+
193+ <p>Relations can be added between services - even in the case of
194+ ambiguous relationships, such as a master or slave database - by
195+ clicking the 'add relation' menu item on one service, and then
196+ clicking on the destination service.</p>
197+
198+ <img src="./media/gui_management-build_relation.png" width="600" />
199+
200+ <p>The GUI will attempt to position services automatically so that
201+ they do not overlap. However, you may drag the services around the
202+ canvas so that they're positioned in a way that makes sense to you.
203+ These positions are stored in your Juju environment, so the next
204+ time you open the GUI, things will be as you left them.</p>
205+
206+ <p>For an example of this, check out this demonstration of building
207+ an OpenStack instance in Juju using the GUI:</p>
208+ <p style="text-align: center">
209+ <iframe width="560" height="315"
210+ src="//www.youtube.com/embed/V2H3fat0K5w" frameborder="0"
211+ allowfullscreen></iframe>
212+ </p>
213+ </section>
214+ </article>
215+<!--Postamble-->
216+ </div>
217+ </div>
218+ </section>
219+ </div>
220+</div>
221+<!--End-Postamble-->
222+<!--Footer-->
223+ <footer class="global clearfix" role="contentinfo">
224+ <nav role="navigation">
225+ <div class="footer-a">
226+ <div class="clearfix">
227+ <ul>
228+ <li>
229+ <h2><a href="/">Juju</a></h2>
230+ <ul>
231+ <li><a href="/charms">Charms</a></li>
232+ <li><a href="/features">Features</a></li>
233+ <li><a href="/deployment">Deployment</a></li>
234+ </ul>
235+ </li>
236+ <li>
237+ <h2><a href="/resources">Resources</a></h2>
238+ <ul>
239+ <li><a href="/resources/juju-overview/">Overview</a></li>
240+ <li><a href="/docs/">Documentation</a></li>
241+ <li><a href="/resources/the-juju-gui/">The Juju web UI</a></li>
242+ <li><a href="/docs/authors-charm-store.html">The charm store</a></li>
243+ <li><a href="/docs/getting-started.html#test">Tutorial</a></li>
244+ <li><a href="/resources/videos/">Videos</a></li>
245+ <li><a href="/resources/easy-tasks-for-new-developers/">Easy tasks for new developers</a></li>
246+ </ul>
247+ </li>
248+ <li>
249+ <h2><a href="/community">Community</a></h2>
250+ <ul>
251+ <li><a href="/community/blog/">Juju Blog</a></li>
252+ <li><a href="/events/">Events</a></li>
253+ <li><a href="/community/weekly-charm-meeting/">Weekly charm meeting</a></li>
254+ <li><a href="/community/charmers/">Charmers</a></li>
255+ <li><a href="/docs/authors-charm-writing.html">Write a charm</a></li>
256+ <li><a href="/docs/contributing.html">Help with documentation</a></li>
257+ <li><a href="https://bugs.launchpad.net/juju-website/+filebug">File a bug</a></li> <li><a href="/labs/">Juju Labs</a></li>
258+ </ul>
259+ </li>
260+ <li>
261+ <h2><a href="https://jujucharms.com/sidebar/">Try Juju</a></h2>
262+ <ul>
263+ <li><a href="https://jujucharms.com/">Charm store</a></li>
264+ <li><a href="/download/">Download Juju</a></li>
265+ </ul>
266+ </li>
267+ </ul>
268+ </div>
269+ </div>
270+ </nav>
271+ <div class="legal clearfix">
272+ <p>&copy; 2013 Canonical Ltd. Ubuntu and Canonical are registered trademarks of <a href="http://canonical.com">Canonical Ltd</a>.</p>
273+ </div>
274+ </footer>
275+
276+<!--End-Footer-->
277+<!--Scripts-->
278+ <script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>
279+ <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
280+ <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
281+ <script src="//d38yea5fb4e2oh.cloudfront.net/jquery.stacktack.min.js"></script>
282+ <script type="text/javascript" src="https://juju.ubuntu.com/docs/js/main.js"></script>
283+ <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
284+ <script src="//assets.ubuntu.com/sites/ubuntu/latest/u/js/core.js"></script>
285+ <script src="//assets.ubuntu.com/sites/ubuntu/latest/u/js/global.js"></script>
286+<!--End-Scripts-->
287+</body></html>
288
289=== added file 'htmldocs/media/gui_management-build_relation.png'
290Binary files htmldocs/media/gui_management-build_relation.png 1970-01-01 00:00:00 +0000 and htmldocs/media/gui_management-build_relation.png 2013-09-17 16:18:19 +0000 differ
291=== added file 'htmldocs/media/gui_management-status.png'
292Binary files htmldocs/media/gui_management-status.png 1970-01-01 00:00:00 +0000 and htmldocs/media/gui_management-status.png 2013-09-17 16:18:19 +0000 differ
293=== added file 'htmldocs/media/gui_management-unit.png'
294Binary files htmldocs/media/gui_management-unit.png 1970-01-01 00:00:00 +0000 and htmldocs/media/gui_management-unit.png 2013-09-17 16:18:19 +0000 differ
295=== added file 'htmldocs/media/gui_mangement-charmstore.png'
296Binary files htmldocs/media/gui_mangement-charmstore.png 1970-01-01 00:00:00 +0000 and htmldocs/media/gui_mangement-charmstore.png 2013-09-17 16:18:19 +0000 differ
297=== modified file 'htmldocs/navigation.html'
298--- htmldocs/navigation.html 2013-09-17 15:44:05 +0000
299+++ htmldocs/navigation.html 2013-09-17 16:18:19 +0000
300@@ -23,6 +23,7 @@
301 <li class=""><a href="howto.html">How to...</a></li>
302 <li class=" sub"><a href="howto-node.html">Deploy a Node.js app</a></li>
303 <li class=" sub"><a href="howto-rails.html">Test and deploy on Rails</a></li>
304+ <li class=" sub"><a href="howto-gui-management.html">Manage Juju with the GUI</a></li>
305 </ul>
306 <h1>Charm Authors</h1>
307 <ul class="no-margin">
308
309=== modified file 'htmldocs/navigation.json'
310--- htmldocs/navigation.json 2013-09-17 14:00:11 +0000
311+++ htmldocs/navigation.json 2013-09-17 16:18:19 +0000
312@@ -32,7 +32,8 @@
313 "link": "howto.html",
314 "children": {
315 "Deploy a Node.js app": "howto-node.html",
316- "Test and deploy on Rails": "howto-rails.html"
317+ "Test and deploy on Rails": "howto-rails.html",
318+ "Manage Juju with the GUI": "howto-gui-management.html"
319 }
320 }
321

Subscribers

People subscribed via source and target branches