Merge pull request #3 from catscarlet/dev

 Prepare v0.2.0

README.md

@@ -8,6 +8,12 @@ This tool is dedicated to analyze apache.log in local browser. It won't send log
 
 This project is still WIP.
 
+## Screenshot
+
+![Web-Log-Analyzer-IceFairy snap-chart](snap-chart.png "Web-Log-Analyzer-IceFairy snap-chart")
+
+![Web-Log-Analyzer-IceFairy snap-table](snap-table.png "Web-Log-Analyzer-IceFairy snap-table")
+
 ## Demo
 
 [Demo on Cloudflare](https://server2.catscarlet.com/demo/Web-Log-Analyzer-IceFairy/)
@@ -33,10 +39,11 @@ yarn.lock, so:
 
 ## Known-Issues
 
-- The analyed data is saved in locatstorage. When the size of data is over than 5M (about 300,000 lines), **Chrome may crash straightly without any information**. Firefox will stop the script and throw `Persistent storage maximum size reached` , It can be avoid by setting `about:config` - `dom.storage.default_quota` to expand the limit.
+- The analyed data is saved in locatstorage. When the size of data is over than 5M (about 300,000 lines), **Chrome may crash straightly without any information**. Firefox will stop the script and throw `Persistent storage maximum size reached` , It can be avoid by setting `about:config` - `dom.storage.default_quota` on Firefox to expand the limit.
 - No progress info when analyzing. Using setTimeout will cause terrible IDLE time, that would waste about at least 60 times of time.
 - Analyze Status can't show Analyzing. No idea why `vue.$nextTick()` refused to work.
 - Change `Number per Page` will cause page refreshing. vue-router don't support safe reload or instant reload.
+- If already in route `/ChartDataTraffic` and try to analyze a new file, the page would refresh. Same reason as above.
 - VUE and Element UI will cause any kinds of unknown bugs. The code is working today, but tomorrow, it may be unavaliable to build with no reason.
 
 ## Why named IceFairy

README_zh-cmn-Hans.md

@@ -8,6 +8,12 @@
 
 目前功能仍在开发中。很多功能都没有实现。
 
+# 截图
+
+![Web-Log-Analyzer-IceFairy snap-chart](snap-chart.png "Web-Log-Analyzer-IceFairy snap-chart")
+
+![Web-Log-Analyzer-IceFairy snap-table](snap-table.png "Web-Log-Analyzer-IceFairy snap-table")
+
 ## Demo
 
 [Demo on Cloudflare](https://server2.catscarlet.com/demo/Web-Log-Analyzer-IceFairy/)
@@ -37,6 +43,7 @@ If you need a log-file as test simple, here is a log-file from my bike404-site:
 - 没有分析进度，因为调用 setTimeout 会产生严重的浏览器 IDLE 时间，导致效率大幅下降（至少60倍）。
 - Analyze Status 没有 Analyzing，不知为何 `vue.$nextTick()` 没有效果。
 - 修改 `Number per Page` 会导致整页刷新，因为 vue-router 没有提供也不能实现当前路由重建重载。
+- 如果在 `/ChartDataTraffic` 页面下尝试分析新的日志文件，页面将会刷新。与上一条相同的原因。
 - VUE 以及 Element UI 的各种 BUGS 可能会导致今天还能用，过一夜之后再编译就满页疮痍。
 
 ## Why named IceFairy

core.js

@@ -12,7 +12,7 @@ function fileHandler(event) {
 
     /*
     if (false) {
-        info.innerHTML = '没有选择文件';
+        info.innerHTML = 'No file selected';
         return;
     }
     */
@@ -354,7 +354,7 @@ function dateobj2YYYYMM(d) {
         yyyymm = yyyymm + '0';
     }
 
-    yyyymm = yyyymm + d.getMonth();
+    yyyymm = yyyymm + (d.getMonth() + 1);
 
     if (d.getDate() < 10) {
         yyyymm = yyyymm + '0';

vue-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "Web-Log-Analyzer-IceFairy",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "A Vue.js project",
     "author": "Catscarlet <i@catscarlet.com>",
     "private": true,

vue-app/src/App.vue

@@ -58,6 +58,10 @@
                         <el-alert title="Storaged Analyzed Data Loaded" type="success" show-icon :closable="false"></el-alert>
                     </div>
 
+                    <div v-else-if="analyzed_status == -1">
+                        <el-alert title="Failed. See details in DevTools Console." type="error" show-icon :closable="false"></el-alert>
+                    </div>
+
                     <div v-else>
                         <el-alert title="Status Failure" type="error" show-icon :closable="false"></el-alert>
                     </div>
@@ -158,7 +162,7 @@ import { WebLogAnalyzer } from  './common/core.js';
 export default {
     data() {
         return {
-            analyzed_status: 0, //0: no data; 1: ready_to_analyze; 2: analyzing; 3: analyzed; 4: has_data
+            analyzed_status: 0, //0: no data; 1: ready_to_analyze; 2: analyzing; 3: analyzed; 4: has_data; -1: failed_to_analyzing
             disable_menu: true,
             disable_clean_button: true,
             //reader: new FileReader(),
@@ -196,21 +200,6 @@ export default {
             let file = e.target.files[0];
             let reader = new FileReader();
 
-            /*
-            reader.onload = e => {
-                this.$emit('load', e.target.result);
-
-                let file = e.target.files[0];
-                let reader = this.reader;
-                let filecontent = reader.result.split('\n');
-                let fileinfo = '文件: ' + file.name + '<br>' +
-                                '大小: ' + file.size + '<br>' +
-                                '修改: ' + file.lastModifiedDate + '<br>' +
-                                '行数: ' + filecontent.length;
-                console.log(fileinfo);
-            };
-            */
-
             reader.onload = e => {
                 //console.log(this);
                 //this.$emit('load', e.target.result);
@@ -272,12 +261,20 @@ export default {
             let analyzed_data_str = JSON.stringify(analyzed_data);
             console.log('going to save analyzed_data_str');
             console.log(analyzed_data_str);
-            window.localStorage.setItem('AnalyzedData', analyzed_data_str);
-            console.log('analyzed_data_str has been saved into:window.localStorage AnalyzedData');
-            this.analyzed_status = 3;
-            this.$router.push({
-                path: '/ChartDataTraffic',
-            });
+
+            if (this.saveToLocalStorage(analyzed_data_str)) {
+                console.log('analyzed_data_str has been saved into:window.localStorage AnalyzedData');
+                this.analyzed_status = 3;
+
+                if (this.$router.currentRoute.path != '/ChartDataTraffic') {
+                    this.$router.push({path: '/ChartDataTraffic'});
+                } else {
+                    this.$router.go(0);
+                }
+
+            } else {
+                this.analyzed_status = -1;
+            }
         },
         checkAnalyzedData() {
             if (!window.localStorage.getItem('AnalyzedData')) {
@@ -291,7 +288,7 @@ export default {
             console.log(analyzed_data);
         },
         cleanAnalyzedData() {
-            if (this.analyzed_status != 0) {
+            if (this.analyzed_status >= 3) {
                 window.localStorage.removeItem('AnalyzedData');
                 /*
                 this.reader_result = '';
@@ -303,16 +300,24 @@ export default {
                 window.location.reload();
             }
         },
-        saveToLocalStorage() {
-            let analyzed_data = this.returnAnalyzedData();
-            let analyzed_data_str = JSON.stringify(analyzed_data);
-            window.localStorage.setItem('AnalyzedData', analyzed_data_str);
-            //console.log('analyzed_data_str has been saved into:window.localStorage AnalyzedData');
+
+        saveToLocalStorage(analyzed_data_str) {
+            console.log('analyzed_data_str.length: ' + analyzed_data_str.length);
+            try {
+                window.localStorage.setItem('AnalyzedData', analyzed_data_str);
+            } catch (e) {
+                console.log(e);
+                return false;
+            }
+
+            return true;
         },
+        /*
         returnAnalyzedData() {
             let analyzed_data = {};
             return analyzed_data;
         },
+        */
 
     },
     watch: {
@@ -339,7 +344,8 @@ export default {
 
 <style>
 .app1 {
-    background-color: #FAFFFF
+    background-color: #FAFFFF;
+    font-family: Consolas, Roboto, Arial, sans-serif;
 }
 
 .downside {
@@ -375,6 +381,7 @@ export default {
     background: #eee;
     max-width: calc(100vw - 233px);
     height: calc(100vh - 88px);
+    padding-top: 2px;
 }
 
 .file-inputer {

vue-app/src/Root.vue

@@ -3,3 +3,6 @@
 <router-view></router-view>
 </div>
 </template>
+
+<style>
+</style>

vue-app/src/common/core.js

@@ -73,11 +73,6 @@ export const WebLogAnalyzer = (reader_result) =>  {
         chart_data_time[index] = 0;
     }
 
-    console.log(first_day);
-    console.log(last_day);
-    console.log(chart_data_traffic);
-    console.log(chart_data_time);
-
     let status_times = {};
     let status_traffic = {};
 
@@ -133,8 +128,8 @@ export const WebLogAnalyzer = (reader_result) =>  {
         'top_withparam_page_traffic_array': top_withparam_page_traffic_array,
     };
 
+    console.log('analyzed_data:');
     console.log(analyzed_data);
-
     console.log('Finish');
 
     return analyzed_data;
@@ -263,7 +258,7 @@ export const WebLogAnalyzer = (reader_result) =>  {
             yyyymm = yyyymm + '0';
         }
 
-        yyyymm = yyyymm + d.getMonth();
+        yyyymm = yyyymm + (d.getMonth() + 1);
 
         if (d.getDate() < 10) {
             yyyymm = yyyymm + '0';

vue-app/src/common/index.js

@@ -16,3 +16,11 @@ export const loadNumberPerPage = () =>  {
 
     return window.localStorage.getItem('num_per_page');
 };
+
+export const excludeByIdFilter = (item, exclude) =>  {
+    if (item.id.search(exclude) == -1) {
+        return true;
+    } else {
+        return false;
+    }
+};

vue-app/src/components/ChartDataTimes.vue

@@ -85,9 +85,6 @@ export default {
 
     },
     watch: {
-        page: function(val, oldVal) {
-            this.showChart();
-        },
     },
 };
 </script>

vue-app/src/components/ChartDataTraffic.vue

@@ -84,9 +84,6 @@ export default {
 
     },
     watch: {
-        page: function(val, oldVal) {
-            this.showChart();
-        },
     },
 };
 </script>