apps/workbench/app/assets/javascripts/components/collections.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 window.CollectionsTable = {
   6     maybeLoadMore: function(dom) {
   7         var loader = this.loader
   8         if (loader.state != loader.READY)
   9             // Can't start getting more items anyway: no point in
  10             // checking anything else.
  11             return
  12         var contentRect = dom.getBoundingClientRect()
  13         var scroller = window // TODO: use dom's nearest ancestor with scrollbars
  14         if (contentRect.bottom < 2 * scroller.innerHeight) {
  15             // We have less than 1 page worth of content available
  16             // below the visible area. Load more.
  17             loader.loadMore()
  18             // Indicate loading is in progress.
  19             window.requestAnimationFrame(m.redraw)
  20         }
  21     },
  22     oncreate: function(vnode) {
  23         vnode.state.maybeLoadMore = vnode.state.maybeLoadMore.bind(vnode.state, vnode.dom)
  24         window.addEventListener('scroll', vnode.state.maybeLoadMore)
  25         window.addEventListener('resize', vnode.state.maybeLoadMore)
  26         vnode.state.timer = window.setInterval(vnode.state.maybeLoadMore, 200)
  27         vnode.state.loader = vnode.attrs.loader
  28         vnode.state.onupdate(vnode)
  29     },
  30     onupdate: function(vnode) {
  31         vnode.state.loader = vnode.attrs.loader
  32     },
  33     onremove: function(vnode) {
  34         window.clearInterval(vnode.state.timer)
  35         window.removeEventListener('scroll', vnode.state.maybeLoadMore)
  36         window.removeEventListener('resize', vnode.state.maybeLoadMore)
  37     },
  38     view: function(vnode) {
  39         var loader = vnode.attrs.loader
  40         return m('table.table.table-condensed', [
  41             m('thead', m('tr', [
  42                 m('th'),
  43                 m('th', 'uuid'),
  44                 m('th', 'name'),
  45                 m('th', 'last modified'),
  46             ])),
  47             m('tbody', [
  48                 loader.items().map(function(item) {
  49                     return m('tr', [
  50                         m('td', [
  51                             // Guess workbench.{apihostport} is a
  52                             // Workbench... unless the host part of
  53                             // apihostport is an IPv4 or [IPv6]
  54                             // address.
  55                             item.session.baseURL.match('://(\\[|\\d+\\.\\d+\\.\\d+\\.\\d+[:/])') ? null :
  56                                 m('a.btn.btn-xs.btn-default', {
  57                                     href: item.session.baseURL.replace('://', '://workbench.')+'collections/'+item.uuid,
  58                                 }, 'Show'),
  59                         ]),
  60                         m('td.arvados-uuid', item.uuid),
  61                         m('td', item.name || '(unnamed)'),
  62                         m('td', m(LocalizedDateTime, {parse: item.modified_at})),
  63                     ])
  64                 }),
  65             ]),
  66             loader.state == loader.DONE ? null : m('tfoot', m('tr', [
  67                 m('th[colspan=4]', m('button.btn.btn-xs', {
  68                     className: loader.state == loader.LOADING ? 'btn-default' : 'btn-primary',
  69                     style: {
  70                         display: 'block',
  71                         width: '12em',
  72                         marginLeft: 'auto',
  73                         marginRight: 'auto',
  74                     },
  75                     disabled: loader.state == loader.LOADING,
  76                     onclick: function() {
  77                         loader.loadMore()
  78                         return false
  79                     },
  80                 }, loader.state == loader.LOADING ? '(loading)' : 'Load more')),
  81             ])),
  82         ])
  83     },
  84 }
  85
  86 window.CollectionsSearch = {
  87     oninit: function(vnode) {
  88         vnode.state.sessionDB = new SessionDB()
  89         vnode.state.searchEntered = m.stream()
  90         vnode.state.searchActive = m.stream()
  91         // When searchActive changes (e.g., when restoring state
  92         // after navigation), update the text field too.
  93         vnode.state.searchActive.map(vnode.state.searchEntered)
  94         // When searchActive changes, create a new loader that filters
  95         // with the given search term.
  96         vnode.state.searchActive.map(function(q) {
  97             var sessions = vnode.state.sessionDB.loadActive()
  98             vnode.state.loader = new MergingLoader({
  99                 children: Object.keys(sessions).map(function(key) {
 100                     var session = sessions[key]
 101                     return new MultipageLoader({
 102                         sessionKey: key,
 103                         loadFunc: function(filters) {
 104                             if (q)
 105                                 filters.push(['any', '@@', q+':*'])
 106                             return vnode.state.sessionDB.request(session, 'arvados/v1/collections', {
 107                                 data: {
 108                                     filters: JSON.stringify(filters),
 109                                     count: 'none',
 110                                 },
 111                             }).then(function(resp) {
 112                                 resp.items.map(function(item) {
 113                                     item.session = session
 114                                 })
 115                                 return resp
 116                             })
 117                         },
 118                     })
 119                 })
 120             })
 121         })
 122     },
 123     view: function(vnode) {
 124         var sessions = vnode.state.sessionDB.loadAll()
 125         return m('form', {
 126             onsubmit: function() {
 127                 vnode.state.searchActive(vnode.state.searchEntered())
 128                 vnode.state.forgetSavedHeight = true
 129                 return false
 130             },
 131         }, [
 132             m(SaveUIState, {
 133                 defaultState: '',
 134                 currentState: vnode.state.searchActive,
 135                 forgetSavedHeight: vnode.state.forgetSavedHeight,
 136                 saveBodyHeight: true,
 137             }),
 138             vnode.state.loader && [
 139                 m('.row', [
 140                     m('.col-md-6', [
 141                         m('.input-group', [
 142                             m('input#search.form-control[placeholder=Search]', {
 143                                 oninput: m.withAttr('value', vnode.state.searchEntered),
 144                                 value: vnode.state.searchEntered(),
 145                             }),
 146                             m('.input-group-btn', [
 147                                 m('input.btn.btn-primary[type=submit][value="Search"]'),
 148                             ]),
 149                         ]),
 150                     ]),
 151                     m('.col-md-6', [
 152                         'Searching sites: ',
 153                         vnode.state.loader.children.length == 0
 154                             ? m('span.label.label-xs.label-danger', 'none')
 155                             : vnode.state.loader.children.map(function(child) {
 156                                 return [m('span.label.label-xs', {
 157                                     className: child.state == child.LOADING ? 'label-warning' : 'label-success',
 158                                 }, child.sessionKey), ' ']
 159                             }),
 160                         ' ',
 161                         m('a[href="/sessions"]', 'Add/remove sites'),
 162                     ]),
 163                 ]),
 164                 m(CollectionsTable, {
 165                     loader: vnode.state.loader,
 166                 }),
 167             ],
 168         ])
 169     },
 170 }