Accurate response time and size (#1441)

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

pages/graphql.vue

@@ -266,7 +266,7 @@
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
-              <label for="responseField">{{ $t("response") }}</label>
+              <label for="responseField">{{ $t("response_body") }}</label>
               <div>
                 <button
                   class="icon"

pages/index.vue

@@ -590,28 +590,7 @@
           </tabs>
         </section>
 
-        <pw-section class="purple" id="response" :label="$t('response')" ref="response">
-          <ul>
-            <li>
-              <label for="status">{{ $t("status") }}</label>
-              <input
-                :class="[
-                  statusCategory ? statusCategory.className : '',
-                  response.status ? '' : 'rounded-b-lg',
-                ]"
-                :value="response.status || $t('waiting_send_req')"
-                ref="status"
-                id="status"
-                name="status"
-                readonly
-                type="text"
-              />
-            </li>
-          </ul>
-          <div v-if="response.body && response.body !== $t('loading')">
-            <response-body-renderer :response="response" />
-          </div>
-        </pw-section>
+        <http-response :response="response" :active="runningRequest" ref="response" />
       </div>
 
       <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
@@ -752,7 +731,6 @@ import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
 import { generateCodeWithGenerator } from "~/helpers/codegen/codegen"
-import findStatusGroup from "~/helpers/findStatusGroup"
 
 export default {
   data() {
@@ -771,6 +749,8 @@ export default {
         status: "",
         headers: "",
         body: "",
+        duration: 0,
+        size: 0,
       },
       validContentTypes: knownContentTypes,
       paramsWatchEnabled: true,
@@ -1174,9 +1154,6 @@ export default {
     requestName() {
       return this.name
     },
-    statusCategory() {
-      return findStatusGroup(this.response.status)
-    },
     isValidURL() {
       // if showPreRequestScript, we cannot determine if a URL is valid because the full string is not known ahead of time
       return this.showPreRequestScript || httpValid(this.url)
@@ -1365,9 +1342,12 @@ export default {
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
       this.$nuxt.$loading.start()
-      this.previewEnabled = false
-      this.response.status = this.$t("fetching")
-      this.response.body = this.$t("loading")
+      this.response = {
+        duration: 0,
+        size: 0,
+        status: this.$t("fetching"),
+        body: this.$t("loading"),
+      }
       const auth =
         this.auth === "Basic Auth"
           ? {
@@ -1421,8 +1401,6 @@ export default {
       })
       headers = headersObject
       try {
-        const startTime = Date.now()
-
         this.runningRequest = true
         const payload = await this.makeRequest(
           auth,
@@ -1431,11 +1409,9 @@ export default {
           this.showPreRequestScript && this.preRequestScript
         )
         this.runningRequest = false
-
-        const duration = Date.now() - startTime
-        this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done",
-        })
+        const duration = payload.config.timeData.endTime - payload.config.timeData.startTime
+        this.response.duration = duration
+        this.response.size = payload.headers["content-length"]
         ;(() => {
           this.response.status = payload.status
           this.response.headers = payload.headers