Added All Time information to stack counts to help show long term info

niemyjski · niemyjski · commit dfb4ffa2b754 · 2023-02-01T08:16:43.000-06:00
diff --git a/src/app/stack/stack-controller.js b/src/app/stack/stack-controller.js
@@ -513,6 +513,21 @@
         return vm.stack.occurrences_are_critical;
       }
 
+      function showAllTimeEvents() {
+        return vm.stats.events != vm.stack.total_occurrences;
+      }
+
+      function showAllTimeFirstOccurrence() {
+        return !moment(vm.stats.first_occurrence).isSame(moment(vm.stack.first_occurrence));
+      }
+
+      function showAllTimeLastOccurrence() {
+        return showAllTimeFirstOccurrence() || !moment(vm.stats.last_occurrence).isSame(moment(vm.stack.last_occurrence));
+      }
+
+      function showAllTimeRow() {
+        return vm.stack.first_occurrence && showAllTimeEvents() || showAllTimeFirstOccurrence() || showAllTimeLastOccurrence();
+      }
 
       this.$onInit = function $onInit() {
         vm._organizations = [];
@@ -650,6 +665,11 @@
           source: vm._source + '.Events'
         };
         vm.showActionIcons = showActionIcons;
+        vm.showAllTimeEvents = showAllTimeEvents;
+        vm.showAllTimeFirstOccurrence = showAllTimeFirstOccurrence;
+        vm.showAllTimeLastOccurrence = showAllTimeLastOccurrence;
+        vm.showAllTimeRow = showAllTimeRow;
+
         vm.stack = {};
         vm.stats = {
           events: 0,
diff --git a/src/app/stack/stack.tpl.html b/src/app/stack/stack.tpl.html
@@ -12,7 +12,14 @@
               </div>
               <div class="details">
                 <span class="title">{{::'Events' | translate}}</span>
-                <span class="sub">{{vm.stats.events}}</span>
+                <span class="sub">
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    {{vm.stats.events}}
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeEvents()">{{vm.stack.total_occurrences | number:0}}</abbr>&nbsp
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -25,6 +32,7 @@
                 <span class="title">{{::'UserRatio' | translate}}</span>
                 <span class="sub">
                   <abbr title="{{vm.stats.usersTitle}}">{{vm.stats.users}}</abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">&nbsp</span>
                 </span>
               </div>
             </div>
@@ -36,14 +44,31 @@
               </div>
               <div class="details">
                 <span class="title">{{::'First' | translate}}</span>
-                <span class="sub visible-md visible-lg"><timeago date="vm.stats.first_occurrence"></timeago></span>
+                <span class="sub visible-md visible-lg">
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <timeago date="vm.stats.first_occurrence"></timeago>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeFirstOccurrence()">{{vm.stack.first_occurrence | date:'shortDate' }}</abbr>&nbsp
+                  </span>
+                </span>
                 <span class="sub visible-sm">
-                  <span ng-if="vm.isValidDate(vm.stats.first_occurrence)">{{vm.stats.first_occurrence | date:'shortDate' }}</span>
-                  <span ng-if="!vm.isValidDate(vm.stats.first_occurrence)">never</span>
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <span ng-if="vm.isValidDate(vm.stats.first_occurrence)">{{vm.stats.first_occurrence | date:'shortDate' }}</span>
+                    <span ng-if="!vm.isValidDate(vm.stats.first_occurrence)">never</span>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeFirstOccurrence()">{{vm.stack.first_occurrence | date:'shortDate' }}</abbr>&nbsp
+                  </span>
                 </span>
                 <span class="sub visible-xs">
-                  <span ng-if="vm.isValidDate(vm.stats.first_occurrence)">{{vm.stats.first_occurrence | date:'M/d' }}</span>
-                  <span ng-if="!vm.isValidDate(vm.stats.first_occurrence)">NA</span>
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <span ng-if="vm.isValidDate(vm.stats.first_occurrence)">{{vm.stats.first_occurrence | date:'M/d' }}</span>
+                    <span ng-if="!vm.isValidDate(vm.stats.first_occurrence)">NA</span>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeFirstOccurrence()">{{vm.stack.first_occurrence | date:'M/d/yy' }}</abbr>&nbsp
+                  </span>
                 </span>
               </div>
             </div>
@@ -55,14 +80,31 @@
               </div>
               <div class="details">
                 <span class="title">{{::'Last' | translate}}</span>
-                <span class="sub visible-md visible-lg"><timeago date="vm.stats.last_occurrence"></timeago></span>
+                <span class="sub visible-md visible-lg">
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <timeago date="vm.stats.last_occurrence"></timeago>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeLastOccurrence()">{{vm.stack.last_occurrence | date:'shortDate' }}</abbr>&nbsp
+                  </span>
+                </span>
                 <span class="sub visible-sm">
-                  <span ng-if="vm.isValidDate(vm.stats.last_occurrence)">{{vm.stats.last_occurrence | date:'shortDate' }}</span>
-                  <span ng-if="!vm.isValidDate(vm.stats.last_occurrence)">never</span>
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <span ng-if="vm.isValidDate(vm.stats.last_occurrence)">{{vm.stats.last_occurrence | date:'shortDate' }}</span>
+                    <span ng-if="!vm.isValidDate(vm.stats.last_occurrence)">never</span>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeLastOccurrence()">{{vm.stack.last_occurrence | date:'shortDate' }}</abbr>&nbsp
+                  </span>
                 </span>
                 <span class="sub visible-xs">
-                  <span ng-if="vm.isValidDate(vm.stats.last_occurrence)">{{vm.stats.last_occurrence | date:'M/d' }}</span>
-                  <span ng-if="!vm.isValidDate(vm.stats.last_occurrence)">NA</span>
+                  <abbr title="{{::'In Date Range' | translate}}">
+                    <span ng-if="vm.isValidDate(vm.stats.last_occurrence)">{{vm.stats.last_occurrence | date:'M/d' }}</span>
+                    <span ng-if="!vm.isValidDate(vm.stats.last_occurrence)">NA</span>
+                  </abbr>
+                  <span class="subAlternative" ng-if="vm.showAllTimeRow()">
+                    <abbr title="{{::'All Time' | translate}}" ng-if="vm.showAllTimeLastOccurrence()">{{vm.stack.last_occurrence | date:'M/d/yy' }}</abbr>&nbsp
+                  </span>
                 </span>
               </div>
             </div>
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
@@ -284,6 +284,7 @@
   "All Time": "All Time",
   "Custom": "Custom",
   "Select Date Range": "Select Date Range",
+  "In Date Range": "In Date Range",
 
   "DayFormat":"D",
   "DateFormat":"ddd, MMM D, YYYY",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
@@ -284,6 +284,7 @@
     "All Time": "全部时间",
     "Custom": "自定义",
     "Select Date Range": "选择日期范围",
+    "In Date Range": "在日期范围内",
 
     "DayFormat":"D日",
     "DateFormat": "YYYY年M月D日",
diff --git a/src/less/colors.less b/src/less/colors.less
@@ -1,17 +1,17 @@
-.bg-gd{
+.bg-gd {
   #gradient > .vertical(rgba(40,50,60,0), rgba(40,50,60,0.075), 0, 100%);
   filter:none;
 }
 
-.bg-gd-dk{
+.bg-gd-dk {
   #gradient > .vertical(rgba(40,50,60,0), rgba(40,50,60,0.5), 10%, 100%);
   filter:none;
 }
 
-.bg-white-opacity{
+.bg-white-opacity {
 	background-color: rgba(255, 255, 255, 0.5);
 }
-.bg-black-opacity{
+.bg-black-opacity {
 	background-color: rgba(32, 43, 54, 0.5);
 }
 
diff --git a/src/less/components.less b/src/less/components.less
@@ -248,7 +248,16 @@ a.dashboard-block:hover, a.dashboard-block:active, a.dashboard-block:focus {
     display: block;
     font-size: 32px;
   }
+  .subAlternative {
+    display: block;
+    color: rgba(20, 20, 20, 0.8);
+    font-size: 22px;
+    padding-top: 10px;
 
+    abbr[title] {
+      border-bottom: 1px dotted rgba(20, 20, 20, 0.8);
+    }
+  }
   abbr[title] {
     border-bottom: 1px dotted #fff;
   }

Original file line number	Diff line number	Diff line change
`@@ -1,17 +1,17 @@`
`1`		`-.bg-gd{`
	`1`	`+.bg-gd {`
`2`	`2`	`#gradient > .vertical(rgba(40,50,60,0), rgba(40,50,60,0.075), 0, 100%);`
`3`	`3`	`filter:none;`
`4`	`4`	`}`
`5`	`5`
`6`		`-.bg-gd-dk{`
	`6`	`+.bg-gd-dk {`
`7`	`7`	`#gradient > .vertical(rgba(40,50,60,0), rgba(40,50,60,0.5), 10%, 100%);`
`8`	`8`	`filter:none;`
`9`	`9`	`}`
`10`	`10`
`11`		`-.bg-white-opacity{`
	`11`	`+.bg-white-opacity {`
`12`	`12`	`background-color: rgba(255, 255, 255, 0.5);`
`13`	`13`	`}`
`14`		`-.bg-black-opacity{`
	`14`	`+.bg-black-opacity {`
`15`	`15`	`background-color: rgba(32, 43, 54, 0.5);`
`16`	`16`	`}`
`17`	`17`