Display session messages and data within agent panel

src/App.vue

@@ -41,6 +41,15 @@
       </div>
     </div>
 
+    <!-- Session detail box -->
+    <div class="fullScreenMask" v-if="opDetail">
+      <div class="infoModal">
+        <div class="infoModalContent">
+          <OpDetail :opDetail="opDetail" @close="clearOpDetail()" />
+        </div>
+      </div>
+    </div>
+
     <!-- Password config -->
     <div class="fullScreenMask" v-if="passwordWindow">
       <div class="errorModal">
@@ -122,6 +131,7 @@
   import ConfigsWindow from './panels/ConfigsWindow.vue';
   import GenericAgent from './panels/GenericAgent.vue';
   import AgentList from './components/AgentList.vue';
+  import OpDetail from './components/OpDetail.vue';
   import PasswordConfig from './components/PasswordConfig.vue';
 
   // Agent panels - OCS
@@ -225,6 +235,7 @@
         mainMode: 'config',
         errorInfo: null,
         userConfirm: null,
+        opDetail: null,
         passwordWindow: null,
         accessLevel: 0,
       }
@@ -244,6 +255,7 @@
       AgentList,
       MainBrowser,
       ConfigsWindow,
+      OpDetail,
       PasswordConfig,
     },
     computed: {
@@ -312,6 +324,9 @@
 
         this.userConfirm = null;
       },
+      clearOpDetail() {
+        this.opDetail = null;
+      },
       confirmPw() {
         this.passwordWindow = null;
       },
@@ -446,6 +461,11 @@
               });
       };
 
+      ocs_bundle.ui_show_detail = (data) => {
+        this.opDetail = {title: data.name,
+                         data: data};
+      };
+
       ocs_bundle.get_password_settings = () => {
         return {
           escalation: this.active_agent.escalation,
@@ -567,6 +587,27 @@
     background-color: #fff;
     width: 90%;
   }
+  .infoModal {
+    position: fixed;
+    left: 10%;
+    top: 5%;
+    width: 80%;
+    background-color: #4888;
+  }
+  @media screen and (max-width: 1000px) {
+    .infoModal {
+      left: 5%;
+      width: 90%;
+    }
+  }
+  .infoModalContent {
+    margin: 5%;
+    height: 80%;
+    padding: 10px;
+    border: 1px solid #88c;
+    background-color: #fff;
+    width: 90%;
+  }
   .buttonGroup button {
     display: inline-block;
   }

src/components/OcsProcess.vue

@@ -14,7 +14,7 @@
       <slot></slot>
 
       <div v-if="show_status" class="ocs_row">
-        <label>Status</label>
+        <label><span class="clickable" @click="showData()">Status</span></label>
         <input class="ocs_double"
                type="text"
                disabled="1"
@@ -67,6 +67,9 @@
         window.ocs_bundle.ui_stop_proc(this._get_client_or_address(),
                                        this.name);
       },
+      showData() {
+        window.ocs_bundle.ui_show_detail(this.op_data);
+      },
     },
   }
 

src/components/OcsTask.vue

@@ -17,7 +17,7 @@
       <slot></slot>
 
       <div v-if="show_status" class="ocs_row">
-        <label>Status</label>
+        <label><span class="clickable" @click="showData()">Status</span></label>
         <input class="ocs_double"
                type="text"
                disabled="1"
@@ -77,6 +77,9 @@
         window.ocs_bundle.ui_abort_task(this._get_client_or_address(),
                                         this.name);
       },
+      showData() {
+        window.ocs_bundle.ui_show_detail(this.op_data);
+      },
     },
   }
 </script>

src/components/OpDetail.vue

@@ -0,0 +1,94 @@
+<template>
+  <h2>{{ opDetail.title }}</h2>
+  <div class="holder ocs_ui">
+    <div class="tabs">
+      <div v-for="tab in tabs" v-bind:key="tab" :class="{inactive: detailTab!=tab}">
+        <span
+          @click="setDetailTab(tab)"
+          :class="{inactive: detailTab!=tab}"
+        >{{ tab }}</span>
+      </div>
+    </div>
+    <br />
+    <div class="scrollableContent">
+      <div v-if="opDetail && detailTab=='session'">
+        <p>Summary: {{ formatStatus(opDetail.data.session) }}</p>
+        <p>Message buffer:</p>
+        <div class="messageList">
+          <div v-for="(row, index) in opDetail.data.session.messages" v-bind:key="index">
+            {{ formatDate(row[0]) }} : {{ row[1] }}
+          </div>
+        <!-- pre>{{ opDetail.data.session.messages }}
+             </pre -->
+        </div>
+      </div>
+      <div v-if="opDetail && detailTab=='data'">
+        <pre>{{ opDetail.data.session.data }}</pre>
+      </div>
+      <!-- div v-if="opDetail && detailTab=='docs'">
+        {{ opDetail.docstring }}
+      </div -->
+    </div>
+  </div>
+  <div class="buttonGroup">
+    <button style="width: 200px" @click="this.$emit('close')">Ok</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'OpDetail',
+    props: {
+      opDetail: Object,
+    },
+    emits: ["close"],
+    data: function () {
+      return {
+        tabs: ['session', 'data'],
+        detailTab: 'session',
+      }
+    },
+    methods: {
+      setDetailTab(option) {
+        this.detailTab = option;
+      },
+      formatDate(t) {
+        return new Date(t * 1000).toISOString().replace('T', ' ').replace('Z', '');
+      },
+      formatStatus(session) {
+        return window.ocs_bundle.web.get_status_string(session);
+      },
+    },
+  }
+</script>
+
+<style scoped>
+
+  .tabs > div {
+    display: inline;
+    border: solid black 1px;
+    padding: 10px;
+    width: 50px;
+  }
+  .tabs {
+    margin: 10px 0px;
+  }
+  .inactive {
+    background-color: #ddd;
+  }
+
+  .holder {
+    overflow: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    max-height: 70vh;
+  }
+  .scrollableContent {
+    overflow-y: auto;
+    flex-grow: 1;
+  }
+  .buttonGroup button {
+    display: inline-block;
+  }
+</style>