feat(scan): show last report link, fix titles

components/ReportHistory.vue

@@ -9,8 +9,8 @@
     <el-select size="mini" class="report-history__select" filterable placeholder="Report URL" v-model="itemsJsonUrl">
       <el-option class="report-history__option"
         v-for="option in options" :key="option.url"
-        :value="option.url" :label="shortReportUrl(option.url)">
-        <a @click.prevent="" class="report-history__value-name" :href="getShareUrl(option.url)">{{ shortReportUrl(option.url) }}</a>
+        :value="option.url" :label="$store.getters.shortReportUrl(option.url)">
+        <a @click.prevent="" class="report-history__value-name" :href="getShareUrl(option.url)">{{ $store.getters.shortReportUrl(option.url) }}</a>
         <span class="report-history__value-date">{{ new Date(option.added).toLocaleString() }}</span>
       </el-option>
     </el-select>
@@ -158,16 +158,6 @@ export default {
     getShareUrl(url) {
       return this.$router.options.base + `?url=${url}`;
     },
-
-    shortReportUrl(url) {
-      const userDir = (this.$store.state.user?.uid || '').slice(0, 5);
-      return url.
-        replace('https://site-audit.viasite.ru/reports/', '').
-        replace(this.$store.state.serverUrl + '/reports/', '').
-        replace(userDir + '/', '').
-        replace(/__/g, ' ').
-        replace(/\.json$/, '');
-    }
   },
 };
 </script>

pages/index.vue

@@ -426,14 +426,18 @@ export default {
 
     pageTitle() {
       let title = [];
+
+      const reportName = this.$store.getters.shortReportUrl(this.itemsJsonUrl);
+      title.push(reportName);
+
       if (this.q) title.push("q: " + this.q);
 
-      if (this.fields.length > 0 && !this.isDefaultFields(this.columns)) {
+      /* if (this.fields.length > 0 && !this.isDefaultFields(this.columns)) {
         title.push("Fields: " + this.columns);
-      }
+      } */
 
       title.push('Results - site-audit-seo');
-      return title.join(", ");
+      return title.join(" - ");
     },
 
     isNewUser() {
@@ -464,6 +468,7 @@ export default {
   },
 
   methods: {
+
     formatExcelCols(json) {
       let widthArr = Object.keys(json[0]).map(key => {
         return { width: key.length + 2 }; // plus 2 to account for short object keys

pages/scan.vue

@@ -80,6 +80,13 @@
 
     </el-form>
 
+    <NuxtLink :to="'/?url='+itemsJsonUrl" v-if="itemsJsonUrl" 
+      class="scan__report-link el-button el-button--secondary"
+    >
+      Report: {{ $store.getters.shortReportUrl(itemsJsonUrl) }}
+    </NuxtLink>
+    <span class="scan__report-updated" v-if="lastUpdatedHuman">{{ lastUpdatedHuman }} ago</span>
+
     <ul class="scan__log"
       v-chat-scroll="{always: false, smooth: false}"
       v-if="log.length > 0"
@@ -145,6 +152,15 @@
     font-weight: normal;
   }
 
+  .scan__report-link {
+    margin: 15px 0;
+  }
+
+  .scan__report-updated {
+    margin-left: 15px;
+    color: #999;
+  }
+
   .scan__log {
     font-family: monospace;
     background: #2d2d2d;
@@ -190,6 +206,7 @@
 import Panel from "~/components/Panel";
 import firebase from "firebase";
 import _ from "lodash";
+const url = require('url');
 
 const controlsMap = {
   preset: {
@@ -235,6 +252,8 @@ export default {
       isUrls: false,
       urlsShow: false,
       connected: false,
+      lastUpdated: '',
+      lastUpdatedHuman: '',
       form: {},
     };
   },
@@ -252,6 +271,10 @@ export default {
       return this.$store.state.scanUrlHistory;
     },
 
+    itemsJsonUrl(){
+      return this.$store.state.itemsJsonUrl;
+    },
+
     url: {
       get() {
         return this.$store.state.url;
@@ -291,7 +314,10 @@ export default {
     },
 
     pageTitle() {
-      return `Scan url: ${this.url}, args: ${this.args} - site-audit-seo`;
+      const domain = url.parse((this.url)).hostname;
+      return `Audit ${domain}`
+        + (this.argsWithoutDefault ? ` - args: ${this.argsWithoutDefault}` : '')
+        + ` - site-audit-seo`;
     },
 
     isInlineForm() {
@@ -319,7 +345,7 @@ export default {
       if (hours || days) parts.push(`${hours}h`);
       parts.push(`${mins}m`);
       return parts.join(' ');
-    },
+    }
   },
 
   watch: {
@@ -513,6 +539,9 @@ export default {
 
       // server queue info
       this.socket.on("serverState" + key, (serverState, cb) => {
+        // update last report date
+        this.lastUpdatedHuman = this.getLastUpdatedHuman();
+
         // console.log('msg: ', msg);
         for (let name in serverState) {
           if (this[name] !== undefined) this[name] = serverState[name];
@@ -527,6 +556,7 @@ export default {
           const url = viewerUrl + '?url=' + data.json;
           this.logPush(`result: <a href="${url}">${url}</a>`);
           this.$store.commit('itemsJsonUrl', data.json);
+          this.lastUpdated = Date.now();
         }
         if (data.name) {
           let baseUrl = `${this.serverUrl}/reports`;
@@ -538,6 +568,7 @@ export default {
           const url = `${viewerUrl}?url=${jsonUrl}`;
           this.logPush(`result: <a href="${url}">${url}</a>`);
           this.$store.commit('itemsJsonUrl', jsonUrl);
+          this.lastUpdated = Date.now();
         }
       });
     },
@@ -566,6 +597,22 @@ export default {
       });
       cb(res);
     },
+
+    getLastUpdatedHuman() {
+      if (!this.lastUpdated) return '';
+      const delta = (Date.now() - this.lastUpdated) / 1000;
+      let mins = Math.floor(delta / 60); // s to min
+      let hours = Math.floor(mins / 60);
+      const days = Math.floor(mins / 1440);
+      mins = mins % 60;
+      hours = hours % 24;
+
+      const parts = [];
+      if (days) parts.push(`${days}d`);
+      if (hours || days) parts.push(`${hours}h`);
+      parts.push(`${mins}m`);
+      return parts.join(' ');
+    }
   },
 
   async mounted() {

store/index.js

@@ -216,6 +216,18 @@ export const getters = {
     };
   },
 
+  shortReportUrl(state) {
+    return url => {
+      const userDir = (state.user?.uid || '').slice(0, 5);
+      return url.
+        replace('https://site-audit.viasite.ru/reports/', '').
+        replace(state.serverUrl + '/reports/', '').
+        replace(userDir + '/', '').
+        replace(/__/g, ' ').
+        replace(/\.json$/, '');
+    }
+  },
+
   getItemByDefaultField(state) {
     return val => {
       return state.filteredItems.find(item => item[state.defaultField] == val);