feat(core): support Scheduled Maintenance definition

juliomrqz · Dec 10, 2018 · 2edbe9e · 2edbe9e
1 parent 1b28749
commit 2edbe9e
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 32 deletions.
diff --git a/packages/@statusfy/common/lib/generate-content/data.json b/packages/@statusfy/common/lib/generate-content/data.json
@@ -13,7 +13,8 @@
       "Systems are currently down.",
       "The API system is experimenting some issues",
       "We detected a networking problem that caused temporary issues for our API and origin servers.",
-      "We will be deploying the next version."
+      "We will be deploying the next version.",
+      "A network maintenance will be performed during 30 minutes. Short website access interruption is expected from this maintenance."
     ],
     "es": [
       "Nuestro proceso de conversión de archivos respondía lentamente.",
@@ -22,7 +23,8 @@
       "Los sistemas están actualmente desconectados",
       "El sistema API está experimentando algunos problemas",
       "Detectamos un problema de red que causaba problemas temporales para nuestra API y servidores de origen.",
-      "Implementaremos la próxima versión."
+      "Implementaremos la próxima versión.",
+      "Se realizará un mantenimiento de la red durante 30 minutos. Se espera una corta interrupción del acceso al sitio web."
     ]
   },
   "updates": {
@@ -77,7 +79,8 @@
       "Networking Issues",
       "Origin Server Errors",
       "Planned Maintenance",
-      "Systems are down"
+      "Systems are down",
+      "Network Maintenance"
     ],
     "es": [
       "Problemas de la API",
@@ -86,7 +89,8 @@
       "Problemas de Red",
       "Errores del Servidor de Origen",
       "Mantenimiento Planificado",
-      "Los sistemas están caídos"
+      "Los sistemas están caídos",
+      "Mantenimiento de Red"
     ]
   }
 }
diff --git a/packages/@statusfy/common/lib/generate-content/index.js b/packages/@statusfy/common/lib/generate-content/index.js
@@ -27,7 +27,9 @@ id: <%= data.id %>
 title: <%= data.title[lang] %>
 description: <%= data.content[lang] %>
 date: <%= data.date %>
-modified: <%= data.modified %>
+modified: <%= data.modified %><% if (typeof(data.scheduled) !== 'undefined') { %>
+scheduled: <%= data.scheduled %>
+duration: 30<% } %>
 severity: <%= data.severity %>
 resolved: <%= data.resolved %>
 affectedsystems:
@@ -56,8 +58,8 @@ module.exports = function generateDemoContent (dest, finalDate, amount = 20) {
       monthSubtraction += 1
     }
 
-    const titleIndex = getId(i, data.title.en.length)
-    const contentIndex = getId(i, data.content.en.length)
+    const titleIndex = i === 1 ? (data.title.en.length - 1) : getId(i, data.title.en.length - 1)
+    const contentIndex = i === 1 ? (data.content.en.length - 1) : getId(i, data.content.en.length - 1)
     const updatesContentIds = [
       getId(i, data.updates.content.en.length),
       getId(i + 1, data.updates.content.en.length),
@@ -71,8 +73,9 @@ module.exports = function generateDemoContent (dest, finalDate, amount = 20) {
       id: hash(i),
       date: date.toISOString(),
       modified: date.add(2, 'h').toISOString(),
-      resolved: i > 1,
-      severity: severities[getId(i, 4)],
+      scheduled: i === 1 ? moment(finalDate).add(7, 'd').toISOString() : undefined,
+      resolved: i > 2,
+      severity: i === 1 ? severities[0] : severities[getId(i, 4)],
       affectedsystems: data.affectedsystems.slice(0, getId(i, 4) + 1),
       title: {
         en: data.title.en[titleIndex],
@@ -82,7 +85,7 @@ module.exports = function generateDemoContent (dest, finalDate, amount = 20) {
         en: data.content.en[contentIndex],
         es: data.content.es[contentIndex]
       },
-      updates: [
+      updates: i === 1 ? [] : [
         {
           date: date.add(2, 'h').toISOString(),
           title: {
@@ -117,7 +120,6 @@ module.exports = function generateDemoContent (dest, finalDate, amount = 20) {
           }
         }
       ]
-
     }
 
     // Write File

diff --git a/packages/@statusfy/core/client/assets/css/styles.css b/packages/@statusfy/core/client/assets/css/styles.css
@@ -31,15 +31,16 @@ main {
   background-color: var(--grey-darkest);
 }
 
-/* timeline */
-.timeline-container {
+.timeline-container,
+.scheduled-container {
   @apply mt-6;
 
   > h2 {
     @apply text-2xl mb-4 font-medium;
   }
 }
 
+/* timeline */
 .timeline {
   @apply list-reset m-0 p-0;
 }
@@ -260,6 +261,13 @@ main {
       }
     }
   }
+
+  &.scheduled {
+    .incident-title {
+      display: block;
+      text-align: center;
+    }
+  }
 }
 
 .incident-body {

diff --git a/packages/@statusfy/core/client/components/Incident.vue b/packages/@statusfy/core/client/components/Incident.vue
@@ -1,11 +1,13 @@
 <template>
   <div
-    :class="`${incident.severity} ${resolved.value ? 'resolved' : 'unresolved'}`"
+    :class="`${incident.severity}${resolved.value ? ' resolved' : ' unresolved'}${incident.scheduled ? ' scheduled' : ''}`"
     class="incident">
     <div
       :class="`level-${level}`"
       class="incident-header">
-      <div class="incident-title">
+      <div
+        v-if="!incident.scheduled"
+        class="incident-title">
         <span class="badge">
           {{ resolved.value ? $t('incidents.resolved') : $t('incidents.unresolved') }}
         </span>
@@ -17,6 +19,15 @@
           </component>
         </nuxt-link>
       </div>
+      <div
+        v-else
+        class="incident-title">
+        <template>
+          <component :is="`h${level}`">
+            {{ incident.title }}
+          </component>
+        </template>
+      </div>
 
       <div class="incident-systems">
         <span
@@ -29,18 +40,25 @@
     </div>
 
     <div class="incident-subtitle">
-      <div class="status">
+      <div
+        v-if="!incident.scheduled"
+        class="status">
         <svgicon
           :name="`fortawesome/${status.icon}`"
           class="svg-inline--fa fa-w-16"/>
         {{ status.title }}
       </div>
 
-      <div>
+      <div v-if="!incident.scheduled">
         <nice-date
           :date="incident.date"
           format="long" />
       </div>
+      <div v-else>
+        <nice-date
+          :date="incident.scheduled"
+          format="long" />
+      </div>
     </div>
 
     <div class="incident-body">
@@ -89,6 +107,10 @@ export default {
       type: Boolean,
       default: false
     },
+    scheduled: {
+      type: Boolean,
+      default: false
+    },
     level: {
       type: Number,
       default: 4,

diff --git a/packages/@statusfy/core/client/components/Scheduled.vue b/packages/@statusfy/core/client/components/Scheduled.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    v-if="data && data.count > 0"
+    class="scheduled-container">
+    <h2>{{ $t('incidents.scheduled') }}</h2>
+
+    <div class="incidents-container">
+      <ul class="list-reset">
+        <li
+          v-for="incident in data.incidents"
+          :key="incident.id">
+          <incident
+            :incident="incident"
+            :summary="true"
+            :scheduled="true"
+            :level="3" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Incident from './Incident'
+
+export default {
+  components: {
+    Incident
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/packages/@statusfy/core/client/helpers/api.js b/packages/@statusfy/core/client/helpers/api.js
@@ -46,4 +46,8 @@ export default class API {
   async getIncidentsTimeline () {
     return this.axios.$get(this.buildUrl('/incidents/timeline'))
   }
+
+  async getScheduled () {
+    return this.axios.$get(this.buildUrl('/scheduled'))
+  }
 }
diff --git a/packages/@statusfy/core/client/locales/en-default.json b/packages/@statusfy/core/client/locales/en-default.json
@@ -24,6 +24,7 @@
   "incidents": {
     "incidents": "Incidents",
     "incident": "Incident",
+    "scheduled": "Scheduled Maintenance",
     "incidents-history": "Incidents History",
     "incidents-history-description": "Current & Historical operational interruptions to our service.",
     "latest-incidents": "Latest Incidents",

diff --git a/packages/@statusfy/core/client/locales/es-default.json b/packages/@statusfy/core/client/locales/es-default.json
@@ -24,6 +24,7 @@
   "incidents": {
     "incidents": "Incidentes",
     "incident": "Incidente",
+    "scheduled": "Mantenimiento Programado",
     "incidents-history": "Historial de Incidentes",
     "incidents-history-description": "Interrupciones operativas actuales e históricas de nuestro servicio.",
     "latest-incidents": "Últimos Incidentes",

diff --git a/packages/@statusfy/core/client/modules/statusfy/build.js b/packages/@statusfy/core/client/modules/statusfy/build.js
@@ -63,8 +63,12 @@ module.exports = async function buildContent (nuxt, isStatic) {
 
             incidents.forEach(incident => {
               compilation.assets[`${pathPrefix}/incidents/${incident.id}.${locale.code}.json`] =
-              asset(incident)
+                asset(incident)
             })
+
+            // Scheduled
+            compilation.assets[`${pathPrefix}/scheduled.${locale.code}.json`] =
+              asset(database.scheduled(locale.code))
           })
 
           cb()

diff --git a/packages/@statusfy/core/client/pages/index.vue b/packages/@statusfy/core/client/pages/index.vue
@@ -3,6 +3,9 @@
     <!-- System Status -->
     <system-status :systems="systems" />
 
+    <!-- Scheduled -->
+    <scheduled :data="scheduled" />
+
     <!-- Timeline -->
     <incidents-timeline :data="timelineData" />
   </section>
@@ -12,20 +15,23 @@
 import API from '~/helpers/api'
 import IncidentsTimeline from '~/components/IncidentsTimeline'
 import SystemStatus from '~/components/SystemStatus'
+import Scheduled from '~/components/Scheduled'
 
 export default {
   layout: 'home',
   components: {
     IncidentsTimeline,
-    SystemStatus
+    SystemStatus,
+    Scheduled
   },
   async asyncData ({ app }) {
     const api = new API(app.$axios, app.i18n.locale)
 
     const systems = await api.getSystems()
     const timelineData = await api.getIncidentsTimeline()
+    const scheduled = await api.getScheduled()
 
-    return { systems, timelineData }
+    return { systems, timelineData, scheduled }
   },
   head () {
     const $t = this.$t.bind(this)