service dropdown for chart timeframe and interval

Makefile

@@ -156,14 +156,11 @@ build-linux:
 	export PWD=`pwd`
 	@for arch in $(ARCHS);\
 	do \
-		for os in $(OS);\
+		echo "Building v${VERSION} for linux-$$arch"; \
-		do \
-			echo "Building v$$VERSION for $$os-$$arch"; \
 		mkdir -p releases/statping-$$os-$$arch/; \
-			GO111MODULE="on" GOOS=$$os GOARCH=$$arch go build -a -ldflags "-X main.VERSION=${VERSION} -X main.COMMIT=$(TRAVIS_COMMIT)" -o releases/statping-$$os-$$arch/statping ${PWD}/cmd || true; \
+		GO111MODULE="on" GOOS=$$os GOARCH=$$arch go build -a -ldflags "-s -w -extldflags -static -X main.VERSION=${VERSION}" -o releases/statping-$$os-$$arch/statping ${PWD}/cmd || true; \
 		chmod +x releases/statping-$$os-$$arch/statping || true; \
 		tar -czf releases/statping-$$os-$$arch.tar.gz -C releases/statping-$$os-$$arch statping || true; \
-		done \
 	done
 	find ./releases/ -name "*.tar.gz" -type f -size +1M -exec mv "{}" build/ \;
 
@@ -172,9 +169,9 @@ build-mac:
 	export PWD=`pwd`
 	@for arch in $(ARCHS);\
 	do \
-		echo "Building v$$VERSION for darwin-$$arch"; \
+		echo "Building v${VERSION} for darwin-$$arch"; \
 		mkdir -p releases/statping-darwin-$$arch/; \
-		GO111MODULE="on" GOOS=darwin GOARCH=$$arch go build -a -ldflags "-X main.VERSION=${VERSION} -X main.COMMIT=$(TRAVIS_COMMIT)" -o releases/statping-darwin-$$arch/statping ${PWD}/cmd || true; \
+		GO111MODULE="on" GOOS=darwin GOARCH=$$arch go build -a -ldflags "-s -w -extldflags -static -X main.VERSION=${VERSION}" -o releases/statping-darwin-$$arch/statping ${PWD}/cmd || true; \
 		chmod +x releases/statping-darwin-$$arch/statping || true; \
 		tar -czf releases/statping-darwin-$$arch.tar.gz -C releases/statping-darwin-$$arch statping || true; \
 	done
@@ -185,9 +182,9 @@ build-win:
 	export PWD=`pwd`
 	@for arch in $(ARCHS);\
 	do \
-		echo "Building v$$VERSION for windows-$$arch"; \
+		echo "Building v${VERSION} for windows-$$arch"; \
 		mkdir -p releases/statping-windows-$$arch/; \
-		GO111MODULE="on" GOOS=windows GOARCH=$$arch go build -a -ldflags "-X main.VERSION=${VERSION} -X main.COMMIT=$(TRAVIS_COMMIT)" -o releases/statping-windows-$$arch/statping.exe ${PWD}/cmd || true; \
+		GO111MODULE="on" GOOS=windows GOARCH=$$arch go build -a -ldflags "-s -w -extldflags -static -X main.VERSION=${VERSION}" -o releases/statping-windows-$$arch/statping.exe ${PWD}/cmd || true; \
 		chmod +x releases/statping-windows-$$arch/statping.exe || true; \
 		zip -j releases/statping-windows-$$arch.zip releases/statping-windows-$$arch/statping.exe || true; \
 	done

frontend/src/assets/scss/base.scss

@@ -14,6 +14,18 @@ HTML,BODY {
   transition: height 0.3s ease;
 }
 
+.service-tm-menu {
+  width: 210px;
+  height: 355px;
+  bottom: 15px;
+  left: -25px;
+  position: absolute;
+  background-color: #ffffffd4;
+  border: 0;
+  border-radius: 0;
+  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.08);
+}
+
 .copy-btn {
   position: absolute;
   right: 0;

frontend/src/components/Service/ServiceBlock.vue

@@ -24,30 +24,40 @@
                                 </router-link>
                             </div>
                          </div>
-
                 </div>
             </div>
 
             <div v-show="!expanded" v-observe-visibility="visibleChart" class="chart-container">
-                <ServiceChart :service="service" :visible="visible"/>
+                <ServiceChart :service="service" :visible="visible" :chart_timeframe="chartTimeframe"/>
             </div>
 
             <div class="row lower_canvas full-col-12 text-white" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
                 <div class="col-md-8 col-6">
                     <div class="dropup" :class="{show: dropDownMenu}">
-                              <button style="font-size: 10pt;" @focusout="dropDownMenu = false"  @click="dropDownMenu = !dropDownMenu" type="button" class="d-none col-4 float-left btn btn-sm float-right btn-block text-white dropdown-toggle service_scale" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <button style="font-size: 10pt;" @click.prevent="openMenu('timeframe')" type="button" class="col-4 float-left btn btn-sm float-right btn-block text-white dropdown-toggle service_scale pr-2">
-                                  24 Hours
+                            {{timepick.text}}
                         </button>
-                              <div class="dropdown-menu" :class="{show: dropDownMenu}">
+                        <div class="service-tm-menu" :class="{'d-none': !dropDownMenu}">
-                                <a v-for="(timeframe, i) in timeframes" @click="timeframe.picked = true" class="dropdown-item" href="#">{{timeframe.text}}</a>
+                            <a v-for="(timeframe, i) in timeframes" @click.prevent="changeTimeframe(timeframe)" class="dropdown-item" href="#" :class="{'active': timeframe.picked}">{{timeframe.text}}</a>
+                        </div>
+                    </div>
+
+                    <div class="dropup" :class="{show: intervalMenu}">
+                        <button style="font-size: 10pt;" @click.prevent="openMenu('interval')" type="button" class="col-4 float-left btn btn-sm float-right btn-block text-white dropdown-toggle service_scale pr-2">
+                            {{intervalpick.text}}
+                        </button>
+                        <div class="service-tm-menu" :class="{'d-none': !intervalMenu}">
+                            <a v-for="(interval, i) in intervals" @click.prevent="changeInterval(interval)" class="dropdown-item" href="#" :class="{'active': interval.picked}">{{interval.text}}</a>
                         </div>
 
                         <span class="d-none float-left d-md-inline">
                             {{smallText(service)}}
                         </span>
                     </div>
+
                 </div>
 
+
                 <div class="col-md-4 col-6 float-right">
                     <button v-if="!expanded" @click="setService" class="btn btn-sm float-right dyn-dark text-white" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
                         View Service
@@ -75,18 +85,54 @@ export default {
             required: true
         },
     },
+  computed: {
+    service() {
+      return this.track_service
+    },
+    timepick() {
+      return this.timeframes.find(s => s.value === this.timeframe_val)
+    },
+    intervalpick() {
+      return this.intervals.find(s => s.value === this.interval_val)
+    },
+    chartTimeframe() {
+      return {start_time: this.timeframe_val, interval: this.interval_val}
+    }
+  },
     data() {
         return {
           timer_func: null,
             expanded: false,
             visible: false,
             dropDownMenu: false,
+            intervalMenu: false,
+          interval_val: "60m",
+          timeframe_val: this.timeset(259200),
           timeframes: [
-                {value: "72h", text: "3 Days", picked: true },
+            {value: this.timeset(1800), text: "30 Minutes"},
-                {value: "24h", text: "Since Yesterday" },
+            {value: this.timeset(3600), text: "1 Hour"},
-                {value: "3", text: "3 Hours" },
+            {value: this.timeset(21600), text: "6 Hours"},
-                {value: "1m", text: "1 Month" },
+            {value: this.timeset(43200), text: "12 Hours"},
-                {value: "3", text: "Last 3 Months" },
+            {value: this.timeset(86400), text: "1 Day"},
+            {value: this.timeset(259200), text: "3 Days"},
+            {value: this.timeset(604800), text: "7 Days"},
+            {value: this.timeset(1209600), text: "14 Days"},
+            {value: this.timeset(2592000), text: "1 Month"},
+            {value: this.timeset(7776000), text: "3 Months"},
+            {value: 0, text: "All Records"},
+          ],
+          intervals: [
+            {value: "1m", text: "1/min"},
+            {value: "5m", text: "5/min"},
+            {value: "15m", text: "15/min"},
+            {value: "30m", text: "30/min" },
+            {value: "60m", text: "1/hr" },
+            {value: "180m", text: "3/hr" },
+            {value: "360m", text: "6/hr" },
+            {value: "720m", text: "12/hr" },
+            {value: "1440m", text: "1/day" },
+            {value: "4320m", text: "3/day" },
+            {value: "10080m", text: "7/day" },
           ],
             stats: {
                 total_failures: {
@@ -121,15 +167,32 @@ export default {
   beforeDestroy() {
     clearInterval(this.timer_func)
   },
-  computed: {
-      service() {
-        return this.track_service
-      }
-  },
   async created() {
       this.track_service = this.in_service
   },
     methods: {
+      timeset (seconds) {
+        return this.toUnix(this.nowSubtract(seconds))
+      },
+      openMenu(tm) {
+        if (tm === "interval") {
+          this.intervalMenu = !this.intervalMenu
+          this.dropDownMenu = false
+        } else if (tm === "timeframe") {
+          this.dropDownMenu = !this.dropDownMenu
+          this.intervalMenu = false
+        }
+      },
+      changeInterval(tm) {
+        this.interval_val = tm.value
+        this.intervalMenu = false
+        this.dropDownMenu = false
+      },
+      changeTimeframe(tm) {
+        this.timeframe_val = tm.value
+        this.dropDownMenu = false
+        this.intervalMenu = false
+      },
       async setService() {
         await this.$store.commit('setService', this.service)
         this.$router.push('/service/'+this.service.id, {props: {in_service: this.service}})
@@ -159,14 +222,14 @@ export default {
         smallText(s) {
           const incidents = s.incidents
             if (s.online) {
-                return `Checked ${this.ago(s.last_success)} ago and responded in ${this.humanTime(s.latency)}`
+                return `Checked ${this.ago(s.last_success)} ago`
             } else {
                 const last = s.last_failure
                 if (last) {
                     return `Offline, last error: ${last} ${this.ago(last.created_at)}`
                 }
-              if (!this.toUnix(s.last_success)) {
+              if (!s.online) {
-                return `Service has never been online`
+                return `Service is offline`
               }
                 return `Offline`
             }

frontend/src/components/Service/ServiceChart.vue

@@ -37,7 +37,11 @@
           visible: {
               type: Boolean,
               required: true
-          }
+          },
+        chart_timeframe: {
+          type: Object,
+          required: true
+        },
       },
       data() {
           return {
@@ -163,21 +167,22 @@
         visible: function(newVal, oldVal) {
           if (newVal && !this.showing) {
             this.showing = true
-                  this.chartHits("1h")
+            this.chartHits(this.chart_timeframe)
+          }
+        },
+        chart_timeframe: function(newVal, oldVal) {
+          if (newVal) {
+            this.chartHits(newVal)
           }
         }
       },
       methods: {
-          async chartHits(group) {
+          async chartHits(val) {
-              const start = this.toUnix(this.nowSubtract(84600 * 3))
+              const start = val.start_time
               const end = this.toUnix(new Date())
-            if (end-start < 283800) {
+              this.data = await Api.service_hits(this.service.id, start, end, val.interval, false)
-              group = "5m"
+              if (this.data === null && val.interval !== "5m") {
-            }
+                  await this.chartHits({start_time: val.start_time, interval: "5m"})
-              this.data = await Api.service_hits(this.service.id, start, end, group, false)
-
-              if (this.data === null && group !== "5m") {
-                  await this.chartHits("10m")
               }
               this.series = [{
                   name: this.service.name,