kube-new-pod.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-fab/paper-fab.html">

<link rel="import" href="kube-card.html">
<link rel="import" href="kube-new-container.html">

<polymer-element name="kube-new-pod" attributes="core label">
  <template>
    <style>
      :host {
        display: block;
      }
      kube-card {
        width: 20%;
      }
      kube-card paper-input {
        width: 100%;
      }
      paper-fab {
        color: #ffffff;
      }
      .actions > paper-button {
        color: #4285f4;
        fill: #4285f4;
      }
    </style>

    <kube-card icon="group-work" top="{{label}}">
      <main>
        <paper-input floatingLabel required
          label="Pod ID: myPod" value="{{data.id}}">
        </paper-input>
        <paper-input floatingLabel
          label="Labels: stage=dev, kind=frontend" value="{{data.labels}}">
        </paper-input>
      </main>
    </kube-card>

    <template repeat="{{c, i in containers}}">
      <kube-new-container
        data="{{c}}"
        idx="{{i}}"
        on-remove-me="{{removeContainer}}">
      </kube-new-container>
    </template>

    <paper-fab class icon="add" on-click="{{addContainer}}"></paper-fab>

    <section class="actions">
      <paper-button label="Create" on-click="{{create}}"></paper-button>
    </section>
  </template>
  <script>
    Polymer({
      label: 'New Pod',

      data: {
        id: 'myPod',
        labels: ''
      },
      containers: [{
        name: "nginx",
        image: "dockerfile/nginx",
        command: "",
        ports: "",
        env: ""
      }],

      addContainer: function() {
        this.containers.push({});
      },

      removeContainer: function(event, obj, source) {
        this.containers.splice(source.idx, 1);
      },

      create: function() {
        if (!this.core) {
          return;
        };

        var pod = {
          id: this.data.id,
          labels: {},
          desiredState: {
            manifest: {
              version: "v1beta2",
              id: this.data.id
            }
          }
        };

        var containers = [];
        this.containers.forEach(function(c) {
          if (!c.name || !c.image)
            return;
          var container = {
            name: c.name,
            image: c.image
          };
          if (c.command) {
            container['command'] = c.command.split(/ +/);
          }
          if (c.ports) {
            var ports = c.ports.
              replace(/, +/g, ',').
              split(/[, ]/).
              filter(function(p) { return p.indexOf(':') > 0 }) || [];
            for (var i=0, p; p = ports[i]; i++) {
              var parts = p.split(':');
              ports[i] = {
                hostPort: parseInt(parts[0]),
                containerPort: parseInt(parts[1])
              };
            }
            container['ports'] = ports;
          }
          if (c.env) {
            var env = c.env.
              replace(/, +/g, ',').
              split(/[, ]/).
              filter(function(e) { return e.indexOf('=') > 0 }) || [];
            for (var i=0, e; e = env[i]; i++) {
              var parts = e.split('=');
              env[i] = {name: parts[0], value: parts[1]};
            }
            container['env'] = env;
          }
          containers.push(container);
        });

        var labels = this.data.labels.
          replace(/, +/g, ',').
          split(/[, ]/).
          filter(function(e) { return e.indexOf('=') > 0 }) || [];
        for (var i=0, l; l = labels[i]; i++) {
          var parts = l.split('=');
          pod.labels[parts[0]] = parts[1];
        }
        if (!pod.labels['name']) {
          pod.labels['name'] = pod.id;
        }

        pod.desiredState.manifest.containers = containers;
        this.core.createPod({
          callback: this.handleCreateResponse.bind(this)
        }, pod);
      },

      handleCreateResponse: function(resp, isError) {
        var evtName = isError ? 'kube-pod-create-error' : 'kube-pod-created';
        this.fire(evtName, resp);
      }
    });
  </script>
</polymer-element>