res/imp/systemd-unit-status.html

<!-- The <systemd-unit-status-sk> custom element declaration.

  Attributes:
    machine - The name of the machine the service is running on.
    service - The systemd name of the service running, such as "logserver.service".

  Events:
    unit-action - An event triggered when the user wants to perform an action
        on the service. The detail of the event has the form:

        {
          machine: "skia-monitoring",
          name: "logserver.service",
          action: "start"
        }

  Methods:
    None.

  Mailbox:
    The element subscribes to the mailbox "<machine>:<service>" and uses that
    value to populate the element. The mailbox value is expected to be a
    systemd.UnitStatus.
-->

<link rel="stylesheet" href="/res/common/css/md.css" type="text/css" media="all" />
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="systemd-unit-status-sk">
  <style include="iron-flex">
    div div {
      font-family: monospace;
      margin: 0.6em;
      margin-right: 2em;
      padding: 0.4em 1.2em;
    }
    #machine {
      width: 15em;
    }
    #service {
      width: 15em;
    }
    #uptime {
      width: 4em;
    }
    #state {
      width: 6em;
    }
    .running {
      color: #44AA99;
    }
    .failed {
      color: #CC6677;
    }
    .halted {
      color: #882255;
    }
    .dead {
      color: #D95F02;
    }
    .exited {
      color: #666666;
    }
  </style>
  <template>
    <div class="layout horizontal wrap">
      <div id=service>[[service]]</div>
      <div id=uptime>[[uptimeOf(value.props.ExecMainStartTimestamp)]]</div>
      <div id=state class$="[[value.status.SubState]]">[[value.status.SubState]]</div>
      <button raised data-action="start"   data-name$="[[service]]">Start  </button>
      <button raised data-action="stop"    data-name$="[[service]]">Stop   </button>
      <button raised data-action="restart" data-name$="[[service]]">Restart</button>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "systemd-unit-status-sk",

    properties: {
      machine: {
        type: String,
        value: "",
      },
      service: {
        type: String,
        value: "",
      },
    },

    observers: [
      'subscribe(machine, service)'
    ],

    ready: function() {
      this.subscribe(this.machine, this.service);
    },

    subscribe: function(machine, service) {
      this.value = {};
      sk.Mailbox.subscribe(machine+":"+service, function(value) {
        this.value =  value;
      }.bind(this));
    },

    listeners: {
      'tap': 'tapHandler'
    },

    tapHandler: function(e) {
      var ele = sk.findParent(e.target, "BUTTON");
      if (ele) {
        var detail = {
          machine: this.machine,
          name: ele.dataset.name,
          action: ele.dataset.action,
        };
        this.dispatchEvent(new CustomEvent('unit-action', {detail: detail, bubbles: true}));
      }
    },

    uptimeOf: function(microSeconds) {
      return sk.human.diffDate(microSeconds/1000);
    },

  });
</script>