refactor(ui): improve core down error

neofacto · May 29, 2020 · c828d2a · c828d2a
1 parent 2abf08d
commit c828d2a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -281,7 +281,7 @@
  }
 
  .c-app--loading {
- --color-logo-background: #87d7af;
+ --color-logo-background: var(--color-succeeded);
  --color-logo-m: #ffffff;
 
  position: fixed;
@@ -382,6 +382,7 @@
 
  .c-app__welcome-page {
  .c-app--logo,
+ path,
  stop {
  transition-delay: 1s;
  }
@@ -502,7 +503,7 @@
  }
 
  .loading-fade-leave-to .c-app--loading-progress-bar {
- transform: translateX(0);
+ transform: translateX(0) !important; /* Overrides computed style attribute */
  }
 
  .c-app__welcome-page .c-app--loading-progress,

diff --git a/ui/src/components/Errors.vue b/ui/src/components/Errors.vue
@@ -11,22 +11,27 @@
  in this configuration:
  </template>
  </div>
- <template v-if="configParam !== undefined">
+ <template v-if="configParam !== undefined && !isUsingDefaultConfig">
  <code>{{configParam}}</code> <br><br>
  </template>
- Last refresh at {{lastRefreshDate}}
+ <template v-if="!isCoreDown">
+ Last refresh at {{lastRefreshDate}}
 
- <hr v-if="!hasConfigVerifyErrors">
+ <hr v-if="!hasConfigVerifyErrors">
+ </template>
  </div>
  <div class="c-monitoror-errors--error" v-for="error in errors">
  <!-- Blocking single-line errors -->
- <template v-if="error.id === ConfigErrorId.CannotBeFetched">
+ <template v-if="isCoreDown">
  <p class="c-monitoror-errors--error-title">
  Monitoror Core seems down
  </p>
  <p>
- Is there a Monitoror Core running at <code>{{apiBaseUrl}}</code>?<br>
- Configuration cannot be fetch
+ Is there a Monitoror Core running at <code>{{apiBaseUrl}}</code>?
+ </p>
+ <hr>
+ <p class="c-monitoror-errors--last-refresh">
+ Last refresh at {{lastRefreshDate}}
  </p>
  </template>
  <template v-else-if="error.id === ConfigErrorId.ConfigNotFound">
@@ -223,6 +228,7 @@
  import parsedExtractFieldValue from '@/helpers/parsedExpectedValue'
  import splitList from '@/helpers/splitList'
  import ConfigError from '@/interfaces/configError'
+ import {DEFAULT_CONFIG_NAME} from '@/store'
 
  @Component({})
  export default class MonitororErrors extends Vue {
@@ -240,6 +246,18 @@
  return this.$store.getters.configParam
  }
 
+ get isUsingDefaultConfig(): boolean {
+ return this.configParam === DEFAULT_CONFIG_NAME
+ }
+
+ get isCoreDown(): boolean {
+ if (!this.hasErrors) {
+ return false
+ }
+
+ return this.errors[0].id === ConfigErrorId.CannotBeFetched
+ }
+
  get lastRefreshDate(): string {
  return format(this.$store.state.lastRefreshDate, 'hh:mm:ss a')
  }
@@ -414,6 +432,10 @@
  }
  }
 
+ .c-monitoror-errors--last-refresh {
+ font-size: 22px;
+ }
+
  .c-monitoror-errors--error {
  margin-bottom: 50px;
  font-size: 18px;

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -28,7 +28,7 @@ import TileState from '@/interfaces/tileState'
 Vue.use(Vuex)
 
 const API_BASE_PATH = '/api/v1'
-const DEFAULT_CONFIG_NAME = 'default'
+export const DEFAULT_CONFIG_NAME = 'default'
 const INFO_URL = '/info'
 const QUERY_PARAM_KEYS = {
  API_BASE_URL: 'apiBaseUrl',