Change the app display name to service (#366)

Author: Jtrust

src/assets/lang/en.ts

@@ -27,10 +27,8 @@ const m = {
   currentService: 'Current Service',
   currentEndpoint: 'Current Endpoint',
   currentInstance: 'Current Instance',
-  currentApp: 'Current App',
   currentVersion: 'Current Version',
   currentPage: 'Current Page',
-  app: 'App',
   version: 'Version',
   page: 'Page',
   currentDatabase: 'Current Database',

src/assets/lang/zh.ts

@@ -27,10 +27,8 @@ const m = {
   currentService: '当前服务',
   currentEndpoint: '当前端点',
   currentInstance: '当前实例',
-  currentApp: '当前应用',
   currentVersion: '当前版本',
   currentPage: '当前页面',
-  app: '应用',
   version: '版本',
   page: '页面',
   currentDatabase: '当前数据库',

src/components/rk-header.vue

@@ -43,18 +43,18 @@ limitations under the License. -->
         </svg>
         <span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span>
       </router-link>
-      <router-link class="nav-link mr-20" to="/alarm">
-        <svg class="icon sm vm">
-          <use xlink:href="#spam"></use>
-        </svg>
-        <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
-      </router-link>
       <router-link class="nav-link mr-20" to="/log">
         <svg class="icon sm vm">
           <use xlink:href="#assignment"></use>
         </svg>
         <span class="vm hide-xs ml-5">{{ this.$t('log') }}</span>
       </router-link>
+      <router-link class="nav-link mr-20" to="/alarm">
+        <svg class="icon sm vm">
+          <use xlink:href="#spam"></use>
+        </svg>
+        <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
+      </router-link>
     </div>
     <div class="flex-h">
       <a class="rk-btn mr-5 sm" :class="auto ? 'blue' : 'ghost'" @click="handleAuto">

src/store/modules/dashboard/dashboard-option.ts

@@ -19,6 +19,7 @@ import { Commit, ActionTree, MutationTree, Dispatch } from 'vuex';
 import * as types from './mutation-types';
 import { AxiosResponse } from 'axios';
 import graph from '@/graph';
+import router from '../../../router';
 
 export interface State {
   services: any[];
@@ -44,12 +45,17 @@ const initState: State = {
   updateDashboard: {},
 };
 
+const concatOption = (data: any) => {
+  const isLog: boolean = router.app.$route.fullPath === '/log';
+  return isLog ? [{ label: 'All', key: '' }].concat(data) : data;
+};
 // getters
 const getters = {};
 
 // mutations
 const mutations: MutationTree<State> = {
   [types.SET_SERVICES](state: State, data: any) {
+    data = concatOption(data);
     state.services = data;
     state.currentService = data[0] || {};
   },
@@ -63,6 +69,7 @@ const mutations: MutationTree<State> = {
   },
 
   [types.SET_ENDPOINTS](state: State, data: any) {
+    data = concatOption(data);
     state.endpoints = data;
     if (!data.length) {
       state.currentEndpoint = {};
@@ -77,6 +84,7 @@ const mutations: MutationTree<State> = {
     state.updateDashboard = endpoint;
   },
   [types.SET_INSTANCES](state: State, data: any) {
+    data = concatOption(data);
     state.instances = data;
     if (!data.length) {
       state.currentInstance = {};
@@ -185,6 +193,11 @@ const actions: ActionTree<State, any> = {
     context.dispatch('GET_SERVICE_ENDPOINTS', {});
     context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration });
   },
+  SELECT_LOG_SERVICE(context: { commit: Commit; dispatch: Dispatch }, params: any) {
+    context.commit('SET_CURRENT_SERVICE', params.service);
+    context.dispatch('GET_SERVICE_ENDPOINTS', {});
+    context.dispatch('GET_SERVICE_INSTANCES', { duration: params.duration });
+  },
   SELECT_ENDPOINT(context: { commit: Commit; dispatch: Dispatch; state: any; rootState: any }, params: any) {
     context.commit('SET_CURRENT_ENDPOINT', params.endpoint);
   },

src/store/modules/log/index.ts

@@ -20,23 +20,14 @@ import * as types from '@/store/mutation-types';
 import { AxiosResponse } from 'axios';
 import graph from '@/graph';
 
-enum ErrorCategory {
-  ALL,
-  AJAX,
-  RESOURCE,
-  VUE,
-  PROMISE,
-  JS,
-  UNKNOWN,
-}
-
-const categories = [];
-for (const key in ErrorCategory) {
-  const keyToAny: any = key;
-  if (isNaN(keyToAny)) {
-    categories.push({ label: keyToAny, key: keyToAny });
-  }
-}
+const categories: any = [
+  { label: 'All', key: 'ALL' },
+  { label: 'Ajax', key: 'AJAX' },
+  { label: 'Resource', key: 'RESOURCE' },
+  { label: 'Vue', key: 'VUE' },
+  { label: 'Js', key: 'JS' },
+  { label: 'Unknown', key: 'UNKNOWN' },
+];
 
 export interface State {
   type: any;
@@ -57,7 +48,7 @@ const initState: State = {
   logs: [],
   total: 0,
   categories,
-  category: { label: 'ALL', key: 'ALL' },
+  category: { label: 'All', key: 'ALL' },
   loading: false,
 };
 

src/views/components/dashboard/charts/constant.ts

@@ -22,10 +22,10 @@ export const EntityType = [
   { key: 'ServiceInstance', label: 'Service Instance' },
 ];
 export const BrowserEntityType = [
-  { key: 'Service', label: 'App' },
+  { key: 'Service', label: 'Service' },
   { key: 'All', label: 'All' },
-  { key: 'Endpoint', label: 'App Page' },
-  { key: 'ServiceInstance', label: 'App Single Version' },
+  { key: 'Endpoint', label: 'Page Path' },
+  { key: 'ServiceInstance', label: 'Service Version' },
 ];
 
 export const IndependentType = [

src/views/components/dashboard/tool-bar.vue

@@ -59,7 +59,7 @@ limitations under the License. -->
       <template v-if="compType === dashboardType.BROWSER">
         <ToolBarSelect
           @onChoose="selectService"
-          :title="this.$t('currentApp')"
+          :title="this.$t('currentService')"
           :current="stateDashboard.currentService"
           :data="stateDashboard.services"
           icon="package"

src/views/components/log/log-bar.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
       />
       <ToolBarSelect
         @onChoose="selectService"
-        :title="this.$t('app')"
+        :title="this.$t('service')"
         :current="rocketOption.currentService"
         :data="rocketOption.services"
         icon="package"
@@ -35,7 +35,7 @@ limitations under the License. -->
         :data="rocketOption.instances"
         icon="disk"
       />
-      <ToolBarEndpointSelect
+      <ToolBarSelect
         @onChoose="selectEndpoint"
         :title="this.$t('page')"
         :current="rocketOption.currentEndpoint"
@@ -52,6 +52,12 @@ limitations under the License. -->
     </div>
 
     <span class="flex-h rk-right">
+      <a class="rk-log-clear-btn r mr-10" @click="clearSearch">
+        <svg class="icon mr-5 vm">
+          <use xlink:href="#clear"></use>
+        </svg>
+        <span class="vm">{{ this.$t('clear') }}</span>
+      </a>
       <a class="rk-log-search-btn bg-blue mr-10" @click="queryLogs">
         <svg class="icon mr-5 vm">
           <use xlink:href="#search"></use>
@@ -81,7 +87,7 @@ limitations under the License. -->
     @Mutation('SELECT_LOG_TYPE') private SELECT_LOG_TYPE: any;
     @Mutation('SELECT_ERROR_CATALOG') private SELECT_ERROR_CATALOG: any;
 
-    @Action('SELECT_SERVICE') private SELECT_SERVICE: any;
+    @Action('SELECT_LOG_SERVICE') private SELECT_LOG_SERVICE: any;
     @Action('SELECT_DATABASE') private SELECT_DATABASE: any;
     @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
     @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
@@ -91,6 +97,7 @@ limitations under the License. -->
     @Getter('durationTime') private durationTime: any;
 
     private pageNum: number = 1;
+
     private beforeMount() {
       this.MIXHANDLE_GET_OPTION({
         compType: this.logState.type.key,
@@ -106,7 +113,7 @@ limitations under the License. -->
     }
 
     private selectService(i: any) {
-      this.SELECT_SERVICE({ service: i, duration: this.durationTime });
+      this.SELECT_LOG_SERVICE({ service: i, duration: this.durationTime });
     }
 
     private selectEndpoint(i: any) {
@@ -116,6 +123,10 @@ limitations under the License. -->
     private selectInstance(i: any) {
       this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
     }
+    private clearSearch() {
+      this.SELECT_LOG_SERVICE({ service: { label: 'All', key: '' }, duration: this.durationTime });
+      this.SELECT_ERROR_CATALOG({ label: 'All', key: 'ALL' });
+    }
 
     private queryLogs() {
       const { currentService, currentInstance, currentEndpoint } = this.rocketOption;
@@ -158,4 +169,9 @@ limitations under the License. -->
       background-color: #448dfe;
     }
   }
+  .rk-log-clear-btn {
+    padding: 3px 9px;
+    background-color: #484b55;
+    border-radius: 4px;
+  }
 </style>

src/views/components/log/log-table/log-constant.ts

@@ -49,7 +49,7 @@ export const BrowserLogConstants = [
   },
   {
     label: 'errorUrl',
-    value: 'Error Url',
+    value: 'Error Page',
   },
   // {
   //   label: 'pagePath',