Merge pull request #91 from hastic/show-error-if-server-is-down-#48

Show error if server is down #48

client/src/components/AnlyticsStatus.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="analytic-status">
-    analytic status: <strong> {{ status }} </strong>
+    analytic status: <strong> {{ status.message }} </strong>
   </div>
 </template>
 
 <script lang="ts">
+import { AnalyticStatus } from "@/store";
+
 import { defineComponent } from 'vue';
 
 
@@ -13,7 +15,7 @@ export default defineComponent({
   components: {
   },
   computed: {
-    status() {
+    status(): AnalyticStatus {
       return this.$store.state.analyticStatus;
     }
   }

client/src/services/analytics.service.ts

@@ -5,20 +5,33 @@ import axios from 'axios';
 
 import { getGenerator } from '@/utils';
 
-import _ from 'lodash';
-import { 
+import {
   AnalyticUnitType, AnlyticUnitConfig,
   PatternConfig, ThresholdConfig, AnomalyConfig
 } from "@/types/analytic_units";
 import { AnomalyHSR } from "@/types";
+import { AnalyticStatus } from "@/store";
+
+import _ from 'lodash';
+
 
 const ANALYTICS_API_URL = API_URL + "analytics/";
 
-export async function getStatus(): Promise<string> {
+export async function getStatus(): Promise<AnalyticStatus> {
   const uri = ANALYTICS_API_URL + `status`;
-  const res = await axios.get(uri);
-  const data = res['data'] as any;
-  return data.status;
+  try {
+    const res = await axios.get<{ status: string }>(uri);
+    const data = res.data;
+    return {
+      available: true,
+      message: data.status
+    };
+  } catch (e) {
+    return {
+      available: false,
+      message: e.message
+    };
+  }
 }
 
 export async function getConfig(): Promise<[AnalyticUnitType, AnlyticUnitConfig]> {
@@ -54,8 +67,8 @@ export async function patchConfig(patchObj: any) {
   await axios.patch(uri, patchObj);
 }
 
-export function getStatusGenerator(): AsyncIterableIterator<string> {
-  return getGenerator<string>(100, getStatus);
+export function getStatusGenerator(): AsyncIterableIterator<AnalyticStatus> {
+  return getGenerator<AnalyticStatus>(100, getStatus);
 }
 
 
@@ -68,6 +81,6 @@ export async function getHSRAnomaly(from: number, to: number): Promise<AnomalyHS
   const res = await axios.get(uri);
 
   const values = res["data"]["AnomalyHSR"];
-  
+
   return values as AnomalyHSR;
 }

client/src/store/index.ts

@@ -12,23 +12,30 @@ const _SET_STATUS_GENERATOR = '_SET_STATUS_GENERATOR';
 
 // TODO: consts for actions
 
+export type AnalyticStatus = {
+  available: boolean,
+  message: string,
+}
 
 type State = {
-  analyticStatus: string,
+  analyticStatus: AnalyticStatus,
   analyticUnitType?: AnalyticUnitType,
   analyticUnitConfig?: AnlyticUnitConfig,
-  _statusGenerator: AsyncIterableIterator<string>
+  _statusGenerator: AsyncIterableIterator<AnalyticStatus>
 }
 
 const store = createStore<State>({
   state: {
-    analyticStatus: 'loading...',
+    analyticStatus: {
+      available: false,
+      message: 'loading...',
+    },
     analyticUnitType: null,
     analyticUnitConfig: null,
     _statusGenerator: null
   },
   mutations: {
-    [SET_ANALYTICS_STATUS](state, status: string) {
+    [SET_ANALYTICS_STATUS](state, status: AnalyticStatus) {
       state.analyticStatus = status;
     },
     [SET_DETECTOR_CONFIG](state, { analyticUnitType, analyticUnitConfig }) {      
@@ -38,7 +45,7 @@ const store = createStore<State>({
     // [PATCH_CONFIG](state, patchObj) {
     //   patchConfig(patchConfig)
     // }
-    [_SET_STATUS_GENERATOR](state, generator: AsyncIterableIterator<string>) {
+    [_SET_STATUS_GENERATOR](state, generator: AsyncIterableIterator<AnalyticStatus>) {
       state._statusGenerator = generator;
     }
   },

client/src/views/Home.vue

@@ -2,50 +2,53 @@
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
     <graph ref="graph" />
-    
+
     <analytic-status />
-    <div>
-      Analytic unit type:
-      <select :value="analyticUnitType" @change="changeAnalyticUnitType">
-        <option disabled value="">Please Select</option>
-        <option v-bind:key="option" v-for="option in analyticUnitTypes" :value="option">{{option}}</option>
-      </select> <br/><br/>
-    </div>
-    <div id="controls">
-      <div v-if="analyticUnitType == analyticUnitTypes[0]">
-        Threshold: 
-        <input :value="analyticUnitConfig.threshold" @change="thresholdChange" /> <br/><br/>
-      </div>
-      <div v-if="analyticUnitType == analyticUnitTypes[1]">
-        Hold <pre>S</pre> to label patterns; 
-        Hold <pre>A</pre> to label anti patterns <br/>
-        Hold <pre>D</pre> to delete patterns
-        <br/>
-        <hr/>
-        Correlation score:
-        <input :value="analyticUnitConfig.correlation_score" @change="correlationScoreChange" /> <br/>
-        Anti correlation score: 
-        <input :value="analyticUnitConfig.anti_correlation_score" @change="antiCorrelationScoreChange" /> <br/>
-        Model score: 
-        <input :value="analyticUnitConfig.model_score" @change="modelScoreChange" /> <br/>
-        Threshold score: 
-        <input :value="analyticUnitConfig.threshold_score" @change="thresholdScoreChange" /> <br/><br/>
-        <button @click="clearAllLabeling"> clear all labeling </button>
+
+    <template v-if="analyticStatus.available">
+      <div>
+        Analytic unit type:
+        <select :value="analyticUnitType" @change="changeAnalyticUnitType">
+          <option disabled value="">Please Select</option>
+          <option v-bind:key="option" v-for="option in analyticUnitTypes" :value="option">{{option}}</option>
+        </select> <br/><br/>
       </div>
-      <div v-if="analyticUnitType == analyticUnitTypes[2]">
-        Hold <pre>Z</pre> to set seasonality timespan
-        <hr/>
-        <!-- Alpha:
-        <input :value="analyticUnitConfig.alpha" @change="alphaChange" /> <br/> -->
-        Confidence:
-        <input :value="analyticUnitConfig.confidence" @change="confidenceChange" /> <br/>
-        Seasonality:
-        <input :value="analyticUnitConfig.seasonality" @change="seasonalityChange" /> <br/>
-        Seasonality iterations:
-        <input :value="analyticUnitConfig.seasonality_iterations" @change="seasonalityIterationsChange" /> <br/>
-        <br/>
+      <div id="controls">
+        <div v-if="analyticUnitType == analyticUnitTypes[0]">
+          Threshold:
+          <input :value="analyticUnitConfig.threshold" @change="thresholdChange" /> <br/><br/>
+        </div>
+        <div v-if="analyticUnitType == analyticUnitTypes[1]">
+          Hold <pre>S</pre> to label patterns;
+          Hold <pre>A</pre> to label anti patterns <br/>
+          Hold <pre>D</pre> to delete patterns
+          <br/>
+          <hr/>
+          Correlation score:
+          <input :value="analyticUnitConfig.correlation_score" @change="correlationScoreChange" /> <br/>
+          Anti correlation score:
+          <input :value="analyticUnitConfig.anti_correlation_score" @change="antiCorrelationScoreChange" /> <br/>
+          Model score:
+          <input :value="analyticUnitConfig.model_score" @change="modelScoreChange" /> <br/>
+          Threshold score:
+          <input :value="analyticUnitConfig.threshold_score" @change="thresholdScoreChange" /> <br/><br/>
+          <button @click="clearAllLabeling"> clear all labeling </button>
+        </div>
+        <div v-if="analyticUnitType == analyticUnitTypes[2]">
+          Hold <pre>Z</pre> to set seasonality timespan
+          <hr/>
+          <!-- Alpha:
+          <input :value="analyticUnitConfig.alpha" @change="alphaChange" /> <br/> -->
+          Confidence:
+          <input :value="analyticUnitConfig.confidence" @change="confidenceChange" /> <br/>
+          Seasonality:
+          <input :value="analyticUnitConfig.seasonality" @change="seasonalityChange" /> <br/>
+          Seasonality iterations:
+          <input :value="analyticUnitConfig.seasonality_iterations" @change="seasonalityIterationsChange" /> <br/>
+          <br/>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -140,6 +143,9 @@ export default defineComponent({
     },
     analyticUnitConfig() {
       return this.$store.state.analyticUnitConfig;
+    },
+    analyticStatus() {
+      return this.$store.state.analyticStatus;
     }
   }
 });

server/src/config.rs

@@ -114,7 +114,7 @@ impl Config {
         update_from_env(&mut config);
 
         if config.get::<u16>("port").is_err() {
-            config.set("port", "8000").unwrap();
+            config.set("port", 4347).unwrap();
         }
 
         // TODO: print resulted config (perfectly, it needs adding `derive(Debug)` in `subbeat`'s `DatasourceConfig`)