215 transcoder log table navigation misbehavior (#260)

* fixed pagnation issue/ refreshed transcoder table format

* fixed updateNonce error and made addARI btn always an option

* if there no object to add do nothing

* correctly copy mgr.rc file

* fixed handlePageChange not found issue

* file clean up

---------

Co-authored-by: David Linko <david.linko@jhuapl.edu>

Author: d-linko

anms-ui/public/app/components/management/builder/ActionParameter.vue

@@ -8,10 +8,8 @@
           :options="listComponents"
           @input="addToList"
           :clearSearchOnSelect="false">
-          <template v-slot:no-options="{ search, searching }">
-            <template v-if="searching">
-              <b-button @click="addARI(search)">Add ARI</b-button>
-            </template>
+          <template v-slot:list-header="{ search, _ }">
+              <b-button size="sm" @click="addARI(search)">Add ARI</b-button>
           </template>
         </v-select>
       </b-form-group>
@@ -62,6 +60,7 @@ export default {
   },
   methods: {
     addARI(newARI ) {
+      newARI = newARI.trim();
       this.ariKey = { "display": newARI, "actual": true }
       this.addToList();
     },

anms-ui/public/app/components/management/builder/buildAri.vue

@@ -34,7 +34,7 @@
         <b-container>
           <h5>ARI Builder</h5>
           <label>
-          <input type="checkbox" v-model="isExecutionCheck" onchange="updateNonce"/>
+          <input type="checkbox" v-model="isExecutionCheck"/>
           Execution Set?
         </label>
         <div v-if="isExecutionCheck">
@@ -138,9 +138,6 @@ export default {
       reloadARIs: "reloadARIs",
       setSearchString: "setSearchString"
     }),
-    updateNonce(){
-      this.correlator_nonce = undefined;
-    },
     onSearch(search, loading) {
       if (search.length) {
         loading(true);
@@ -186,8 +183,10 @@ export default {
       });
     },
     updateResults: function (result) {
-      let head = result[0].value.includes("ari") ? "" : "ari://";
-      this.finResultStr = head + result[0].value;
+      if(result[0].value){
+        let head = result[0].value.includes("ari") ? "" : "ari://";
+        this.finResultStr = head + result[0].value;
+      }
     },
     submitAriString() {
       this.handleCbor(this.finResultStr);

anms-ui/public/app/components/management/builder/transcoder.vue

@@ -27,31 +27,32 @@
               <button class="btn btn-outline-secondary" @click="reloadTranscoderLog()" data-toggle="tooltip" data-placement="top" title="Refresh Transcoder Log Table!"> &#x21bb;</button>
             </div>
           </div>
+          <p>Select CBOR(s) to send to Agents tab</p>
           <div class="b-table">
-            <p>Select CBOR(s) to send to Agents tab</p>
             <b-table scr
               id="transcoder-table"
+              striped
+              bordered
+              no-border-collapse
               :items="currentTranscoderLogs"
               :fields="fields"
               :per-page="pageSize"
-              hover
-              bordered
               :sort-by.sync="sortField"
               :sort-desc.sync="sortDesc">
               <template #cell(selected)="{ item }">
                 <div style="text-align: center;">
                     <b-form-checkbox :checked="item.selected"  @change="selectTranscoderLog($event, item)"></b-form-checkbox>
                 </div>
               </template>
-              <template #cell(cbor)="{ item }">
-                <h5 v-b-tooltip.hover
+          <template #cell(cbor)="{ item }">
+                <p v-b-tooltip.hover
                   title="send to agents page"
                   @click="sendTranscoderCode(item.cbor)">
                   {{ item.cbor }}
-                </h5>
-              </template>
-            </b-table>
-            
+          </p>
+            </template>
+          </b-table>
+          </div>
             <div class="d-flex float-right">
               <div>
               <button class="btn btn-outline-secondary"
@@ -71,15 +72,13 @@
                   </option>
                 </select>
               </div>
-              
               <b-pagination v-model="page"
                 class="m-0"
                 :total-rows="count"
                 :per-page="pageSize"
                 aria-controls="transcoder-table"
                 @change="handlePageChange"></b-pagination>
             </div>
-          </div>
         </b-col>
         <br/>
       </b-row>
@@ -90,13 +89,12 @@
 <script>
 import { mapGetters, mapActions } from "vuex";
 
-
 export default {
   name: "Transcoder",
   data() {
     return {
       fields: [
-        { key: "selected", label: "", sortable: false }, {key: "transcoder_log_id", sortable: true }, { key: "input_string", sortable: true }, { key: "parsed_as", sortable: true }, { key: "cbor", sortable: false }, { key: "ari", sortable: false }, { key: "uri", sortable: false },
+        { key: "selected", label: "", sortable: false}, {key: "transcoder_log_id", sortable: true}, { key: "input_string", sortable: true }, { key: "parsed_as", sortable: true }, { key: "cbor", sortable: false }, { key: "ari", sortable: false }, { key: "uri", sortable: false },
       ],
       nodeMan: null,
       node: null,
@@ -160,7 +158,6 @@ export default {
         }else{ // else it needs to be removed from list 
           this.selected_cbors = this.selected_cbors.filter(obj => ![entryUpdated.transcoder_log_id].includes(obj.transcoder_log_id));
         }
-
       }
     },
     sendTranscoderCodeSelected(){
@@ -171,13 +168,17 @@ export default {
     },
     handlePageChange(value) {
       const vm = this;
-      vm.reloadTranscoderLog();
       vm.setPage(value);
+      // slight buffer to allow transcoder to catch up of needed 
+      let sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+      sleep(200).then(() => {
+        vm.reloadTranscoderLog();
+      });
     },
     handlePageSizeChange(event) {
       const vm = this;
       vm.setPageSize(event.target.value);
-      handlePageChange(1);
+      vm.handlePageChange(1);
     },
     handleSearchStringChange(event) {
       const vm = this;
@@ -189,12 +190,12 @@ export default {
 
 <style>
 .b-table {
-  max-height: calc(100vh - 300px);
+  max-height: calc(90vh - 300px);
   overflow-y: auto;
 }
 
 .page-item.active .page-link {
   border-color: var(--success);
   color: var(--success)
 }
-</style>
+</style>

testenv.Containerfile

@@ -148,8 +148,7 @@ RUN systemctl enable ion bpecho@4 ion-app-proxy && \
     mkdir -p /var/run/ion
 
 # Runtime config for this container
-COPY deps/dtnma-tools/integration-test-ion/node-*.rc /etc/ion/
-COPY deps/test-ion-configs/mgr.rc etc/ion/
+COPY deps/test-ion-configs/mgr.rc etc/ion/node-1.rc
 
 # CMD is systemd init
 EXPOSE 1113/udp
@@ -176,7 +175,6 @@ RUN systemctl enable ion bpecho@4 refda-ion && \
     mkdir -p /var/run/ion
 
 # Runtime config for this container
-# COPY deps/dtnma-tools/integration-test-ion/node-*.rc /etc/ion/
 COPY deps/test-ion-configs/agent-2.rc /etc/ion/node-2.rc
 COPY deps/test-ion-configs/agent-3.rc /etc/ion/node-3.rc