Accurate response time and size (#1441)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/http-response-meta.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between">
+      <label>{{ $t("response") }}</label>
+      <label v-if="active"><i class="animate-spin material-icons">refresh</i></label>
+      <label v-else :class="statusCategory ? statusCategory.className : ''">
+        <i class="material-icons">fiber_manual_record</i>
+      </label>
+    </div>
+    <div class="flex flex-col lg:flex-row">
+      <label class="flex-1">
+        {{ $t("status") + `: \xA0 ` }}
+        <span :class="statusCategory ? statusCategory.className : ''">
+          {{ response.status || $t("waiting_send_req") }}
+        </span>
+      </label>
+      <label>
+        {{ $t("duration") + `: \xA0 ${response.duration} ms` }}
+      </label>
+      <label>
+        {{ $t("size") + `: \xA0 ${response.size} B` }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import findStatusGroup from "~/helpers/findStatusGroup"
+
+export default {
+  props: {
+    response: {
+      type: Object,
+      default: {},
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    statusCategory() {
+      return findStatusGroup(this.response.status)
+    },
+  },
+}
+</script>

components/http/http-response.vue

@@ -0,0 +1,23 @@
+<template>
+  <pw-section class="purple" id="response" :label="$t('response')" ref="response" no-legend>
+    <http-response-meta :response="response" :active="active" />
+    <div v-if="response.body && response.body !== $t('loading')">
+      <response-body-renderer :response="response" />
+    </div>
+  </pw-section>
+</template>
+
+<script>
+export default {
+  props: {
+    response: {
+      type: Object,
+      default: {},
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row-wrapper">
-      <label for="body">{{ $t("response") }}</label>
+      <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
           class="icon"

components/lenses/renderers/ImageLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row-wrapper">
-      <label for="body">{{ $t("response") }}</label>
+      <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
           class="icon"

components/lenses/renderers/JSONLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row-wrapper">
-      <label for="body">{{ $t("response") }}</label>
+      <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
           class="icon"

components/lenses/renderers/RawLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row-wrapper">
-      <label for="body">{{ $t("response") }}</label>
+      <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
           class="icon"

components/lenses/renderers/XMLLensRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row-wrapper">
-      <label for="body">{{ $t("response") }}</label>
+      <label for="body">{{ $t("response_body") }}</label>
       <div>
         <button
           class="icon"

components/ui/tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tabs-wrapper">
-    <div class="tabs">
-      <ul :class="styles">
+    <div class="tabs" :class="styles">
+      <ul>
         <li
           v-for="(tab, index) in tabs"
           :class="{ 'is-active': tab.isActive }"