Move covmanager into frontend

Author: gitstart-app[bot]

server/covmanager/templates/collections/browse.html

@@ -1,356 +1,9 @@
-{% extends 'layouts/layout_old.html' %}
-
-{% block css.custom %}
-  <link rel='stylesheet' href='/static/css/covmanager.css'>
-{% endblock css.custom %}
+{% extends 'layouts/layout_base.html' %}
 
 {% block title %}Collections{% endblock title %}
 
 {% block body_content %}
-<div id="main" class="panel panel-default">
-  <div class="panel-heading"><i class="bi bi-clipboard-data"></i> Coverage Collections</div>
-  <div class="panel-body">
-    <div class="panel panel-default" style="float: left;">
-    <div class="panel-heading"><i class="bi bi-archive-fill"></i> Repository Filters</div>
-    <div class="panel-body">
-      <div>
-        <label>Repository:</label><input type="text" class="form-control" v-model="search.repository.value"
-          @focus="suggestions.repository.enabled = true" @blur="suggestions.repository.enabled = false"/>
-        <div v-show="suggestions.repository.enabled">
-          <div v-for="name in suggestions.repository.value" v-on:mousedown="take_suggestion('repository', name)">!{ name }!</div>
-        </div>
-      </div>
-      <div><label>Revision:</label><input type="text" class="form-control" v-model="search.revision.value"/></div>
-      <div><label>Branch:</label><input type="text" class="form-control" v-model="search.branch.value"/></div>
-    </div>
-    </div>
-
-    <div class="panel panel-default" style="float: left;">
-    <div class="panel-heading"><i class="bi bi-funnel-fill"></i> Misc Filters</div>
-    <div class="panel-body">
-      <div>
-        <label>Tool:</label> <input type="text" class="form-control" v-model="search.tools.value"
-          @focus="suggestions.tools.enabled = true" @blur="suggestions.tools.enabled = false"/>
-        <div v-show="suggestions.tools.enabled">
-          <div v-for="name in suggestions.tools.value" v-on:mousedown="take_suggestion('tools', name)">!{ name }!</div>
-        </div>
-      </div>
-      <div><label>Description:</label> <input type="text" class="form-control" v-model="search.description.value"/></div>
-      <div><label>Result Limit:</label> <input type="text" class="form-control" v-model="search.limit.value"/></div>
-    </div>
-    </div>
-
-    <div class="panel panel-default" style="float: left;">
-    <div class="panel-heading"><i class="bi bi-calendar-range"></i> Date Filters</div>
-    <div class="panel-body">
-      <!--
-      <label>Newer than:</label><datepicker placeholder="Select Date"></datepicker>
-      <label>Older than:</label><datepicker placeholder="Select Date"></datepicker>
-      -->
-    </div>
-    </div>
-
-    <div class="panel panel-default" style="float: right;">
-    <div class="panel-heading"><i class="bi bi-lightning-charge-fill"></i> Actions</div>
-    <div class="panel-body">
-      <button @click="navigate('diff')" class="btn btn-default">View Differences</button>
-      <button @click="aggregate()" class="btn btn-default">Aggregate</button>
-      <button @click="navigate('patch')" class="btn btn-default">Patch Analysis</button>
-      <button @click="summary()" class="btn btn-default">Report Summary</button>
-    </div>
-    </div>
-
-  </div>
-  <table class="table table-condensed table-hover table-bordered table-db">
-    <thead>
-      <tr>
-        <th @click="sortBy('id')" :class="{ active: sortKey == 'id' }" style="width: 25px;">ID</th>
-        <th @click="sortBy('created')" :class="{ active: sortKey == 'created' }" style="width: 80px;">Created</th>
-        <th @click="sortBy('repository')" :class="{ active: sortKey == 'repository' }" style="width: 50px;">Repository</th>
-        <th @click="sortBy('revision')" :class="{ active: sortKey == 'revision' }" style="width: 100px;">Revision</th>
-        <th @click="sortBy('branch')" :class="{ active: sortKey == 'branch' }" style="width: 50px;">Branch</th>
-        <th @click="sortBy('tools')" :class="{ active: sortKey == 'tools' }" style="width: 50px;">Tools</th>
-        <th @click="sortBy('description')" :class="{ active: sortKey == 'description' }" style="width: 150px;">Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="collection in ordered_collections" :id="collection.id" @click="collection_click_handler(collection.id)">
-        <td><a :href="`${collection.id}/browse`">!{ collection.id }!</a></td>
-        <td>!{ formatDate(collection.created) }!</td>
-        <td><a :href="`../repositories/`">!{ collection.repository }!</a></td>
-        <td>!{ collection.revision }!</td>
-        <td>!{ collection.branch }!</td>
-        <td>!{ collection.tools }!</td>
-        <td>!{ collection.description }!</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<script>
-let URLS = {
-  collections_api: '{% url 'covmanager:collections_api' %}',
-  diff: '{% url 'covmanager:collections_diff' %}',
-  patch: '{% url 'covmanager:collections_patch' %}',
-  aggregate: '{% url 'covmanager:collections_aggregate_api' %}',
-  repository_search : '{% url 'covmanager:repositories_search_api' %}',
-  tools_search : '{% url 'covmanager:tools_search_api' %}',
-}
-
-let pmanager = new HashParamManager()
-
-const app = Vue.createApp({
-  delimiters: ['!{', '}!'],
-  data() {
-    return {
-      collections: null,
-      sortKey: "",
-      reverse: false,
-      block_fetch: true,
-      search_initialized: false,
-
-      search: {
-        branch: { value : "", contains : true },
-        description: { value : "", contains : true },
-        repository: { value : "", contains: true, postfix: "__name" },
-        revision: { value : "", contains : true },
-        tools: { value : "", contains: true, postfix: "__name" },
-        limit: { value : "10", contains : false },
-      },
-
-      suggestions: {
-        repository: { value: [], enabled : false},
-        tools: { value: [], enabled : false},
-      },
-
-      selected_collections: [],
-    }
-  },
-  created() {
-    const self = this
-    pmanager.forEach(function(k,v) {
-      // TODO: This is a shortcut that saves us iterating through this.search
-      // for every key that we are trying to map to a field in our search
-      // object, but this won't work once we have more postfixes.
-      k = k.replace(/__contains$/, '')
-      k = k.replace(/__name$/, '')
-
-      if (k != "" && k in self.search) {
-        self.search[k].value = v
-      }
-    })
-
-    self.fetch()
-  },
-  watch: {
-    // This handles all search updates
-    search: {  handler: 'fetch', deep: true },
-
-    // Watches for changes to values that need suggestions
-    'search.repository.value': function() {
-      this.update_suggestions('repository')
-    },
-    'search.tools.value': function() {
-      this.update_suggestions('tools')
-    },
-    collections: function() {
-      /* Whenever our search results change, deselect everything */
-      this.selected_collections = []
-      for (let i = 0; i < this.collections.length; ++i) {
-        let target = $("#" + this.collections[i].id)
-          if (target)
-            target.toggleClass("collection-selected", false)
-      }
-    }
-  },
-  computed: {
-    ordered_collections() {
-      return _.orderBy(this.collections, [this.sortKey], [this.reverse ? 'desc' : 'asc'])
-    },
-  },
-  methods: {
-    apiurl: function() {
-      let url = URLS.collections_api
-
-      for (k in this.search) {
-        let obj = this.search[k]
-        let v = obj.value
-
-        if ("postfix" in obj) {
-          k += obj.postfix
-        }
-
-        if ("contains" in obj && obj.contains) {
-          k += "__contains"
-        }
-
-        pmanager.update_value(k, v)
-      }
-
-      let query = pmanager.get_query()
-
-      if (query) {
-        url += "?" + query
-        pmanager.update_hash()
-      }
-
-      return url;
-    },
-    fetch: _.throttle (function () {
-      this.loading = true
-      fetch(this.apiurl(), {
-        method: 'GET',
-        credentials: 'same-origin'
-      }).then(response => {
-        if (response.ok) {
-          return response.json()
-        }
-        swal('Oops', E_SERVER_ERROR, 'error')
-        this.loading = false
-      }).then(json => {
-        this.collections = json["results"]
-        this.loading = false
-        this.block_fetch = false
-      })
-    }, 500),
-    navigate: function (dst) {
-      let ids = []
-
-      if (this.selected_collections.length > 0) {
-        ids = this.selected_collections;
-      } else {
-        for (let i = 0; i < this.ordered_collections.length; ++i) {
-          ids.push(this.ordered_collections[i].id)
-        }
-      }
-
-      if (ids) {
-        let url = URLS[dst] + '#ids=' + ids.join(',')
-        if (window.location.hash) {
-          url += "&" + window.location.hash.substr(1)
-        }
-
-        var win = window.open(url, '_blank');
-        win.focus();
-      }
-    },
-    sortBy: function (sortKey) {
-      this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
-      this.sortKey = sortKey
-    },
-    update_suggestions: _.throttle (function (key) {
-      fetch(URLS[key + '_search'] + "?name=" + this.search[key].value, {
-        method: 'GET',
-        credentials: 'same-origin'
-      }).then(response => {
-        if (response.ok) {
-          return response.json()
-        }
-        swal('Oops', E_SERVER_ERROR, 'error')
-      }).then(json => {
-        this.suggestions[key].value = json["results"]
-      })
-    }, 500),
-    take_suggestion: function(key, val) {
-      this.suggestions[key].enabled = false
-      this.suggestions[key].value = []
-      this.search[key].value = val
-    },
-    aggregate: function() {
-      let ids = []
-
-      if (this.selected_collections.length > 0) {
-        ids = this.selected_collections;
-      } else {
-        for (let i = 0; i < this.ordered_collections.length; ++i) {
-          ids.push(this.ordered_collections[i].id)
-        }
-      }
-
-      if (ids) {
-        swal({
-          title: "Create Collection Aggregation",
-          text: 'Enter optional new description for result collection',
-          content: 'input',
-          buttons: true,
-        }).then(description => {
-          if (!description) {
-            /* User pressed cancel button */
-            return;
-          }
-
-          // Call API, get new collection id back, then navigate to it
-          this.loading = true
-
-          let data = {
-            'ids': ids.join(",")
-          }
-          if (description) {
-            data['description'] = description
-          }
-
-          fetch(URLS.aggregate, {
-            method: 'POST',
-            credentials: 'same-origin',
-            headers: {
-              "Content-Type": "application/json; charset=utf-8",
-              "X-Requested-With": "XMLHttpRequest"
-            },
-            body: JSON.stringify(data),
-          })
-          .then(response => {
-            this.loading = false
-            if (response.ok) {
-              return response.json()
-            }
-            swal('Oops', E_SERVER_ERROR, 'error')
-          })
-          .then(json => {
-            let newid = json["newid"]
-            if (newid) {
-              window.open(json["newid"] + "/browse", '_self');
-            } else {
-              swal('Oops', E_SERVER_ERROR, 'error')
-            }
-          })
-        })
-      }
-    },
-    summary: function() {
-      let target_collection = null
-
-      if (this.selected_collections.length == 1) {
-        target_collection = this.selected_collections[0]
-      } else if (this.collections.length == 1) {
-        target_collection = this.collections[0].pk
-      } else {
-        swal('Error', "Function requires exactly one collection to be selected.", 'error')
-        return
-      }
-
-      window.open(`${target_collection}/summary/`, '_blank').focus()
-    },
-    collection_click_handler: function(id) {
-      var self = this
-      let idx = self.selected_collections.indexOf(id)
-      let target = $("#" + id)
 
-      if (idx < 0) {
-        self.selected_collections.push(id)
-        if (target)
-          target.toggleClass("collection-selected", true)
-      } else {
-        self.selected_collections.splice(idx, 1)
-        if (target)
-          target.toggleClass("collection-selected", false)
-      }
-    },
-    formatDate: function (datetime){
-      return formatClientTimestamp(datetime)
-    }
-  }
-})
+<collectionslist />
 
-app.mount('#main')
-</script>
 {% endblock body_content %}