├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── containers-demo.yaml
├── demo.html
├── google-cloud-compute.html
├── google-cloud-config.html
├── google-cloud.css
├── img
    ├── .DS_Store
    └── vm.png
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .bowerrc
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2014 Google Inc
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     https://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | google-cloud
 2 | =============
 3 | 
 4 | This repository contains polymer elements for interacting
 5 | with [Google Cloud Platform](http://example.com/) services.
 6 | 
 7 | See the [component landing page](https://googlewebcomponents.github.io/google-cloud) for more information.
 8 | 
 9 | ### Naming Conventions
10 | Google Cloud Platform (GCP) encompasses a wide variety of
11 | products and APIs so it's important to establish a clear and
12 | consistent naming scheme for the associated components.
13 | We will following the naming scheme implemented by the
14 | [Google Cloud SDK](https://developers.google.com/cloud/sdk/),
15 | which has established a well defined naming scheme for a
16 | collection of commands and subcommands for requesting GCP
17 | services.
18 | 
19 | Our approach is to map the service identification part of the
20 | Cloud SDK's command syntax into a hyphen separated element
21 | name, which gives us the following mappings:
22 | 
23 | | Cloud SDK Syntax   | Polymer Element Name   |
24 | | ------------------ | ---------------------- |
25 | | gcloud auth        | google-cloud-auth      |
26 | | gcloud config      | google-cloud-config    |
27 | | App Engine(*)      | google-cloud-appengine |
28 | | BigQuery(*)        | google-cloud-bigquery  |
29 | | gcloud compute     | google-cloud-compute   |
30 | | Cloud Datastore(*) | google-cloud-datastore |
31 | | gcloud dns         | google-cloud-dns       |
32 | | Cloud Storage      | google-cloud-storage   |
33 | | gcloud sql         | google-cloud-sql       |
34 | 
35 | (*) = command not yet implemented in Cloud SDK.
36 | 
37 | Within each product (e.g. google-cloud-compute, google-cloud-storage),
38 | there will be a potentially large number of sub-components
39 | (e.g. google-cloud-compute-instance, google-cloud-compute-disk,
40 | google-cloud-storage-bucket, google-cloud-storage-object, etc.).
41 | The taxonomy for each set of sub-components will necessarily
42 | vary by product and is left to the design and implementation
43 | of each product's components. Wherever possible, designers
44 | of new components in this collection should take care to
45 | following the naming contention described here, i.e. to
46 | choose names that model those used by the Cloud SDK and
47 | to try to be consistent with other components in this
48 | collection.
49 | 
50 | ### Current Status of this Element Collection
51 | 
52 | This component collection is still in a very early state
53 | of development. Initially, it includes functionality for
54 | a small subset of the full suite of components anticipated,
55 | however, the goal is to expand this collection over time
56 | to provide a comprehensive set of declarative web components
57 | for interacting with the full set of Google Cloud Platform
58 | products and services.
59 | 
60 | Interested in contributing? We'd love to have your help!
61 | Please fill out either the individual or corporate
62 | Contributor License Agreement (CLA):
63 | 
64 | * If you are an individual writing original source code and
65 | you're sure you own the intellectual property, then you'll
66 | need to sign an [https://developers.google.com/open-source/cla/individual](individual CLA).
67 | 
68 | * If you work for a company that wants to allow you to contribute your work, then you'll need to sign a [https://developers.google.com/open-source/cla/corporate](corporate CLA).
69 | 
70 | Follow either of the two links above to access the appropriate
71 | CLA and instructions for how to sign and return it. Once we
72 | receive it, we'll be able to accept your pull requests.
73 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "google-cloud",
 3 |   "version": "0.0.2",
 4 |   "description": "Polymer components for accessing Google Cloud Platform services.",
 5 |   "homepage": "https://googlewebcomponents.github.io/google-cloud",
 6 |   "main": "google-cloud.html",
 7 |   "authors": [
 8 |     "Marc Cohen <marccohen@google.com>"
 9 |   ],
10 |   "license": "Apache2",
11 |   "ignore": [
12 |     "**/.*",
13 |     "node_modules",
14 |     "bower_components",
15 |     "test",
16 |     "tests",
17 |     "../"
18 |   ],
19 |   "keywords": [
20 |     "web-component",
21 |     "web-components",
22 |     "polymer",
23 |     "cloud",
24 |     "google"
25 |   ],
26 |   "dependencies": {
27 |     "polymer": "Polymer/polymer#^0.5.2",
28 |     "core-meta": "Polymer/core-meta#~0.5.2",
29 |     "google-apis": "GoogleWebComponents/google-apis#~0.4.3",
30 |     "google-signin": "GoogleWebComponents/google-signin#~0.3.0"
31 |   }
32 | }
33 | 
34 | 


--------------------------------------------------------------------------------
/containers-demo.yaml:
--------------------------------------------------------------------------------
1 | version: v1beta1
2 | containers:
3 | - name: nodejs-hello
4 |   image: google/nodejs-hello
5 |   ports:
6 |     - name: port8080
7 |       hostPort: 8080
8 |       containerPort: 8080
9 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
 3 | 
 4 | <html>
 5 | <head>
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 7 |   <title>google-cloud Demo</title>
 8 | 
 9 |   <script src="../webcomponentsjs/webcomponents.js"></script>
10 |   <link rel="import" href="../google-signin/google-signin.html">
11 |   <link rel="import" href="google-cloud-config.html">
12 |   <link rel="import" href="google-cloud-compute.html">
13 |   </style>
14 | </head>
15 | <body unresolved>
16 |   <div>
17 |     <google-signin
18 |       clientId="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleusercontent.com"
19 |       scopes="https://www.googleapis.com/auth/compute">
20 |     </google-signin>
21 |   </div>
22 | 
23 |   <!-- Demo the google-cloud elements. -->
24 |   <polymer-element name="sample-cloud">
25 |     <template>
26 |       <p>Testing config for Project ID: <input type="text" name="projectId" value="{{projectId}}"></p>
27 | 
28 |       <google-cloud-config id="config"
29 |           project="{{projectId}}">
30 |       </google-cloud-config>
31 | 
32 |       <google-cloud-compute-instance id="codelab-vm" name="codelab-vm" 
33 |           diskImage="google-containers:container-vm-v20140522" 
34 |           metadata='[{"key": "google-container-manifest", "value": "version: v1beta1\ncontainers:\n- name: nodejs-hello\n  image: google/nodejs-hello\n  ports:\n    - name: port8080\n      hostPort: 8080\n      containerPort: 8080\n"}]'
35 |           onclick="this.create()">
36 |         <img src="img/vm.png" height="70" width="70"></img>
37 |       </google-cloud-compute-instance>
38 |     </template>
39 | 
40 |     <script>
41 |       Polymer('sample-cloud', {
42 |         publish: {
43 |           projectId: ''
44 |         }
45 |       });
46 |     </script>
47 |   </polymer-element>
48 | 
49 |   <sample-cloud></sample-cloud>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/google-cloud-compute.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |   This file contains a collection of product specific
  3 |   components for interacting with Google Compute Engine,
  4 |   organized under the google-cloud-compute namespace.
  5 | -->
  6 | 
  7 | <link rel="import" href="../polymer/polymer.html">
  8 | <link rel="import" href="../google-apis/google-client-api.html">
  9 | <link rel="import" href="../google-signin/google-signin-aware.html">
 10 | <link rel="import" href="google-cloud-config.html">
 11 | 
 12 | <!--
 13 | google-cloud-compute-base is a base element containing common
 14 | data and behavior to be inherited by other components
 15 | within this collection. This element is intended for
 16 | internal use within this component collection - it should
 17 | not be directly specified by developers.
 18 | -->
 19 | 
 20 | <polymer-element name="google-cloud-compute-base" attributes="scope">
 21 | 
 22 |   <link rel="stylesheet" href="google-cloud.css">
 23 | 
 24 |   <template>
 25 |     <style>
 26 |       .iblock { display: inline-block; }
 27 |       .progress { visibility: {{progressDisplay}}; }
 28 |     </style>
 29 |     <span class="iblock" style="border:7px solid {{borderColor}};">
 30 |       <span class="iblock" style="border:3px solid white">
 31 |         <content></content>
 32 |       </span>
 33 |     </span>
 34 |     <progress class="progress"></progress>
 35 |     <google-api-loader id="compute" name="compute" version="v1"></google-api-loader>
 36 |     <google-signin-aware
 37 |       scopes="https://www.googleapis.com/auth/compute"
 38 |       on-google-signin-aware-success="{{authenticated}}">
 39 |     </google-signin-aware>
 40 |     <google-cloud-config id="meta"></google-cloud-config>
 41 |   </template>
 42 | 
 43 |   <script>
 44 |     (function() {
 45 |       // Run once. Private and static to the element.
 46 |       var API_VERSION = 'v1';
 47 | 
 48 |       Polymer({
 49 | 
 50 |        /**
 51 |          * The `author` attribute sets an initial author
 52 |          *
 53 |          * @attribute author
 54 |          * @type string
 55 |          */
 56 |         author: 'Marc Cohen',
 57 | 
 58 |         borderColor: 'red',
 59 | 
 60 |         progressDisplay: 'hidden',
 61 | 
 62 |         baseUrl: 'https://www.googleapis.com/compute/' +
 63 |                  API_VERSION + '/projects/',
 64 | 
 65 |         /**
 66 |          * 'scope' is the Compute Engine scope associated
 67 |          * with a given resource. In practical terms, if will
 68 |          * be a string taken from the following set of values:
 69 |          * 'global', 'regional', 'zonal'
 70 |          *
 71 |          * @attribute scope
 72 |          * @type string
 73 |          * @default 'global'
 74 |          */
 75 |         scope: 'global',
 76 | 
 77 |         isAuthenticated: false,
 78 | 
 79 |         ready: function() {
 80 |           this.config = this.$.meta.list[0];
 81 |         },
 82 | 
 83 |         authenticated: function(e, details) {
 84 |           this.$.compute.auth.setToken(details.result);
 85 |           this.isAuthenticated = true;
 86 |         },
 87 | 
 88 |         getWaitFunc: function() {
 89 |           var wait_func = null;
 90 |           if (this.scope === 'global') {
 91 |             wait_func = this.$.compute.api.globalOperations;
 92 |           } else if (this.scope === 'regional') {
 93 |             wait_func = this.$.compute.api.regionOperations;
 94 |           } else if (this.scope === 'zonal') {
 95 |             wait_func = this.$.compute.api.zoneOperations;
 96 |           }
 97 |           return wait_func;
 98 |         },
 99 | 
100 |         wait: function(result) {
101 |           console.log(result);
102 |           var get_req = {
103 |             operation: result.name,
104 |             project: this.config.project,
105 |           }
106 |           if (this.scope === 'zonal') {
107 |             get_req['zone'] = this.zone;
108 |           }
109 |           this.getWaitFunc().get(get_req).execute(function(result) {
110 |             if (result.status != "DONE") {
111 |               this.async(this.wait, result, 1000);
112 |             } else {
113 |               this.fire('done', this.name);
114 |             }
115 |           }.bind(this))
116 |         }
117 |       });
118 |     })();
119 |   </script>
120 | </polymer-element>
121 | 
122 | <!--
123 | google-cloud-compute-image creates a private Compute Engine image
124 | in the project configured by a google-cloud-config element.
125 | 
126 | ##### Example
127 | 
128 |   <google-cloud-gapi ...></google-cloud-gapi>
129 |   <google-cloud-config ...></google-cloud-config>
130 |   <google-cloud-compute-image id="my-image"
131 |     src="gs://my-bucket/my-object.tar.gz">
132 |   </google-cloud-compute-image>
133 | 
134 | @element google-cloud-compute-image
135 | @blurb google-cloud-compute-image creates a Google Compute Engine image from a Google Cloud Storage object.
136 | @status alpha
137 | @url https://googlewebcomponents.github.io/google-cloud
138 | -->
139 | 
140 | <polymer-element name="google-cloud-compute-image"
141 |   attributes="name src"
142 |   extends="google-cloud-compute-base">
143 | 
144 |   <script>
145 |     Polymer({
146 |       /**
147 |        * 'name' is the name to assign the image.
148 |        * @attribute name
149 |        * @type string
150 |        */
151 |       name: '',
152 | 
153 |       /**
154 |        * 'src' points to the Cloud Storage object to use
155 |        * as input for creating the image.
156 |        *
157 |        * @attribute src
158 |        * @type string
159 |        */
160 |       src: '',
161 | 
162 |       /**
163 |        * The 'create' method creates the Google Cloud Engine image.
164 |        * @method create
165 |        * @return {Object} Returns undefined.
166 |        */
167 |       create: function() {
168 |         var payload = {
169 |           project: this.config.project,
170 |           resource: {
171 |             name: this.name,
172 |             sourceType: 'RAW',
173 |             rawDisk: {
174 |               source: this.src
175 |             }
176 |           }
177 |         };
178 |         this.$.compute.api.images.insert(payload).execute(this.wait.bind(this));
179 |       }
180 |     });
181 |   </script>
182 | </polymer-element>
183 | 
184 | <!--
185 | google-cloud-compute-disk creates a Google Compute Engine disk.
186 | Suitable defaults are chosen for all attributes so that,
187 | in the simplest use case, you can create a disk without
188 | specifying any attributes.
189 | 
190 | ##### Example
191 | 
192 |   <google-cloud-gapi ...></google-cloud-gapi>
193 |   <google-cloud-config ...></google-cloud-config>
194 |   <google-cloud-compute-disk id="my-disk"></google-cloud-compute-disk>
195 | 
196 | @element google-cloud-compute-disk
197 | @blurb google-cloud-compute-disk creates a Google Compute Engine disk
198 | @status alpha
199 | @url https://googlewebcomponents.github.io/google-cloud
200 | -->
201 | 
202 | <polymer-element name="google-cloud-compute-disk"
203 |   attributes="name zone size image"
204 |   extends="google-cloud-compute-base">
205 | 
206 |   <script>
207 |     Polymer({
208 |       // Force zonal scope in base element.
209 |       scope: 'zonal',
210 | 
211 |       /**
212 |        * 'name' is the name to assign to the new disk.
213 |        * @attribute name
214 |        * @type string
215 |        * @default 'my-disk'
216 |        */
217 |       name: 'my-disk',
218 | 
219 |       /**
220 |        * 'zone' is the desired location for the new disk.
221 |        * @attribute zone
222 |        * @type string
223 |        * @default 'us-central1-a'
224 |        */
225 |       zone: 'us-central1-a',
226 | 
227 |       /**
228 |        * 'size' is the capacity (in GB) for the new disk.
229 |        * @attribute size
230 |        * @type integer
231 |        * @default '10'
232 |        */
233 |       size: 10,
234 | 
235 |       /**
236 |        * 'image' is the image to use for the new disk.
237 |        * It may contain a ':', in which case the image
238 |        * string is assumed to contain a project and
239 |        * and image name with that project, e.g.,
240 |        *
241 |        *   debian-cloud:debian-7-wheezy-v20140606
242 |        *
243 |        * It's also acceptable to specify a null project
244 |        * with or without the colon, which assumes the
245 |        * desired image is to be taken from the project
246 |        * configured by the <google-cloud-config> element.
247 |        *
248 |        * @attribute image
249 |        * @type string
250 |        * @default 'debian-cloud:debian-7-wheezy-v20140606'
251 |        */
252 |       image: 'debian-cloud:debian-7-wheezy-v20140606',
253 | 
254 |       /**
255 |        * The 'create' method creates the Compute Engine disk.
256 |        * @method create
257 |        * @return {Object} Returns undefined.
258 |        */
259 |       create: function() {
260 |         var li = this.image.split(':');
261 |         var image_project = '';
262 |         var image_name = '';
263 |         if (li.length === 2) {
264 |           image_project = li[0];
265 |           image_name = li[1];
266 |         } else if (li.length === 1) {
267 |           image_project = this.config.project;
268 |           image_name = li[0];
269 |         } else {
270 |           image_project = this.config.project;
271 |           image_name = 'default';
272 |         }
273 |         var payload = {
274 |           project: this.config.project,
275 |           zone: this.zone,
276 |           resource: {
277 |             name: this.name,
278 |             sizeGb: this.size,
279 |             sourceImage: this.baseUrl + image_project +
280 |                          '/global/images/' + image_name
281 |           }
282 |         };
283 |         this.$.compute.api.disks.insert(payload).execute(this.wait.bind(this));
284 |       }
285 |     });
286 |   </script>
287 | </polymer-element>
288 | 
289 | <!--
290 | google-cloud-compute-instance creates a Compute Engine virtual
291 | machine. Suitable defaults are chosen for all attributes
292 | so that, in the simplest use case, you can create a disk
293 | without specifying any attributes.
294 | 
295 | ##### Example
296 | 
297 |     Simple use case, wrapping text name and taking all defaults...
298 | 
299 |     <google-cloud-gapi ...></google-cloud-gapi>
300 |     <google-cloud-config ...></google-cloud-config>
301 |     <google-cloud-compute-instance onclick="this.create()">my-vm</google-cloud-compute-instance>
302 | 
303 |     More involved example, wrapping an image and specifying a desired boot
304 |     image via the image attribute. This example also requests that the VM
305 |     be started in the europe-west1 zone, and specifies some metadata
306 |     to be consumed by the new VM via the metadata attribute...
307 | 
308 |     <google-cloud-gapi ...></google-cloud-gapi>
309 |     <google-cloud-config ...></google-cloud-config>
310 |     <google-cloud-compute-instance id="codelab-vm" name="codelab-vm"
311 |         type="n1-standard-1"
312 |         zone="europe-west-1"
313 |         diskImage="google-containers:container-vm-v20140522"
314 |         metadata='[{"key": "google-container-manifest", "value": "version: v1beta1\ncontainers:\n- name: nodejs-hello\n  image: google/nodejs-hello\n  ports:\n    - name: port8080\n      hostPort: 8080\n      containerPort: 8080\n"}]'
315 |         onclick="this.create()">
316 |       <img src="img/vm.png" height="70" width="70"></img>
317 |     </google-cloud-compute-instance>
318 | 
319 | @element google-cloud-compute-instance
320 | @blurb google-cloud-compute-instance creates a Compute Engine VM
321 | @status alpha
322 | @url https://googlewebcomponents.github.io/google-cloud
323 | -->
324 | 
325 | <polymer-element name="google-cloud-compute-instance"
326 |   attributes="name type zone metadata netName diskName diskType diskBoot diskAutodel diskSize diskImage"
327 |   extends="google-cloud-compute-base">
328 | 
329 |   <script>
330 |     Polymer({
331 |       // Element state must be one of:
332 |       // 'init', 'starting', 'started', 'stopping'
333 |       state: 'init',
334 | 
335 |       // Force zonal scope in base element.
336 |       scope: 'zonal',
337 | 
338 |       /**
339 |        * 'name' is the name of the new virtual machine.
340 |        * @attribute name
341 |        * @type string
342 |        * @default 'my-vm'
343 |        */
344 |       name: 'my-vm',
345 | 
346 |       /**
347 |        * 'zone' is the desired zone for the new VM.
348 |        * @attribute zone
349 |        * @type string
350 |        * @default 'us-central1-a'
351 |        */
352 |       zone: 'us-central1-a',
353 | 
354 |       /**
355 |        * 'type' is the desired machine type.
356 |        * @attribute type
357 |        * @type string
358 |        * @default 'n1-standard-1'
359 |        */
360 |       type: 'n1-standard-1',
361 | 
362 |       /**
363 |        * 'metadata' is a desired key/value pair of metadata to send to the new VM.
364 |        * Following the convention established by the gcloud compute command line,
365 |        * the key/value pair are expected to be delineated by an '=' character.
366 |        *
367 |        * @attribute metadata
368 |        * @type string
369 |        * @default ''
370 |        */
371 |       metadata: '',
372 | 
373 |       /**
374 |        * 'netName' is the desired network name.
375 |        * @attribute netName
376 |        * @type string
377 |        * @default 'default'
378 |        */
379 |       netName: 'default',
380 | 
381 |       /**
382 |        * 'diskName' is the name to assign to the boot disk.
383 |        * @attribute diskName
384 |        * @type string
385 |        * @default 'same as VM name'
386 |        */
387 |       diskName: '',
388 | 
389 |       /**
390 |        * 'diskType' is the desired type of the boot disk.
391 |        * @attribute diskType
392 |        * @type string
393 |        * @default 'PERSISTENT'
394 |        */
395 |       diskType: 'PERSISTENT',
396 | 
397 |       /**
398 |        * 'diskBoot' is a boolean indicating whether the
399 |        * disk should be bootable or not.
400 |        *
401 |        * @attribute diskBoot
402 |        * @type string
403 |        * @default 'true'
404 |        */
405 |       diskBoot: true,
406 | 
407 |       /**
408 |        * 'diskAutodel' indicates whether to automatically
409 |        * delete the boot disk whenever the VM is deleted.
410 |        *
411 |        * @attribute diskAutodel
412 |        * @type string
413 |        * @default 'true'
414 |        */
415 |       diskAutodel: true,
416 | 
417 |       /**
418 |        * 'diskSize' is the desired disk capacity (in GB).
419 |        * @attribute diskSize
420 |        * @type int
421 |        * @default 10
422 |        */
423 |       diskSize: 10,
424 | 
425 |       /**
426 |        * 'diskImage' is the image to use for the boot disk.
427 |        * It may contain a ':', in which case the image
428 |        * string is assumed to contain a project and
429 |        * and image name with that project, e.g.,
430 |        *
431 |        *   debian-cloud:debian-7-wheezy-v20140606
432 |        *
433 |        * It's also acceptable to specify a null project
434 |        * with or without the colon, which assumes the
435 |        * desired image is to be taken from the project
436 |        * configured by the <google-cloud-config> element.
437 |        *
438 |        * @attribute diskImage
439 |        * @type string
440 |        * @default 'debian-cloud:debian-7-wheezy-v20140606'
441 |        */
442 |       diskImage: 'debian-cloud:debian-7-wheezy-v20140606',
443 | 
444 |       /**
445 |        * The 'genInstancePayload' method generates a
446 |        * json payload for inserting an instance.
447 |        *
448 |        * @method genInstancePayload
449 |        * @return {Object} Returns a JSON object.
450 |        */
451 |       genInstancePayload: function() {
452 |         var li = this.diskImage.split(':');
453 |         var image_project = '';
454 |         var image_name = '';
455 |         if (li.length === 2) {
456 |           image_project = li[0];
457 |           image_name = li[1];
458 |         } else if (li.length === 1) {
459 |           image_project = this.config.project;
460 |           image_name = li[0];
461 |         } else {
462 |           image_project = this.config.project;
463 |           image_name = 'default';
464 |         }
465 |         if (!this.diskName) {
466 |           this.diskName = this.name;
467 |         }
468 |         var payload = {
469 |           project: this.config.project,
470 |           zone: this.zone,
471 |           resource: {
472 |             name: this.name,
473 |             machineType: this.baseUrl +
474 |               this.config.project + '/zones/' + this.zone +
475 |               '/machineTypes/' + this.type,
476 |             networkInterfaces: [{
477 |               network: this.baseUrl + this.config.project +
478 |                        '/global/networks/' + this.netName,
479 |               accessConfigs: [{type: 'ONE_TO_ONE_NAT'}]
480 |             }],
481 |             disks: [{
482 |               type: this.diskType,
483 |               boot: this.diskBoot,
484 |               autoDelete: this.diskAutodel,
485 |               initializeParams: {
486 |                 diskName: this.diskName,
487 |                 diskSizeGb: this.diskSize,
488 |                 sourceImage: this.baseUrl + image_project +
489 |                              '/global/images/' + image_name
490 |               }
491 |             }]
492 |           }
493 |         };
494 |         if (this.metadata) {
495 |           payload.resource.metadata =  {
496 |             'kind': 'compute#metadata',
497 |             'items': JSON.parse(this.metadata),
498 |           }
499 |         };
500 |         console.log('payload', payload);
501 |         return payload;
502 |       },
503 | 
504 |       /**
505 |        * The 'progress' method displays or removes a
506 |        * progress indicator and updates the border color
507 |        * for the contained content, as a function of the
508 |        * current state.
509 |        *
510 |        * @method progress
511 |        * @return {Object} Returns undefined.
512 |        */
513 |       progress: function() {
514 |         if (this.state === 'init' || this.state === 'started') {
515 |           // Hide progress indicator.
516 |           this.progressDisplay = 'hidden';
517 |           if (this.state === 'init') {
518 |             this.borderColor = 'red';
519 |           } else {
520 |             this.borderColor = 'green';
521 |           }
522 |         } else {
523 |           // Display progress indicator.
524 |           this.progressDisplay = 'inline';
525 |           this.borderColor = 'gray';
526 |         }
527 |       },
528 | 
529 |       /**
530 |        * The 'create' method creates the Compute Engine VM.
531 |        * @method create
532 |        * @return {Object} Returns undefined.
533 |        */
534 |       create: function() {
535 |         this.addEventListener('done', function(e) {
536 |           if (this.state === 'starting') {
537 |             this.state = 'started';
538 |           } else if (this.state === 'stopping') {
539 |             this.state = 'init';
540 |           }
541 |           this.progress();
542 |         });
543 |         if (this.state === 'started') {
544 |           this.state = 'stopping';
545 |           this.progress();
546 | 
547 |           var payload = {
548 |             project: this.config.project,
549 |             instance: this.name,
550 |             zone: this.zone,
551 |           };
552 |           this.$.compute.api.instances.delete(payload).execute(this.wait.bind(this));
553 |         } else if (this.state === 'init') {
554 |           this.state = 'starting';
555 |           this.progress();
556 |           var payload = this.genInstancePayload();
557 |           this.$.compute.api.instances.insert(payload).execute(this.wait.bind(this));
558 |         }
559 |       }
560 |     });
561 |   </script>
562 | </polymer-element>
563 | 


--------------------------------------------------------------------------------
/google-cloud-config.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | google-cloud-config encapsulates a Google developer project
 3 | configuration.
 4 | 
 5 | ##### Example
 6 | 
 7 |     <google-cloud-config id="cfg" project="YOUR_PROJECT_ID"></google-cloud-config>
 8 | 
 9 | @element google-cloud-config
10 | @blurb google-cloud-config encapsulates a Google developer project configuration.
11 | @status alpha
12 | @url https://googlewebcomponents.github.io/google-cloud
13 | -->
14 | 
15 | <link rel="import" href="../polymer/polymer.html">
16 | <link rel="import" href="../core-meta/core-meta.html">
17 | 
18 | <polymer-element name="google-cloud-config" hidden extends="core-meta" attributes="project">
19 |   <script>
20 | 
21 |     Polymer({
22 |       /**
23 |        * This element requires ID attribute. It can be anything, e.g. "config".
24 |        * Important thing is the id must be a non-empty string.
25 |        *
26 |        * @attribute id
27 |        * @type string
28 |        */
29 | 
30 |       // Store google-cloud config separately from other core-meta data.
31 |       type: 'google-cloud',
32 | 
33 |       /**
34 |        * The 'project' attribute is a string containing the
35 |        * Google developer project ID.
36 |        *
37 |        * @attribute project
38 |        * @type string
39 |        */
40 |       project: ''
41 |     });
42 | 
43 |   </script>
44 | </polymer-element>
45 | 


--------------------------------------------------------------------------------
/google-cloud.css:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 | }
 4 | 
 5 | /* To ensure your styling works under the Shadow DOM polyfill, see
 6 |    www.polymer-project.org/docs/polymer/styling.html#directives */
 7 | polyfill-next-selector { content: ':host > h2'; }
 8 | ::content h2 {
 9 |   color: blue;
10 | }
11 | 


--------------------------------------------------------------------------------
/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleWebComponents/google-cloud/f9e6519d13d7a09205faf7833120b5597fd00946/img/.DS_Store


--------------------------------------------------------------------------------
/img/vm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleWebComponents/google-cloud/f9e6519d13d7a09205faf7833120b5597fd00946/img/vm.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE
 5 | The complete set of authors may be found at https://polymer.github.io/AUTHORS
 6 | The complete set of contributors may be found at https://polymer.github.io/CONTRIBUTORS
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at https://polymer.github.io/PATENTS
 9 | -->
10 | <html>
11 | <head>
12 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
13 |   <script src="../webcomponentsjs/webcomponents.min.js"></script>
14 |   <link rel="import" href="../core-component-page/core-component-page.html">
15 | </head>
16 | 
17 | <body unresolved>
18 | 
19 |   <core-component-page
20 |      moduleName="google-cloud"
21 |      sources='["google-cloud-config.html", "google-cloud-compute.html"]'>
22 |   </core-component-page>
23 | 
24 | 
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------