#54: Updated report table styling and functionality to display properly

anms-ui/public/app/components/management/agents/AgentModal.vue

@@ -2,13 +2,12 @@
   <div>
     <b-modal id="agentModal"
       ref="agentModal"
-      title="Agent Details"
-      size="lg"
+      size="xl"
       ok-only
-      @hide="closeModal">
+      @hide="closeModal"
+      title="'Agent Details:' agentInfo.agent_id_string">
       <div v-if="agentInfo">
         <div>Registered Agents ID = {{ agentInfo.registered_agents_id }}</div>
-        <div>Agent ID String: {{ agentInfo.agent_id_string }}</div>
         <div>First Registered: {{ agentInfo.first_registered }}</div>
         <div>Last Registered: {{ agentInfo.last_registered }}</div>
 
@@ -53,9 +52,8 @@ export default {
   watch: {
     showModal(newValue, _) {
       const vm = this;
-    vm.setAgentId(vm.agentInfo.registered_agents_id);
-    vm.reloadAgent();
-    console.log(vm.currentAgent)
+      vm.setAgentId(vm.agentInfo.registered_agents_id);
+      vm.reloadAgent();
       if (newValue === true) {
         this.show();
       }

anms-ui/public/app/components/management/agents/crud.vue

@@ -4,15 +4,26 @@
     <!-- request name -->
     <!-- request input -->
     <p>Operation: </p>
-    <select v-model="selected" @change="setParams(selected.command_parameters)">
-      <option disabled value="-1">-- Select Operation --</option>
-      <option v-for="opt, index in Operations" :key="index" :value="opt">{{ opt.command_name }}</option>
-    </select>
-    <div v-for="(param) in params" v-bind:key="param.name">
-      {{ param.name }}::
-      <input v-b-tooltip.hover type="string" name="parms" v-model="param.value" />
-    </div>
-    <button @click="onClick()">Send Parameter</button>
+    <b-form-select v-model="selected"
+      @change="setParams(selected.command_parameters)"
+      size="md"
+      class="select-max-width">
+      <b-form-select-option disabled
+        value="-1">-- Select Operation --</b-form-select-option>
+      <b-form-select-option v-for="opt, index in Operations"
+        :key="index"
+        :value="opt">{{ opt.command_name }}</b-form-select-option>
+    </b-form-select>
+    <b-form class="form-spacing">
+      <b-form-group v-for="(param) in params">
+        <b-form-input class="capitalize"
+          :id="param.name"
+          v-model="param.value"
+          :placeholder="param.name">
+        </b-form-input>
+      </b-form-group>
+      <b-button @click="onClick()">Send Parameter</b-button>
+    </b-form>
 
     <div>
       [{{ results }}]
@@ -56,7 +67,7 @@ export default {
       api.methods
         .apiPutCRUD(this.agentId, this.selected.agent_parameter_id, this.final_values)
         .then((response) => {
-          this.results = "SENT! "+ response.data + " " + response.statusText ;
+          this.results = "SENT! " + response.data + " " + response.statusText;
           this.selected = -1;
           this.params = []
         })
@@ -74,4 +85,25 @@ export default {
 
 
 </script>
-<style scoped></style>
+<style scoped>
+.select-max-width {
+  max-width: 600px;
+}
+
+.form-spacing {
+  margin: 16px 0;
+}
+
+.capitalize::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  text-transform: capitalize;
+}
+.capitalize::-moz-placeholder { /* Firefox 19+ */
+  text-transform: capitalize;
+}
+.capitalize:-ms-input-placeholder { /* IE 10+ */
+  text-transform: capitalize;
+}
+.capitalize:-moz-placeholder { /* Firefox 18- */
+  text-transform: capitalize;
+}
+</style>

anms-ui/public/app/components/management/agents/reports.vue

@@ -2,16 +2,34 @@
 <template>
   <div>
     <p>Reports sent:</p>
-    <div v-if="loading" class="spinner-border text-primary" role="status">
+    <div v-if="loading"
+      class="spinner-border text-primary"
+      role="status">
       <span class="sr-only">Loading...</span>
     </div>
-    <select v-if="!loading" v-model="selected" @change="onReportSelect()">
-      <option disabled value="-1">-- Select Sent Reports --</option>
-      <option v-for="rpt, index in rptts" :key="index" :value="index">{{ rpt.adm }}.{{ rpt.name }}</option>
-    </select>
-    <b-table v-if="!loading" id="report-table" :items="reports[selected]" hover bordered>
+    <b-form-select v-if="!loading"
+      v-model="selected"
+      @change="onReportSelect()"
+      size="md"
+      class="select-max-width">
+      <b-form-select-option disabled
+        value="-1">-- Select Sent Reports --</b-form-select-option>
+      <b-form-select-option v-for="rpt, index in rptts"
+        :key="index"
+        :value="index">{{ rpt.adm }}.{{ rpt.name }}</b-form-select-option>
+    </b-form-select>
+    <b-table v-if="!loading && selected != -1"
+      id="report-table"
+      :fields="tableHeaders"
+      :items="tableItems"
+      class="spacing-table"
+      hover
+      bordered
+      responsive>
     </b-table>
   </div>
+
+      <!-- :items="reports[selected]" -->
 </template>
 
 <script>
@@ -23,7 +41,8 @@ export default {
   data() {
     return {
       selected: -1,
-      headers: [],
+      tableHeaders: [],
+      tableItems: [],
       title: "",
       reports: {},
       loading: true,
@@ -32,23 +51,33 @@ export default {
   methods: {
     async onReportSelect() {
       this.loading = true;
-      
+
       if (this.reports[this.selected] == undefined) {
         this.loading = true;
         let rpt_name = this.rptts[this.selected].name;
         let rpt_adm = this.rptts[this.selected].adm;
         await api.methods.apiEntriesForReport(this.agentName, rpt_adm, rpt_name)
           .then(res => {
             this.reports[this.selected] = res.data;
-            // this.headers = this.reports.shift()
+            this.processReport(res.data);
           }).catch(error => {
             // handle error
             console.error("reports error", error);
             console.info("error obj:", error);
           });
-        }
+      }
       this.loading = false;
     },
+    processReport(report) {
+      this.tableHeaders = report.shift();
+      for (let item of report) {
+        let row = {};
+        for (let i = 0; i < this.tableHeaders.length; i++) {
+          row[this.tableHeaders[i]] = item[i];
+        }
+        this.tableItems.push(row);
+      }
+    }
   },
   computed: {
   },
@@ -75,4 +104,12 @@ export default {
 
 
 </script>
-<style scoped></style>
+<style scoped>
+.spacing-table {
+  margin: 16px 0;
+}
+
+.select-max-width {
+  max-width: 600px;
+}
+</style>