feat(pubsub): download messages

frontend/src/components/content_value/ContentPubsub.vue

@@ -15,9 +15,10 @@ import Checked from '@/components/icons/Checked.vue'
 import Bottom from '@/components/icons/Bottom.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
+import Save from '@/components/icons/Save.vue'
 
 const themeVars = useThemeVars()
-
+const datetimeFormat = 'YYYY-MM-DD HH:mm:ss.SSS';
 const browserStore = useBrowserStore()
 const i18n = useI18n()
 const props = defineProps({
@@ -44,6 +45,10 @@ const publishData = reactive({
 
 const tableRef = ref(null)
 
+const getFormattedDateTime = (timestamp) => {
+    return dayjs(timestamp).format(datetimeFormat);
+}
+
 const columns = computed(() => [
     {
         title: () => i18n.t('pubsub.time'),
@@ -52,7 +57,7 @@ const columns = computed(() => [
         align: 'center',
         titleAlign: 'center',
         render: ({ timestamp }, index) => {
-            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss.SSS')
+            return getFormattedDateTime(timestamp);
         },
     },
     {
@@ -181,6 +186,47 @@ const onCleanLog = () => {
     data.list = []
 }
 
+const onSave = async () => {
+    if (data.list.length == 0) {
+        $message.error("no messages");
+        return;
+    }
+
+    const headers = Object.keys(data.list[0]);
+
+    const csv = [
+      headers.join(','),
+      ...data.list.map(row =>
+            headers.map(header => `${String(header == 'timestamp' ? getFormattedDateTime(dayjs(row[header])) : row[header] ?? '')}`).join(',')
+      )
+    ].join('\n');
+
+    try
+    {
+        const handle = await window.showSaveFilePicker({
+            suggestedName: 'download.csv',
+            types: [
+            {
+                description: 'Csv file',
+                accept: {
+                'text/plain': ['.csv']
+                }
+            }
+            ]
+        });
+
+        const writable = await handle.createWritable();
+        await writable.write(csv);
+        await writable.close();    
+    }
+    catch (error) {
+        if (error.name === 'AbortError') {
+            return;
+        }
+        throw error;
+  }
+}
+
 const onPublish = async () => {
     if (isEmpty(publishData.channel)) {
         return
@@ -245,6 +291,13 @@ const onPublish = async () => {
                         stroke-width="3.5"
                         t-tooltip="monitor.always_show_last"
                         @click="data.autoShowLast = !data.autoShowLast" />
+                    <icon-button
+                        :icon="Save"
+                        :disabled=isSubscribing
+                        size="18"
+                        stroke-width="3.5"
+                        t-tooltip="pubsub.save"
+                        @click="onSave" />
                     <div class="flex-item-expand" />
                     <icon-button
                         :icon="Delete"

frontend/src/langs/en-us.json

@@ -480,6 +480,7 @@
     "subscribe": "Subscribe",
     "unsubscribe": "Unsubscribe",
     "clear": "Clear Messages",
+    "save": "Save Messages",
     "time": "Time",
     "filter": "Filter",
     "channel": "Channel",

frontend/src/langs/es-es.json

@@ -480,6 +480,7 @@
     "subscribe": "Suscribir",
     "unsubscribe": "Cancelar suscripción",
     "clear": "Limpiar mensajes",
+    "save": "Guardar mensajes",
     "time": "Tiempo",
     "filter": "Filtrar",
     "channel": "Canal",

frontend/src/langs/fr-fr.json

@@ -480,6 +480,7 @@
     "subscribe": "S'abonner",
     "unsubscribe": "Se désabonner",
     "clear": "Effacer les messages",
+    "save": "Enregistrer les messages",
     "time": "Heure",
     "filter": "Filtre",
     "channel": "Canal",

frontend/src/langs/ja-jp.json

@@ -480,6 +480,7 @@
     "subscribe": "サブスクライブ開始",
     "unsubscribe": "サブスクライブ解除",
     "clear": "メッセージをクリア",
+    "save": "メッセージを保存",
     "time": "時間",
     "filter": "フィルター",
     "channel": "チャンネル",

frontend/src/langs/ko-kr.json

@@ -480,6 +480,7 @@
     "subscribe": "구독",
     "unsubscribe": "구독 취소",
     "clear": "메시지 지우기",
+    "save": "메시지 저장",
     "time": "시간",
     "filter": "필터",
     "channel": "채널",

frontend/src/langs/pt-br.json

@@ -480,6 +480,7 @@
     "subscribe": "Inscrever",
     "unsubscribe": "Cancelar Inscrição",
     "clear": "Limpar Mensagens",
+    "save": "Guardar mensagens",
     "time": "Tempo",
     "filter": "Filtrar",
     "channel": "Canal",

frontend/src/langs/ru-ru.json

@@ -480,6 +480,7 @@
     "subscribe": "Подписаться",
     "unsubscribe": "Отписаться",
     "clear": "Очистить сообщения",
+    "save": "Сохранить сообщения",
     "time": "Время",
     "filter": "Фильтр",
     "channel": "Канал",

frontend/src/langs/tr-tr.json

@@ -480,6 +480,7 @@
     "subscribe": "Abone Ol",
     "unsubscribe": "Abonelikten Çık",
     "clear": "Mesajları Temizle",
+    "save": "Mesajları Kaydet",
     "time": "Zaman",
     "filter": "Filtre",
     "channel": "Kanal",

frontend/src/langs/zh-cn.json

@@ -480,6 +480,7 @@
     "subscribe": "开启订阅",
     "unsubscribe": "取消订阅",
     "clear": "清空消息",
+    "save": "保存消息",
     "time": "时间",
     "filter": "筛选",
     "channel": "频道",

frontend/src/langs/zh-tw.json

@@ -480,6 +480,7 @@
     "subscribe": "開啟訂閱",
     "unsubscribe": "取消訂閱",
     "clear": "清空訊息",
+    "save": "儲存訊息",
     "time": "時間",
     "filter": "篩選",
     "channel": "頻道",