Further vue and primevue upgrades

NationalSecurityAgency · Sep 24, 2024 · a14ddff · a14ddff
1 parent 9d20777
commit a14ddff
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 103 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -19,19 +19,18 @@ import HeaderNav from "@/components/HeaderNav.vue";
 </script>
 
 <template>
-  <div id="app">
+  <div>
     <HeaderNav />
-    <div class="container my-3">
-      <router-view/>
+    <div style="left: 20%; right: 20%;" class="absolute" >
+      <router-view />
     </div>
   </div>
 </template>
 <style>
-#app {
+body {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
 }
 </style>
diff --git a/frontend/src/components/HeaderNav.vue b/frontend/src/components/HeaderNav.vue
@@ -18,15 +18,17 @@ limitations under the License.
 </script>
 
 <template>
-    <div class="flex gap-2 bg-green-200">
-      <router-link to="/" class="text-white">
+    <div class="flex gap-4 header p-3">
+      <router-link to="/" class="text-white text-2xl">
         <i class="pi pi-hammer" style="font-size: 1rem"></i>
         SkillTree Stress Tests
       </router-link>
-      <router-link to="/errors" class="text-white">Errors</router-link>
+      <router-link to="/errors" class="text-white text-xl">Errors</router-link>
     </div>
 </template>
 
 <style scoped>
-
+.header {
+  background-color: #17a2b8 !important
+}
 </style>
diff --git a/frontend/src/components/StartStressTest.vue b/frontend/src/components/StartStressTest.vue
@@ -53,59 +53,61 @@ limitations under the License.
 <template>
   <Card>
     <template #title>
-      <h4>
-        <span class="uppercase text-primary">Stress Test Settings</span>
-        <ToggleButton v-model="expanded" offLabel="Show Settings" onLabel="Hide Settings">
+      <div class="border-bottom-1 p-3 surface-border surface-100 flex gap-4">
+        <span class="uppercase text-primary flex-1 text-left">Stress Test Settings</span>
+        <ToggleButton v-model="expanded" offLabel="Show Settings" onLabel="Hide Settings" class="">
         </ToggleButton>
-      </h4>
+      </div>
     </template>
     <template #content>
       <div class="flex">
-        <div class="flex flex-auto gap-4">
+        <div class="flex flex-column gap-2 w-full">
           <label class="uppercase" for="serviceUrl">Service Url</label>
           <InputText v-model="serviceUrl" id="serviceUrl"></InputText>
         </div>
       </div>
-      <div v-if="expanded" class="flex flex-column">
-        <div class="flex flex-1 gap-2 mt-2">
+      <div v-if="expanded" class="flex flex-wrap gap-4 mt-4">
+        <div class="flex flex-column gap-2">
           <label class="uppercase block" for="numProjects"># Projs</label>
           <InputNumber v-model="numProjects" inputId="numProjects"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="subjPerProject">Subj Per Proj</label>
           <InputNumber v-model="subjPerProject" inputId="subjPerProject"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="skillsPerSubject">skills per Subj</label>
           <InputNumber v-model="skillsPerSubject" inputId="skillsPerSubject"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="badgesPerProject">badges per Proj</label>
           <InputNumber v-model="badgesPerProject" inputId="badgesPerProject"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="hasDependenciesEveryNProjects">Dependency Every N Projects</label>
           <InputNumber v-model="hasDependenciesEveryNProjects" inputId="hasDependenciesEveryNProjects"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="numUsersPerApp">Users Per Proj</label>
           <InputNumber v-model="numUsersPerApp" inputId="numUsersPerApp"></InputNumber>
         </div>
 
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="numConcurrentThreads">Number of Concurrent Threads</label>
           <InputNumber v-model="numConcurrentThreads" inputId="numConcurrentThreads"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="sleepMsBetweenRequests">Sleep (MS) between Requests</label>
           <InputNumber v-model="sleepMsBetweenRequests" inputId="sleepMsBetweenRequests"></InputNumber>
         </div>
-        <div class="flex flex-1 gap-2 mt-2">
+        <div class="flex flex-column gap-2">
           <label class="uppercase" for="check-button">Remove Existing Test Projects</label>
-          <Checkbox v-model="removeExistingTestProjects" name="check-button" switch>
-            <span v-if="removeExistingTestProjects">Existing projects will be deleted</span>
-            <span v-else>Existing projects will be preserved</span>
-          </Checkbox>
+          <div>
+            <ToggleSwitch v-model="removeExistingTestProjects" name="check-button">
+            </ToggleSwitch>
+            <span v-if="removeExistingTestProjects" class="ml-2">Existing projects will be deleted</span>
+            <span v-else class="ml-2">Existing projects will be preserved</span>
+          </div>
         </div>
       </div>
       <div class="text-left mt-3 uppercase">

diff --git a/frontend/src/components/StressTestStatus.vue b/frontend/src/components/StressTestStatus.vue
@@ -36,17 +36,13 @@ defineProps(['status', 'running']);
 
 <template>
   <div v-if="status">
-    <div class="text-left uppercase text-info mt-5 border-bottom">
+    <div class="text-left uppercase mt-5 border-bottom-1 text-3xl text-surface pb-2">
       <div class="flex">
-        <div class="flex-1">
-          <h2 class="font-bold">
+        <div class="flex-1 font-bold">
             STRESS TEST RUN
-          </h2>
         </div>
-        <div class="flex-1 text-center text-md-right">
-          <h5 class="font-light">
-            Errors: <router-link to="/errors"><span class="text-warning">{{ status.numErrors }}</span></router-link> <span class="d-none d-md-inline mx-2">|</span> Running: <span class="text-success">{{ running || false }}</span>
-          </h5>
+        <div>
+          Errors: <router-link to="/errors"><span class="text-warning">{{ status.numErrors }}</span></router-link> <span class="d-none d-md-inline mx-2">|</span> Running: <span class="text-success">{{ running || false }}</span>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/StressTestsMetrics.vue b/frontend/src/components/StressTestsMetrics.vue
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 <script setup>
-import { defineProps } from 'vue';
 import NumberFilter from "@/filters/NumberFilter.js";
+import DateFormatter from '@/filters/DateFilter.js';
 import ChartAvgLatencyTimechart from "@/components/charts/ChartAvgLatencyTimechart.vue";
 import GroupByExecTimeChart from "@/components/charts/GroupByExecTimeChart.vue";
 import SingleStatCard from "@/components/metrics/SingleStatCard.vue";
@@ -26,22 +26,22 @@ defineProps(['reportSkillsRes', 'startTimestamp', 'title', 'disableResCharts']);
 const formatNum = (numVal) => {
   return NumberFilter.format(numVal);
 };
+
+const formatDate = (dateVal) => {
+  return DateFormatter.format(dateVal);
+}
 </script>
 
 <template>
-  <div v-if="reportSkillsRes">
-    <h3 class="text-center text-md-left border-bottom text-info font-bold uppercase">
-      <div class="flex">
-        <div class="flex-1">
+  <div v-if="reportSkillsRes" class="mt-8">
+    <div class="flex border-bottom-1 text-surface uppercase">
+        <div class="flex-1 font-bold text-3xl">
           {{ title }}
         </div>
-        <div class="flex-1 text-center text-md-right">
-          <h5 class="font-light uppercase text-md-right">
-            Started: <span class="text-dark">{{ startTimestamp }}</span>
-          </h5>
+        <div class="text-xl">
+          Started: <span>{{ formatDate(startTimestamp) }}</span>
         </div>
-      </div>
-    </h3>
+    </div>
 
     <div class="flex gap-2 mt-4 mb-4">
       <div class="flex-1">
@@ -59,9 +59,11 @@ const formatNum = (numVal) => {
       <ChartAvgLatencyTimechart :time-series="reportSkillsRes.historyOfAvgLatencyPer1k"/>
     </div>
 
-    <div class="flex flex-wrap gap-2 mt-3 w-full">
+    <div class="flex gap-2 mt-3">
       <GroupByExecTimeChart title="Overall Latency Breakdown"  :grouped-exec-times="reportSkillsRes.groupedExecTimes" class="flex-1"/>
       <ResultExaplanationChart v-if="!disableResCharts" title="Overall Result Explanations" :explanation-counts="reportSkillsRes.explanationCounts" class="flex-1"/>
+    </div>
+    <div class="flex gap-2 mt-3">
       <GroupByExecTimeChart title="Last 1k Latency Breakdown" :grouped-exec-times="reportSkillsRes.groupedExecTimesLast1k" class="flex-1"/>
       <ResultExaplanationChart v-if="!disableResCharts" title="Last 1k Result Explanations" :explanation-counts="reportSkillsRes.explanationCountsLast1k" class="flex-1"/>
     </div>

diff --git a/frontend/src/components/charts/ChartAvgLatencyTimechart.vue b/frontend/src/components/charts/ChartAvgLatencyTimechart.vue
@@ -16,6 +16,7 @@ limitations under the License.
 <script setup>
 import { ref, watch } from 'vue';
 import dateFormatter from "@/filters/DateFilter.js";
+import Message from 'primevue/message';
 
 const props = defineProps(['timeSeries']);
 
@@ -101,28 +102,23 @@ const updateSeriesLine = () => {
 <template>
   <Card>
     <template #title class="text-left">
-      <h5>Average Latency Per 1k Records</h5>
+      <div class="border-bottom-1 p-3 surface-border surface-100 flex gap-4">
+        <span class="uppercase text-primary flex-1 text-left">Average Latency Per 1k Records</span>
+      </div>
     </template>
     <template #content>
-      <div v-if="!timeSeries || (timeSeries && timeSeries.length == 0)" class="msg-overlay row justify-content-md-center">
-<!--        <div class="col-7">-->
-<!--          <div class="alert alert-info">Not enough events processed</div>-->
-<!--        </div>-->
+      <div>
+        <apexchart id="avgLatencyChart" ref="avgLatencyChart" height="350" type="line" :options="options" :series="series">
+        </apexchart>
+        <div v-if="!timeSeries || (timeSeries && timeSeries.length == 0)" class="flex absolute left-0 right-0 justify-content-center"
+             style="z-index: 1000 !important; margin-top: -220px" role="alert">
+            <Message>Not enough events processed</Message>
+        </div>
       </div>
-      <apexchart id="avgLatencyChart" ref="avgLatencyChart" height="350" type="line"
-                 :options="options" :series="series">
-      </apexchart>
+
     </template>
   </Card>
 </template>
 
 <style scoped>
-.msg-overlay {
-  position: absolute;
-  z-index: 1000;
-  text-align: center;
-  width: 100%;
-  top: 30%;
-  left: 2rem;
-}
 </style>
diff --git a/frontend/src/components/charts/GroupByExecTimeChart.vue b/frontend/src/components/charts/GroupByExecTimeChart.vue
@@ -95,7 +95,9 @@ watch( () => props.groupedExecTimes, () => {
 <template>
   <Card>
     <template #title class="text-left">
-      <h5>{{ title }}</h5>
+      <div class="border-bottom-1 p-3 surface-border surface-100 flex gap-4">
+        <span class="uppercase text-primary flex-1 text-left">{{ title }}</span>
+      </div>
     </template>
     <template #content>
       <apexchart type="bar" height="400" :options="options" :series="series"></apexchart>

diff --git a/frontend/src/components/charts/ResultExaplanationChart.vue b/frontend/src/components/charts/ResultExaplanationChart.vue
@@ -107,7 +107,9 @@ const options = {
 <template>
   <Card>
     <template #title class="text-left">
-      <h5>{{ title }}</h5>
+      <div class="border-bottom-1 p-3 surface-border surface-100 flex gap-4">
+        <span class="uppercase text-primary flex-1 text-left">{{ title }}</span>
+      </div>
     </template>
     <template #content>
       <apexchart type="bar" height="400" :options="options" :series="series"></apexchart>

diff --git a/frontend/src/components/errors/ErrorsPage.vue b/frontend/src/components/errors/ErrorsPage.vue
@@ -16,6 +16,10 @@ limitations under the License.
 <script setup>
 import { ref, onMounted } from 'vue';
 import StressTestsService from "@/services/StressTestsService.js";
+import Message from 'primevue/message';
+import Badge from 'primevue/badge';
+import DateFormatter from '@/filters/DateFilter.js';
+import TimePassedFilter from '@/filters/TimePassedFilter.js';
 
 const loading = ref(true);
 const errors = ref([]);
@@ -42,57 +46,55 @@ const collapseFlip = (error) => {
 
 <template>
   <div class="text-left">
-    <h2 class="pb-3 mb-5 border-bottom">
-<!--      <b-icon icon="emoji-frown" class="font-light"/>-->
+    <h2 class="pb-3 mb-5 border-bottom-1">
+      <i class="pi pi-exclamation-circle"></i>
       <span class="uppercase mx-1">Errors</span> <span class="font-light">(last 20)</span>
       <Button @click="loadErrors" class="float-right mb-3" variant="outline-primary">
-        arrow-repeat
-<!--        <b-icon icon="arrow-repeat"/>-->
+        <i class="pi pi-refresh"></i>
       </Button>
     </h2>
     <div v-if="loading" class="text-center">
 <!--      <b-spinner variant="info" type="grow" label="Spinning" style="width: 3rem; height: 3rem;"></b-spinner>-->
-      <div class="uppercase text-info mt-2">
+      <div class="uppercase mt-2">
         Loading...
       </div>
     </div>
-    <div v-if="!errors || errors.length === 0" class="justify-content-md-center row">
-      <div class="col-12 text-center">
+    <div v-if="!errors || errors.length === 0" class="flex justify-content-md-center row">
+      <div class="flex-1 text-center">
         <h4>
-<!--          <b-alert variant="success" show>-->
-<!--            <b-icon icon="trophy"/>-->
+          <Message severity="success">
+            <i class="pi pi-trophy"></i>
             Congrats!! There are no errors!
-<!--          </b-alert>-->
+          </Message>
         </h4>
       </div>
     </div>
     <div v-if="!loading">
-      <div v-for="error in errors" :key="error.id" class="row mt-3 border-bottom">
-        <div class="col-12">
-          <h5>
-<!--            <b-badge class="p-2 border border-dark" variant="info">{{ error.httpStatus }}-->
-<!--              <b-badge variant="light">{{ error.numOccur }}</b-badge>-->
-<!--            </b-badge>-->
-          </h5>
-          <h6><span class="font-light">Last Seen:</span>
-            <span class="ml-1">{{ error.lastSeen }}</span> <span
-                class="font-light ml-1">({{ error.lastSeen }})</span>
-            <a href="#" class="float-right" @click="collapseFlip(error)">View Error History
-<!--              <b-icon icon="arrow-down-square-fill"/>-->
+      <div v-for="error in errors" :key="error.id" class="mt-3 border-bottom-1">
+        <div>
+          <div>
+            <Badge size="xlarge">{{ error.httpStatus}} <Badge severity="danger" class="ml-4">{{ error.numOccur }}</Badge></Badge>
+          </div>
+          <div class="flex gap-2 mt-2">
+            <span class="flex">Last Seen:</span>
+            <span class="flex">{{ DateFormatter.format(error.lastSeen) }}</span> <span class="font-light ml-1">({{ TimePassedFilter.format(error.lastSeen) }})</span>
+            <a href="#" class="" @click="collapseFlip(error)">
+              View Error History <i class="pi pi-arrow-down"></i>
             </a>
-          </h6>
+          </div>
         </div>
-        <div class="col-12">
-          <pre class="bg-light p-3">{{ formatJson(error.serverBody) }}</pre>
+        <div class="flex-1">
+          <pre class="bg-light p-3">{{ error.serverBody }}</pre>
         </div>
-        <div v-if="!error.collapsed" class="col-12">
-          <div class="ml-5 border rounded p-3">
-            <h5 class="mb-3 border-bottom"><span>History:</span> <span class="font-light ml-1">(last 20)</span></h5>
+        <div v-if="!error.collapsed" class="flex-1">
+          <div class="ml-5 border-1 rounded p-3">
+            <div class="mb-3 border-bottom-1"><span>History:</span> <span class="font-light ml-1">(last 20)</span></div>
             <div v-for="historyError in error.latestErrors" :key="historyError.id" class="border-bottom mb-3">
-              <h6><span class="font-light">Date:</span>
+              <div>
+                <span>Date:</span>
                 <span class="ml-1">{{ error.lastSeen }}</span>
-              </h6>
-              <pre class="bg-light p-3">{{ formatJson(historyError.serverBody) }}</pre>
+              </div>
+              <pre class="bg-light p-3" style="max-width: 100%;">{{ historyError.serverBody }}</pre>
             </div>
           </div>
         </div>

diff --git a/frontend/src/components/home/LandingPage.vue b/frontend/src/components/home/LandingPage.vue
@@ -18,10 +18,11 @@ import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import StressTestStatus from "@/components/StressTestStatus.vue";
 import StartStressTest from "@/components/StartStressTest.vue";
 import StressTestsService from "@/services/StressTestsService.js";
+import Message from 'primevue/message';
 
 const running = ref(false);
 const failedToStart = ref(false);
-const status = ref({});
+const status = ref(null);
 const timer = ref(undefined);
 
 onMounted(() => {loadStatus()})
@@ -68,7 +69,9 @@ watch(running, (value) => {
 <template>
   <div class="container">
     <start-stress-test @start-test="startTest" @stop-test="stopTest" :running="running"/>
-    <div v-if="failedToStart" class="alert alert-danger mt-2">Failed to start! See Logs!</div>
+    <Message v-if="failedToStart" severity="error" :closable="true">
+      Failed to start! See Logs!
+    </Message>
     <stress-test-status class="mt-2" :status="status" :running="running"/>
   </div>
 </template>