Merge pull request #54 from buggregator/issue/#43-rest-fallback-on-ws-fail

Issue/#43 rest fallback on ws connection fail

Author: butschster

components/HttpDumpPage/HttpDumpPage.vue

@@ -64,7 +64,7 @@
         <h1>Attachments ({{ event.payload.request.files.length }})</h1>
 
         <div class="http-dump-page__attachments">
-          <Attachment
+          <SmtpAttachment
             v-for="a in event.payload.request.files"
             :key="a.id"
             :event="event"
@@ -88,13 +88,13 @@ import { defineComponent, PropType } from "vue";
 import { NormalizedEvent } from "~/config/types";
 import EventTable from "~/components/EventTable/EventTable.vue";
 import EventTableRow from "~/components/EventTableRow/EventTableRow.vue";
-import Attachment from "~/components/Attachment/Attachment.vue";
+import SmtpAttachment from "~/components/SmtpAttachment/SmtpAttachment.vue";
 
 export default defineComponent({
   components: {
     EventTable,
     EventTableRow,
-    Attachment,
+    SmtpAttachment,
   },
   props: {
     event: {

components/LayoutSidebar/LayoutSidebar.vue

@@ -39,6 +39,12 @@
     </nav>
 
     <div class="layout-sidebar__versions">
+      <IconSvg
+        class="layout-sidebar__connection-icon"
+        :name="connectionStatus"
+        :title="connectionText"
+      />
+
       <div
         v-if="apiVersion"
         class="layout-sidebar__nav-version"
@@ -61,15 +67,12 @@
 <script lang="ts">
 import IconSvg from "~/components/IconSvg/IconSvg.vue";
 import { defineComponent } from "vue";
-import { useNuxtApp } from "#app";
+import { useConnectionStore } from "~/stores/connections";
+import { storeToRefs } from "pinia";
 
 export default defineComponent({
   components: { IconSvg },
   props: {
-    isConnected: {
-      type: Boolean,
-      required: true,
-    },
     apiVersion: {
       type: String,
       default: "@dev",
@@ -79,6 +82,17 @@ export default defineComponent({
       default: "@dev",
     },
   },
+  computed: {
+    connectionStatus() {
+      const connectionStore = useConnectionStore();
+      const { isConnectedWS } = storeToRefs(connectionStore);
+
+      return isConnectedWS.value ? "connected" : "disconnected";
+    },
+    connectionText() {
+      return `WS connection is ${this.connectionStatus}`;
+    },
+  },
 });
 </script>
 
@@ -88,7 +102,7 @@ export default defineComponent({
 }
 
 .layout-sidebar__nav {
-  @apply divide-gray-300 dark:divide-gray-600 flex-col flex overflow-auto divide-y divide-gray-300 dark:divide-gray-600 border-b border-gray-300 dark:border-gray-600;
+  @apply flex-col flex overflow-auto divide-y divide-gray-300 dark:divide-gray-600 border-b border-gray-300 dark:border-gray-600;
 }
 
 .layout-sidebar__link {
@@ -103,6 +117,10 @@ export default defineComponent({
   @apply fill-current;
 }
 
+.layout-sidebar__connection-icon {
+  @apply fill-current w-10 h-10 m-auto;
+}
+
 .layout-sidebar__versions {
   @apply flex justify-center text-xs dark:text-gray-600 text-gray-400 py-2 px-1 left-0 right-0 flex-col mt-auto whitespace-nowrap text-center border-t border-gray-300 dark:border-gray-600;
 

components/PreviewCard/PreviewCard.vue

@@ -48,7 +48,7 @@ import PreviewCardHeader from "~/components/PreviewCardHeader/PreviewCardHeader.
 import { NormalizedEvent } from "~/config/types";
 import moment from "moment";
 import { useNuxtApp } from "#app";
-import { REST_API_URL } from "~/utils/events-transport";
+import { REST_API_URL } from "~/utils/io";
 
 export default defineComponent({
   components: {

components/RayDumpPreview/RayTypesPreview/LockPayload.vue

@@ -1,33 +1,42 @@
 <template>
   <div class="ray-type-lock">
-    <button :disabled="disabled" @click="continueExecution"
-            class="btn btn--continue active:bg-grey-300">
-            <span class="w-3 h-3 block">
-                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20">
-                    <path fill="green" fill-rule="evenodd"
-                          d="M16.75 10.83L4.55 19A1 1 0 0 1 3 18.13V1.87A1 1 0 0 1 4.55 1l12.2 8.13a1 1 0 0 1 0 1.7z"/>
-                </svg>
-            </span>
+    <button
+      :disabled="disabled"
+      class="btn btn--continue active:bg-grey-300"
+      @click="continueExecution"
+    >
+      <span class="w-3 h-3 block">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fill="green"
+            fill-rule="evenodd"
+            d="M16.75 10.83L4.55 19A1 1 0 0 1 3 18.13V1.87A1 1 0 0 1 4.55 1l12.2 8.13a1 1 0 0 1 0 1.7z"
+          />
+        </svg>
+      </span>
 
       <span>Continue</span>
     </button>
-    <button :disabled="disabled" @click="stopExecution"
-            class="btn btn--stop active:bg-grey-300">
+    <button
+      :disabled="disabled"
+      class="btn btn--stop active:bg-grey-300"
+      @click="stopExecution"
+    >
       <span class="w-3 h-3 bg-red-700 block"></span>
       <span>Stop execution</span>
     </button>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
-import {apiTransport} from '~/utils/events-transport'
-
-const {
-  rayStopExecution,
-  rayContinueExecution
-} = apiTransport({onEventReceiveCb: () => {}})
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
+import { useNuxtApp } from "#app";
 
 export default defineComponent({
   props: {
@@ -36,26 +45,41 @@ export default defineComponent({
       required: true,
     },
   },
+  setup() {
+    if (process.client) {
+      const { $rayExecution } = useNuxtApp();
+
+      return {
+        rayContinueExecution: $rayExecution.continue,
+        rayStopExecution: $rayExecution.stop,
+      };
+    }
+
+    return {
+      rayContinueExecution: () => undefined,
+      rayStopExecution: () => undefined,
+    };
+  },
   data() {
     return {
       disabled: false,
-    }
+    };
+  },
+  computed: {
+    hash() {
+      return this.payload.content.name;
+    },
   },
   methods: {
     continueExecution() {
-      this.disabled = true
-      rayContinueExecution(this.hash)
+      this.disabled = true;
+      this.rayContinueExecution(this.hash);
     },
     stopExecution() {
-      this.disabled = true
-      rayStopExecution(this.hash)
-    }
+      this.disabled = true;
+      this.rayStopExecution(this.hash);
+    },
   },
-  computed: {
-    hash() {
-      return this.payload.content.name
-    }
-  }
 });
 </script>
 

components/Attachment/Attachment.stories.ts renamed to components/SmtpAttachment/SmtpAttachment.stories.ts

@@ -1,20 +1,20 @@
 import {Meta, Story} from "@storybook/vue3";
-import Attachment from '~/components/Attachment/Attachment.vue';
+import SmtpAttachment from '~/components/SmtpAttachment/SmtpAttachment.vue';
 
 export default {
   title: "Components/Attachment",
-  component: Attachment
-} as Meta<typeof Attachment>;
+  component: SmtpAttachment
+} as Meta<typeof SmtpAttachment>;
 
 const Template: Story = (args) => ({
-  components: {Attachment},
+  components: {SmtpAttachment},
   setup() {
     return {
       args,
     };
   },
   template: `
-    <Attachment v-bind="args"/>`,
+    <SmtpAttachment v-bind="args"/>`,
 });
 
 export const Default = Template.bind({});
@@ -27,5 +27,5 @@ Default.args = {
     size: 234234,
     mime: "text/plain",
     uri: 'example.com/attachment.txt',
-  }
+  },
 };

components/Attachment/Attachment.vue renamed to components/SmtpAttachment/SmtpAttachment.vue

@@ -22,8 +22,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { NormalizedEvent, Attachment } from "~/config/types";
-import { REST_API_URL } from "~/utils/events-transport";
+import { NormalizedEvent, SmtpAttachment } from "~/config/types";
+import { REST_API_URL } from "~/utils/io";
 import { humanFileSize } from "~/utils/formats";
 
 export default defineComponent({
@@ -33,7 +33,7 @@ export default defineComponent({
       required: true,
     },
     attachment: {
-      type: Object as PropType<Attachment>,
+      type: Object as PropType<SmtpAttachment>,
       required: true,
     },
   },
@@ -42,7 +42,7 @@ export default defineComponent({
       return `${REST_API_URL}/api/smtp/${this.event.id}/attachment/${this.attachment.id}`;
     },
     size(): string {
-      return humanFileSize(this.attachment.size);
+      return humanFileSize(this.attachment.size || 0);
     },
   },
 });
@@ -60,7 +60,7 @@ export default defineComponent({
 }
 
 .attachment--meta {
-  @apple flex flex-col justify-start;
+  @apply flex flex-col justify-start;
 }
 
 .attachment--name {

components/SmtpPage/SmtpPage.vue

@@ -83,7 +83,7 @@
               </h3>
 
               <div class="flex gap-x-3">
-                <Attachment
+                <SmtpAttachment
                   v-for="a in attachments"
                   :key="a.id"
                   :event="event"
@@ -108,7 +108,7 @@ import SmtpPagePreview from "~/components/SmtpPagePreview/SmtpPagePreview.vue";
 import SmtpPageAddresses from "~/components/SmtpPageAddresses/SmtpPageAddresses.vue";
 import EventTable from "~/components/EventTable/EventTable.vue";
 import EventTableRow from "~/components/EventTableRow/EventTableRow.vue";
-import Attachment from "~/components/Attachment/Attachment.vue";
+import SmtpAttachment from "~/components/SmtpAttachment/SmtpAttachment.vue";
 
 export default defineComponent({
   components: {
@@ -119,7 +119,7 @@ export default defineComponent({
     CodeSnippet,
     Tabs,
     Tab,
-    Attachment,
+    SmtpAttachment,
   },
   props: {
     event: {

config/types.ts

@@ -251,9 +251,11 @@ export interface RayDump {
 
 
 export interface SmtpAttachment {
-  "name": string,
-  "id": string,
-  "uri": string
+  name: string,
+  id: string,
+  uri: string,
+  size?: number,
+  mime?: string,
 }
 
 export interface HttpDumpFile {

layouts/default.vue

@@ -2,7 +2,6 @@
   <div class="main-layout">
     <LayoutSidebar
       class="main-layout__sidebar"
-      :is-connected="isConnected"
       :api-version="apiVersion"
       :client-version="clientVersion"
     />
@@ -16,7 +15,7 @@
 <script lang="ts">
 import LayoutSidebar from "~/components/LayoutSidebar/LayoutSidebar.vue";
 import { defineComponent } from "vue";
-import { THEME_MODES, useSettingsStore } from "~/stores/settings";
+import { useSettingsStore } from "~/stores/settings";
 import { storeToRefs } from "pinia";
 import { useNuxtApp } from "#app";
 
@@ -59,12 +58,6 @@ export default defineComponent({
       apiVersion: "@dev",
     };
   },
-  computed: {
-    isConnected() {
-      // return this.$store.getters['ws/connected']
-      return false;
-    },
-  },
 });
 </script>
 

pages/http-dumps/[id].vue

@@ -40,20 +40,17 @@ export default defineComponent({
 
     if (process.client) {
       const { $events } = useNuxtApp();
-      const { data: event, pending } = await useFetch(
-        $events.buildItemFetchUrl(eventId),
-        {
-          onResponse({ response }) {
-            return response.data;
-          },
-          onResponseError() {
-            router.push("/404");
-          },
-          onRequestError() {
-            router.push("/404");
-          },
-        }
-      );
+      const { data: event, pending } = await useFetch($events.getUrl(eventId), {
+        onResponse({ response }) {
+          return response.data;
+        },
+        onResponseError() {
+          router.push("/404");
+        },
+        onRequestError() {
+          router.push("/404");
+        },
+      });
 
       return {
         serverEvent: event,