feat(ui)!: add live session on active session recordings

This commit adds a live session functionality to the terminal session recording.
shellhub-io · Apr 19, 2024 · df7cde5 · df7cde5
1 parent 606156b
commit df7cde5
Show file tree

Hide file tree

Showing 6 changed files with 575 additions and 534 deletions.
diff --git a/ui/src/components/Sessions/SessionClose.vue b/ui/src/components/Sessions/SessionClose.vue
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+<script setup lang="ts">
+import { PropType, ref } from "vue";
 import {
   INotificationsError,
   INotificationsSuccess,
@@ -57,55 +57,46 @@ import { IDevice } from "../../interfaces/IDevice";
 import { useStore } from "../../store";
 import handleError from "../../utils/handleError";
 
-export default defineComponent({
-  props: {
-    uid: {
-      type: String,
-      required: true,
-    },
-    device: {
-      type: Object as PropType<IDevice>,
-      required: true,
-    },
-    notHasAuthorization: {
-      type: Boolean,
-      default: false,
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+const props = defineProps({
+  uid: {
+    type: String,
+    required: true,
   },
-  emits: ["update"],
-  setup(props, ctx) {
-    const showDialog = ref(false);
-    const store = useStore();
-
-    const closeSession = async () => {
-      try {
-        await store.dispatch("sessions/close", {
-          uid: props.uid,
-          device_uid: props.device.uid,
-        });
-        showDialog.value = false;
-        store.dispatch(
-          "snackbar/showSnackbarSuccessAction",
-          INotificationsSuccess.sessionClose,
-        );
-        ctx.emit("update");
-      } catch (error: unknown) {
-        store.dispatch(
-          "snackbar/showSnackbarErrorAction",
-          INotificationsError.sessionClose,
-        );
-        handleError(error);
-      }
-    };
-
-    return {
-      showDialog,
-      closeSession,
-    };
+  device: {
+    type: Object as PropType<IDevice>,
+    required: true,
+  },
+  notHasAuthorization: {
+    type: Boolean,
+    required: true,
+  },
+  style: {
+    type: [String, Object],
+    default: undefined,
   },
 });
+const emit = defineEmits(["update"]);
+const showDialog = ref(false);
+const store = useStore();
+
+const closeSession = async () => {
+  try {
+    await store.dispatch("sessions/close", {
+      uid: props.uid,
+      device_uid: props.device.uid,
+    });
+    showDialog.value = false;
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.sessionClose,
+    );
+    emit("update");
+  } catch (error: unknown) {
+    store.dispatch(
+      "snackbar/showSnackbarErrorAction",
+      INotificationsError.sessionClose,
+    );
+    handleError(error);
+  }
+};
 </script>
diff --git a/ui/src/components/Sessions/SessionDelete.vue b/ui/src/components/Sessions/SessionDelete.vue
@@ -2,7 +2,7 @@
   <div>
     <v-list-item
       @click="showDialog = true"
-      :disabled="notHasAuthorization"
+      :disabled="props.notHasAuthorization"
     >
       <div class="d-flex align-center">
         <div class="mr-2">
@@ -46,57 +46,49 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { PropType, ref } from "vue";
 import {
   INotificationsError,
   INotificationsSuccess,
 } from "../../interfaces/INotifications";
 import { useStore } from "../../store";
 import handleError from "../../utils/handleError";
 
-export default defineComponent({
-  props: {
-    uid: {
-      type: String,
-      required: true,
-    },
-    notHasAuthorization: {
-      type: Boolean,
-      default: false,
-    },
-    style: {
-      type: [String, Object],
-      default: undefined,
-    },
+const props = defineProps({
+  uid: {
+    type: String,
+    required: true,
   },
-  emits: ["update"],
-  setup(props, ctx) {
-    const showDialog = ref(false);
-    const store = useStore();
-
-    const deleteRecord = async () => {
-      try {
-        await store.dispatch("sessions/deleteSessionLogs", props.uid);
-        showDialog.value = false;
-        store.dispatch(
-          "snackbar/showSnackbarSuccessAction",
-          INotificationsSuccess.sessionRemoveRecord,
-        );
-        ctx.emit("update");
-      } catch (error: unknown) {
-        store.dispatch(
-          "snackbar/showSnackbarErrorAction",
-          INotificationsError.sessionRemoveRecord,
-        );
-        handleError(error);
-      }
-    };
-
-    return {
-      showDialog,
-      deleteRecord,
-    };
+  notHasAuthorization: {
+    type: Boolean,
+    required: true,
+  },
+  style: {
+    type: [String, Object] as PropType<string | object>,
+    default: undefined,
   },
 });
+
+const emit = defineEmits(["update"]);
+const showDialog = ref(false);
+const store = useStore();
+
+const deleteRecord = async () => {
+  try {
+    await store.dispatch("sessions/deleteSessionLogs", props.uid);
+    showDialog.value = false;
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.sessionRemoveRecord,
+    );
+    emit("update");
+  } catch (error: unknown) {
+    store.dispatch(
+      "snackbar/showSnackbarErrorAction",
+      INotificationsError.sessionRemoveRecord,
+    );
+    handleError(error);
+  }
+};
 </script>