tailbone/tailbone/templates/datasync/status.mako

## -*- coding: utf-8; -*-
<%inherit file="/page.mako" />

<%def name="content_title()"></%def>

<%def name="context_menu_items()">
  ${parent.context_menu_items()}
  % if request.has_perm('datasync_changes.list'):
      <li>${h.link_to("View DataSync Changes", url('datasyncchanges'))}</li>
  % endif
</%def>

<%def name="page_content()">
  % if expose_websockets:
      <b-notification type="is-warning"
                      :active="websocketClosed"
                      :closable="false">
        Server connection was broken - please refresh page to see accurate status!
      </b-notification>
  % endif
  <b-field label="Supervisor Status">
    <div style="display: flex;">

      <pre :class="processInfo.statename == 'RUNNING' ? 'has-background-success' : 'has-background-warning'">{{ processDescription }}</pre>

      <div style="margin-left: 1rem;">
        % if request.has_perm('datasync.restart'):
            ${h.form(url('datasync.restart'), **{'@submit': 'restartProcess'})}
            ${h.csrf_token(request)}
            <b-button type="is-primary"
                      native-type="submit"
                      icon-pack="fas"
                      icon-left="redo"
                      :disabled="restartingProcess">
              {{ restartingProcess ? "Working, please wait..." : "Restart Process" }}
            </b-button>
            ${h.end_form()}
        % endif
      </div>

    </div>
  </b-field>

  <b-field label="Watcher Status">
    <b-table :data="watchers">
      <template slot-scope="props">
        <b-table-column field="key"
                        label="Watcher">
           {{ props.row.key }}
        </b-table-column>
        <b-table-column field="spec"
                        label="Spec">
           {{ props.row.spec }}
        </b-table-column>
        <b-table-column field="dbkey"
                        label="DB Key">
           {{ props.row.dbkey }}
        </b-table-column>
        <b-table-column field="delay"
                        label="Delay">
           {{ props.row.delay }} second(s)
        </b-table-column>
        <b-table-column field="lastrun"
                        label="Last Watched">
           <span v-html="props.row.lastrun"></span>
        </b-table-column>
        <b-table-column field="status"
                        label="Status"
                        :class="props.row.status == 'okay' ? 'has-background-success' : 'has-background-warning'">
           {{ props.row.status }}
        </b-table-column>
      </template>
    </b-table>
  </b-field>

  <b-field label="Consumer Status">
    <b-table :data="consumers">
      <template slot-scope="props">
        <b-table-column field="key"
                        label="Consumer">
           {{ props.row.key }}
        </b-table-column>
        <b-table-column field="spec"
                        label="Spec">
           {{ props.row.spec }}
        </b-table-column>
        <b-table-column field="dbkey"
                        label="DB Key">
           {{ props.row.dbkey }}
        </b-table-column>
        <b-table-column field="delay"
                        label="Delay">
           {{ props.row.delay }} second(s)
        </b-table-column>
        <b-table-column field="changes"
                        label="Pending Changes">
           {{ props.row.changes }}
        </b-table-column>
        <b-table-column field="status"
                        label="Status"
                        :class="props.row.status == 'okay' ? 'has-background-success' : 'has-background-warning'">
           {{ props.row.status }}
        </b-table-column>
      </template>
    </b-table>
  </b-field>
</%def>

<%def name="modify_this_page_vars()">
  <script type="text/javascript">

    ThisPageData.processInfo = ${json.dumps(process_info)|n}

    ThisPage.computed.processDescription = function() {
        let info = this.processInfo
        if (info) {
            return `${'$'}{info.group}:${'$'}{info.name}    ${'$'}{info.statename}    ${'$'}{info.description}`
        } else {
            return "NO PROCESS INFO AVAILABLE"
        }
    }

    ThisPageData.restartingProcess = false
    ThisPageData.watchers = ${json.dumps(watcher_data)|n}
    ThisPageData.consumers = ${json.dumps(consumer_data)|n}

    ThisPage.methods.restartProcess = function() {
        this.restartingProcess = true
    }

    % if expose_websockets:

        ThisPageData.ws = null
        ThisPageData.websocketClosed = false

        ThisPage.mounted = function() {

            ## TODO: should be a cleaner way to get this url?
            let url = '${request.route_url('ws.datasync.status')}'
            url = url.replace(/^https?:/, 'wss:')

            this.ws = new WebSocket(url)
            let that = this

            this.ws.onclose = (event) => {
                that.websocketClosed = true
            }

            this.ws.onmessage = (event) => {
                that.processInfo = JSON.parse(event.data)
            }
        }

    % endif

  </script>
</%def>


${parent.body()}