vines-services 0.1.0

data/web/coffeescripts/files.coffee

@@ -0,0 +1,315 @@
+class FilesPage
+  FILES  = 'http://getvines.com/protocol/files'
+  LABELS = 'http://getvines.com/protocol/files/labels'
+
+  constructor: (@session) ->
+    @api = new Api @session
+    @uploads = new Uploads
+      session: @session
+      jid: @api.jid
+      size: this.size
+      complete: (file) =>
+        this.fileNode(file)
+        this.findFiles name: file.name
+
+  findLabels: ->
+    $('#labels').empty()
+    @api.get LABELS, {}, (result) =>
+      this.labelNodeList row for row in result.rows
+
+  labelNodeList: (label)->
+    text = if label.size == 1 then 'file' else 'files'
+    node = $("""
+      <li data-name="" style='display:none;'>
+        <span class="text"></span>
+        <span class="count">#{label.size} #{text}</span>
+      </li>
+    """).appendTo '#labels'
+    $('.text', node).text label.name
+    node.attr 'data-name', label.name
+    node.click (event) => this.selectLabel(event)
+    node.fadeIn(100)
+
+  selectLabel: (event) ->
+    name = $(event.currentTarget).attr 'data-name'
+    $('#labels li').removeClass 'selected'
+    $(event.currentTarget).addClass 'selected'
+    $('#files').empty()
+    this.findFiles label: $(event.currentTarget).attr('data-name')
+
+  findFiles: (criteria) ->
+    @api.get FILES, criteria, (result) =>
+      this.fileNode row for row in result.rows
+
+  fileNode: (file) ->
+    size = this.size file.size
+    if !file.created_at
+      file.created_at = Date()
+    time = this.date file.created_at
+    node = $("""
+      <li data-id="#{file.id}" data-name="" data-size="#{size}" data-created="#{time}">
+        <div class="file-icon">
+          <span class="size">#{size}</span>
+        </div>
+        <h2></h2>
+        <footer>
+          <span class="time">#{time}</span>
+          <ul class="labels"></ul>
+          <form class="add-label">
+            <div class="add-label-button"></div>
+            <input type="text" placeholder="Label" style="display:none;"/>
+          </form>
+        </footer>
+        <form class="file-form">
+          <fieldset>
+            <input class="cancel" type="submit" value="Delete"/>
+          </fieldset>
+        </form>
+      </li>
+    """).appendTo '#files'
+
+    node.data 'file', file
+    $('h2', node).text file.name
+    node.attr 'data-name', file.name
+
+    new Button $('.file-icon', node).get(0), ICONS.page2,
+      scale: 1.0
+      translation: '-2 0'
+      'stroke-width': 0.1
+      opacity: 1.0
+
+    new Button $('.add-label-button', node).get(0), ICONS.plus,
+      translation: '-10 -10'
+      scale: 0.5
+
+    $('form.file-form', node).submit => this.deleteFile node
+    $('form.add-label', node).submit => this.addLabel node
+    $('.add-label-button', node).click ->
+      $('form.add-label input[type="text"]', node).show()
+
+    this.labelNode node, label for label in file.labels
+
+  labelNode: (node, label) ->
+    labels = $('.labels', node)
+    item = $("""
+      <li data-name="">
+        <span class="text"></span>
+        <div class="remove"></div>
+      </li>
+    """).appendTo labels
+    $('.text', item).text label
+    item.attr 'data-name', label
+
+    new Button $('.remove', item).get(0), ICONS.cross,
+      translation: '-8 -8'
+      scale: 0.5
+
+    $('.remove', item).click =>
+      this.removeLabel node, item
+
+  addLabel: (node) ->
+    input = $('form.add-label input[type="text"]', node)
+    input.hide()
+    labels = (val for val in input.val().split(/,/) when val)
+    input.val ''
+    file = node.data 'file'
+    file.labels.push label for label in labels
+    @api.save FILES, file, (result) ->
+    this.labelNode node, label for label in labels
+    this.findLabels()
+    false
+
+  removeLabel: (node, item) ->
+    file = node.data 'file'
+    remove = item.attr 'data-name'
+    file.labels = (label for label in file.labels when label != remove)
+    @api.save FILES, file, (result) ->
+    item.fadeOut 200, -> item.remove()
+    this.findLabels()
+
+  deleteFile: (node) ->
+    @api.remove FILES, node.attr('data-id'), (result) =>
+      node.fadeOut 200, -> node.remove()
+    false
+
+  date: (date) ->
+    date = new Date date
+    day = 'Sun Mon Tue Wed Thu Fri Sat'.split(' ')[date.getDay()]
+    month = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ')[date.getMonth()]
+    "#{day}, #{date.getDate()} #{month}, #{date.getFullYear()} @ #{date.getHours()}:#{date.getMinutes()}"
+
+  size: (bytes) ->
+    kb = bytes / 1024
+    mb = kb / 1024
+    gb = mb / 1024
+    fmt = (num) ->
+      if num >= 100
+        Math.round num
+      else
+        num.toFixed(1).replace '.0', ''
+
+    if kb < 1
+      "#{bytes} b"
+    else if mb < 1
+      "#{fmt kb} k"
+    else if gb < 1
+      "#{fmt mb} m"
+    else
+      "#{fmt gb} g"
+
+  draw: ->
+    unless @session.connected()
+      window.location.hash = ''
+      return
+
+    $('body').attr 'id', 'files-page'
+    $('#container').hide().empty()
+    $("""
+      <div id="alpha" class="sidebar column y-fill">
+        <h2>Labels</h2>
+        <ul id="labels" class="selectable scroll y-fill"></ul>
+        <div id="alpha-controls" class="controls"></div>
+      </div>
+      <div id="beta" class="primary column x-fill y-fill">
+        <h2 id="files-title">Files <div id="search-files-icon"></div></h2>
+        <div id="search-files-form"></div>
+        <ul id="files" class="scroll y-fill"></ul>
+      </div>
+      <div id="charlie" class="sidebar column y-fill">
+        <h2>Uploads</h2>
+        <div id="upload-dnd" class="float">Drag files here to upload.</div>
+        <ul id="uploads" class="scroll y-fill"></ul>
+        <div id="charlie-controls" class="controls">
+          <form id="file-form">
+            <input id="open-file-chooser" type="submit" value="Select files to upload"/>
+            <input id="file-chooser" type="file" multiple="true" />
+          </form>
+        </div>
+      </div>
+    """).appendTo '#container'
+
+    $('#file-chooser').change (event) =>
+      @uploads.queue event.target.files
+      $('#file-chooser').val ''
+
+    $('#file-form').submit ->
+      $('#file-chooser').click()
+      false
+
+    $('#upload-dnd').bind 'dragenter', (event) ->
+      event.stopPropagation()
+      event.preventDefault()
+      $('#upload-dnd').css 'color', '#444'
+
+    $('#upload-dnd').bind 'dragleave', (event) ->
+      $('#upload-dnd').css 'color', '#ababab'
+
+    $('#upload-dnd').bind 'dragover', (event) ->
+      event.stopPropagation()
+      event.preventDefault()
+
+    $('#upload-dnd').bind 'drop', (event) =>
+      event.stopPropagation()
+      event.preventDefault()
+      $('#upload-dnd').css 'color', '#ababab'
+      @uploads.queue event.originalEvent.dataTransfer.files
+
+    this.findLabels()
+    this.findFiles()
+
+    $('#container').show()
+    layout = this.resize()
+
+    fn = ->
+      layout.resize()
+      layout.resize() # not sure why two are needed
+
+    new Filter
+      list: '#files'
+      icon: '#search-files-icon'
+      form: '#search-files-form'
+      attrs: ['data-name', 'data-created']
+      open:  fn
+      close: fn
+
+  resize: ->
+    a   = $ '#alpha'
+    b   = $ '#beta'
+    c   = $ '#charlie'
+    up  = $ '#uploads'
+    dnd = $ '#upload-dnd'
+    new Layout ->
+      c.css 'left', a.width() + b.width()
+      dnd.height up.height()
+      dnd.css 'line-height', up.height() + 'px'
+
+  class Uploads
+    constructor: (options) ->
+      @session = options.session
+      @serviceJid = options.jid
+      @size = options.size
+      @complete = options.complete
+      @uploads = []
+      @sending = null
+
+    queue: (files) ->
+      this.add file for file in files when not this.find file
+      this.process()
+
+    add: (file) ->
+      node  = this.node file
+      meter = $ '.meter', node
+      @uploads.push new Transfer
+        to: @serviceJid()
+        file: file
+        session: @session
+        progress: (pct) ->
+          meter.css 'width', pct + '%'
+        complete: =>
+          this.remove file
+          this.complete file if this.complete
+          @sending = null if file.name == @sending.name
+          this.process()
+
+    process: ->
+      return if @sending
+      if upload = @uploads[0]
+        @sending = upload.file
+        upload.start()
+      else
+        @sending = null
+        this.fileNode(upload.file)
+
+    find: (file) ->
+      (up for up in @uploads when up.file.name == file.name).shift()
+
+    remove: (file) ->
+      @uploads = (up for up in @uploads when up.file.name != file.name)
+      node = $ "#uploads li[data-file='#{file.name}']"
+      node.fadeOut 200, -> node.remove()
+
+    node: (file) ->
+      node = $("""
+        <li data-file="" style="display:none;">
+          <form class="inset">
+            <h2></h2>
+            <div class="progress">
+              <div class="meter"></div>
+              <span class="text">#{this.size file.size}</span>
+              <div class="cancel"></div>
+            </div>
+          </form>
+        </li>
+      """).appendTo '#uploads'
+      node.fadeIn 200
+      $('h2', node).text file.name
+      node.attr 'data-file', file.name
+
+      new Button $('.cancel', node).get(0), ICONS.cross,
+        translation: '-8 -8'
+        scale: 0.5
+      $('.cancel', node).click => this.cancel file
+      node
+
+    cancel: (file) ->
+      upload.stop() if upload = this.find file

data/web/coffeescripts/init.coffee

@@ -0,0 +1,21 @@
+$ ->
+  session = new Session()
+  nav = new NavBar(session)
+  nav.draw()
+  buttons =
+    Systems:  ICONS.commandline
+    Services: ICONS.magic
+    Files:    ICONS.page2
+    Setup:    ICONS.gear2
+    Logout:   ICONS.power
+  nav.addButton(label, icon) for label, icon of buttons
+
+  pages =
+    '/systems':  new SystemsPage(session)
+    '/services': new ServicesPage(session)
+    '/files':    new FilesPage(session)
+    '/setup':    new SetupPage(session)
+    '/logout':   new LogoutPage(session)
+    'default':   new LoginPage(session, '/systems/')
+  new Router(pages).draw()
+  nav.select $('#nav-link-systems').parent()

data/web/coffeescripts/services.coffee

@@ -0,0 +1,356 @@
+class ServicesPage
+  SERVICES = 'http://getvines.com/protocol/services'
+  MEMBERS  = 'http://getvines.com/protocol/services/members'
+  SYSTEMS  = 'http://getvines.com/protocol/systems'
+  ATTRS    = 'http://getvines.com/protocol/systems/attributes'
+  USERS    = 'http://getvines.com/protocol/users'
+
+  constructor: (@session) ->
+    @api = new Api @session
+    @selectedService = null
+    @validateTimeout = null
+    @layout = null
+    @users = []
+
+  deleteService: (event) ->
+    this.drawBlankSlate()
+    this.toggleForm '#remove-contact-form'
+    selected = $("#services li[data-id='#{@selectedService.id}']")
+    @api.remove SERVICES, @selectedService.id, (result) =>
+      selected.fadeOut 200, ->
+        selected.remove()
+        @selectedService = null
+    false
+
+  icon: (member) ->
+    icons =
+      darwin:  'mac.png'
+      linux:   'linux.png'
+      windows: 'windows.png'
+    icon = icons[member.os] || 'run.png'
+    "images/#{icon}"
+
+  drawMember: (member) ->
+    return unless this.editorVisible()
+    node = $("""
+      <li>
+        <span class="icon"><img src="#{this.icon(member)}"/></span>
+        <span class="text"></span>
+      </li>
+    """).appendTo '#members'
+    $('.text', node).text member.name
+
+  operators: ->
+    for operator in ['like', 'not like', 'starts with', 'ends with', 'is', 'is not', '>', '>=', '<', '<=', 'and', 'or']
+      node = $("""
+        <li data-selector="#{operator}">
+          #{operator}
+        </li>
+      """).appendTo '#operators'
+      node.click (event) =>
+        $('#syntax').focus()
+        name = $(event.currentTarget).attr 'data-selector'
+        $('#syntax').val($('#syntax').val() + " #{name} ")
+        this.validateIn()
+
+  selectService: (node) ->
+    id = $(node).attr 'data-id'
+    name = $(node).attr 'data-name'
+
+    $('#services li').removeClass 'selected'
+    $(node).addClass 'selected'
+
+    $('#remove-service-msg').html "Are you sure you want to remove the " +
+      "<strong>#{name}</strong> service?"
+    $('#remove-service-form .buttons').fadeIn 200
+    @api.get SERVICES, id: id, (result) =>
+      @selectedService = result
+      this.drawEditor(result)
+
+  serviceNode: (service) ->
+    label = if service.size == 1 then 'system' else 'systems'
+    node = $("""
+      <li data-id="#{service.id}" data-name="" data-size="#{service.size}">
+        <span class="text">#{service.name}</span>
+        <span class="count">#{service.size} #{label}</span>
+      </li>
+    """).appendTo '#services'
+    node.attr 'data-name', service.name
+    $('.text', node).text service.name
+    node.click (event) => this.selectService event.currentTarget
+    node
+
+  findServices: ->
+    @api.get SERVICES, {}, (result) =>
+      this.serviceNode row for row in result.rows
+
+  findMembers: (id) ->
+    @api.get MEMBERS, id: id, (result) =>
+      this.drawMember row for row in result.rows
+
+  findUsers: (syntax) ->
+    @api.get USERS, {}, (result) =>
+      @users = (row for row in result.rows when !row.system)
+      this.drawUsers()
+
+  attributeNode: (attribute) ->
+    node = $('<li data-name=""></li>').appendTo '#attributes'
+    node.text attribute
+    node.attr 'data-name', attribute
+    node.click (event) =>
+      $('#syntax').focus()
+      name = $(event.currentTarget).attr 'data-name'
+      $('#syntax').val($('#syntax').val() + " #{name} ")
+      this.validateIn()
+
+  findAttributes: (syntax) ->
+    @api.get ATTRS, {}, (result) =>
+      this.attributeNode row for row in result.rows
+
+  validateIn: (millis)->
+    clearTimeout @validateTimeout
+    @validateTimeout = setTimeout (=> this.validate()), millis || 500
+
+  validate: ->
+    $('#syntax-status').text ''
+
+    # only validate if text changed
+    prev = $('#syntax').data 'prev'
+    code = $.trim $('#syntax').val()
+    $('#syntax').data 'prev', code
+    return unless code && code != prev
+
+    $('#syntax-status').text 'Searching . . .'
+    $('#members').empty()
+    @api.get2 MEMBERS, code, (result) =>
+      if result.ok
+        $('#syntax-status').text ''
+        this.drawMember row for row in result.rows
+      else
+        $('#syntax-status').text result.error
+
+  validateForm: ->
+    $('#name-error').empty()
+    valid = true
+
+    name = $.trim $('#name').val()
+    if name == ''
+      $('#name-error').text 'Name is required.'
+      valid = false
+
+    valid
+
+  save: ->
+    return unless this.validateForm()
+    users = $('#users :checked').map(-> $(this).val()).get()
+    accounts = $('#unix-users').val().split(',')
+    accounts = ($.trim u for u in accounts when $.trim(u).length > 0)
+    service =
+      name: $('#name').val()
+      code: $('#syntax').val()
+      accounts: accounts
+      users: users
+    service['id'] = $('#id').val() if $('#id').val().length > 0
+
+    @api.save SERVICES, service, (result) =>
+      new Notification 'Service saved successfully'
+      result.size = $('#members').length
+      $('#id').val result.id
+      node = $("#services li[data-id='#{result.id}']")
+      if node.length == 0
+        node = this.serviceNode result
+        this.selectService node
+      else
+        $('.text', node).text result.name
+    false
+
+  drawBlankSlate: ->
+    $('#beta').empty()
+    $("""
+      <form id="blank-slate">
+        <p>
+          Services are dynamically updated groups of systems based on
+          criteria you define. Send a command to the service and it runs
+          on every system in the group.
+        </p>
+        <input type="submit" id="blank-slate-add" value="Create a New Service"/>
+      </form>
+    """).appendTo '#beta'
+    $('#blank-slate').submit =>
+      this.drawEditor()
+      false
+
+  draw: ->
+    unless @session.connected()
+      window.location.hash = ''
+      return
+
+    $('body').attr 'id', 'services-page'
+    $('#container').hide().empty()
+    $("""
+      <div id="alpha" class="sidebar column y-fill">
+        <h2>Services <div id="search-services-icon"></div></h2>
+        <div id="search-services-form"></div>
+        <ul id="services" class="selectable scroll y-fill"></ul>
+        <div id="alpha-controls" class="controls">
+          <div id="add-service"></div>
+          <div id="remove-service"></div>
+        </div>
+        <form id="remove-service-form" class="overlay" style="display:none;">
+          <h2>Remove Service</h2>
+          <p id="remove-service-msg">Select a service in the list above to remove.</p>
+          <fieldset class="buttons" style="display:none;">
+            <input id="remove-service-cancel" type="button" value="Cancel"/>
+            <input id="remove-service-ok" type="submit" value="Remove"/>
+          </fieldset>
+        </form>
+      </div>
+      <div id="beta" class="primary column x-fill y-fill"></div>
+      <div id="charlie" class="sidebar column y-fill">
+        <h2>Operators</h2>
+        <ul id="operators"></ul>
+        <h2>Attributes <div id="search-attributes-icon"></div></h2>
+        <div id="search-attributes-form"></div>
+        <ul id="attributes" class="y-fill scroll"></ul>
+      </div>
+    """).appendTo '#container'
+
+    new Button '#add-service',    ICONS.plus
+    new Button '#remove-service', ICONS.minus
+
+    this.drawBlankSlate()
+
+    $('#add-service').click           => this.drawEditor()
+    $('#remove-service').click        => this.toggleForm '#remove-service-form'
+    $('#remove-service-cancel').click => this.toggleForm '#remove-service-form'
+    $('#remove-service-form').submit  => this.deleteService()
+
+    this.operators()
+    this.findServices()
+    this.findAttributes()
+    this.findUsers()
+
+    $('#container').show()
+    @layout = this.resize()
+
+    fn = =>
+      @layout.resize()
+      @layout.resize() # not sure why two are needed
+
+    new Filter
+      list: '#services'
+      icon: '#search-services-icon'
+      form: '#search-services-form'
+      attrs: ['data-name']
+      open:  fn
+      close: fn
+
+    new Filter
+      list: '#attributes'
+      icon: '#search-attributes-icon'
+      form: '#search-attributes-form'
+      attrs: ['data-name']
+      open:  fn
+      close: fn
+
+  drawEditor: (service) ->
+    return unless this.pageVisible()
+
+    unless service
+      @selectedService = null
+      $('#services li').removeClass 'selected'
+
+    $('#beta').empty()
+    $("""
+      <form id="editor-form" class="sections y-fill scroll">
+        <input id="id" type="hidden"/>
+        <div>
+          <section>
+            <h2>Service</h2>
+            <fieldset>
+              <label for="name">Name</label>
+              <input id="name" type="text"/>
+              <p id="name-error" class="error"></p>
+              <label for="syntax">Criteria</label>
+              <textarea id="syntax" placeholder="fqdn like 'www.*' and platform in ['fedora', 'mac_os_x']"></textarea>
+              <p id="syntax-status"></p>
+            </fieldset>
+          </section>
+          <section>
+            <h2>Members</h2>
+            <fieldset id="service-preview">
+              <ul id="members" class="scroll"></ul>
+            </fieldset>
+          </section>
+          <section>
+            <h2>Permissions</h2>
+            <fieldset>
+              <label>Users</label>
+              <ul id="users" class="scroll"></ul>
+              <label for="unix-users">Unix Accounts</label>
+              <input id="unix-users" type="text"/>
+            </fieldset>
+          </section>
+        </div>
+      </form>
+      <form id="editor-buttons">
+        <input id="save" type="submit" value="Save"/>
+      </form>
+    """).appendTo '#beta'
+
+    if service
+      this.findMembers(service.id)
+      $('#id').val service.id
+      $('#name').val service.name
+      $('#syntax').val service.code
+      $('#unix-users').val service.accounts.join(', ')
+
+    this.drawUsers() if @users.length > 0
+
+    @layout.resize()
+    $('#name').focus()
+
+    $('#syntax').change         => this.validateIn()
+    $('#syntax').keyup          => this.validateIn()
+    $('#editor-form').submit    => this.save()
+    $('#editor-buttons').submit => this.save()
+
+  drawUsers: ->
+    return unless this.editorVisible()
+
+    $('#users').empty()
+    for user in @users
+      node = $("""
+        <li>
+          <input id='user-#{user.jid}' type='checkbox' value='#{user.jid}'/>
+          <label for='user-#{user.jid}'>#{user.jid}</label>
+        </li>
+      """).appendTo '#users'
+      # user creating service gets access to it by default
+      $('input', node).prop 'checked', true if user.jid == @session.bareJid()
+
+    if @selectedService
+      $('#users input[type="checkbox"]').val @selectedService.users
+
+  toggleForm: (form, fn) ->
+    form = $(form)
+    $('form.overlay').each ->
+      $(this).hide() unless this.id == form.attr 'id'
+    if form.is ':hidden'
+      fn() if fn
+      form.fadeIn 100
+    else
+      form.fadeOut 100, ->
+        form[0].reset()
+        fn() if fn
+
+  pageVisible: -> $('#services-page').length > 0
+
+  editorVisible: -> $('#services-page #editor-form').length > 0
+
+  resize: ->
+    a   = $ '#alpha'
+    b   = $ '#beta'
+    c   = $ '#charlie'
+    new Layout ->
+      c.css 'left', a.width() + b.width()