fix: PR review

frontend/src/components/Dashboard/ServiceTreeView.vue

@@ -116,7 +116,7 @@ import FlatPickr from 'vue-flatpickr-component';
 import 'flatpickr/dist/flatpickr.css';
 
 const getRootNodes = (data) => {
-    if (!data || data.lenght === 0) {
+    if (!data || data.length === 0) {
         return;
     }
 
@@ -143,14 +143,16 @@ const getTreeData = (parentServices, serviceStatus) => {
     const treeData = [];
 
     for (let i=0; i<parentServices.length; i++) {
-        if (!parentServices[i].sub_services_detail) {
-            treeData.push({ parent: parentServices[i], children: [] });
+        const parentService = parentServices[i];
+
+        if (!parentService.sub_services_detail) {
+            treeData.push({ parent: parentService, children: [] });
         } else {
-            const subServices = Object.keys(parentServices[i].sub_services_detail).reduce((acc, key) => {
+            const subServices = Object.keys(parentService.sub_services_detail).reduce((acc, key) => {
                 const service = serviceStatus.find((item) => item.id == key);
 
                 if (service) {
-                    acc.push({ ...service, ...parentServices[i].sub_services_detail[key] });
+                    acc.push({ ...service, ...parentService.sub_services_detail[key] });
                 }
 
                 return acc;
@@ -158,7 +160,7 @@ const getTreeData = (parentServices, serviceStatus) => {
 
             const children = getTreeData(subServices, serviceStatus);
 
-            treeData.push({ parent: parentServices[i], children });
+            treeData.push({ parent: parentService, children });
         }
     }
 

frontend/src/components/Elements/TreeItem.vue

@@ -24,9 +24,9 @@
       </div>
       
       <div
-        v-tooltip="{ content: `${item.parent.downtime ? `${niceDateWithYear(item.parent.downtime.start)} - ${niceDateWithYear(item.parent.downtime.end)}`: ''}`, offset: 5, autoHide: true}"
+        v-tooltip="{ content: `${item.parent.downtime ? `${niceDateWithYear(startDate)} - ${niceDateWithYear(endDate)}` : ''}`, offset: 5, autoHide: true}"
         class="parent-name rounded-right"
-        :class="[{ 'cursor-text rounded': item.children.length === 0 }, item.parent.downtime ? item.parent.downtime.sub_status === 'down' ? 'bg-shade-danger' : 'bg-shade-warning' : 'bg-shade-success']"
+        :class="[{ 'cursor-text rounded': item.children.length === 0 }, item.parent.downtime ? downtimeStatus === 'down' ? 'bg-shade-danger' : 'bg-shade-warning' : 'bg-shade-success']"
       >
         {{ item.parent.name }}
       </div>
@@ -60,6 +60,17 @@ export default {
             isOpen: false,
         };
     },
+    computed: {
+        startDate: function () {
+            return this.item.parent.downtime?.start;
+        },
+        endDate: function () {
+            return this.item.parent.downtime?.end;
+        },
+        downtimeStatus: function () {
+            return this.item.parent.downtime?.sub_status;
+        }
+    },
     methods: {
         handleIsOpen: function () {
             this.isOpen = !this.isOpen;

frontend/src/mixin.js

@@ -258,6 +258,10 @@ export default Vue.mixin({
       return addSeconds(date, amount)
     },
     niceDateWithYear (val) {
+      if(!val) {
+        return '';
+      }
+      
       return format(parseISO(val), 'do MMM, yyyy h:mma');
     },
     convertDateObjToSec (val) {