Discover: sidebarFilter - fix Timeframes Clear button.

cypress/e2e/filterFunnel.cy.js

@@ -191,17 +191,57 @@ describe('Save Log and Filter', ()=>{
   //   });
   // });
 
-  it('Trace', () => {
-    // select radio
-    cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
-    cy.wait(3000);
+  // it('Trace', () => {
+  //   // select radio
+  //   cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
+  //   cy.wait(3000);
 
-    // click on Trace Number to show a table
-    cy.contains('td', '#1').click();
-    cy.wait(1000);
-    cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
-    cy.wait(1000);
-    cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
+  //   // click on Trace Number to show a table
+  //   cy.contains('td', '#1').click();
+  //   cy.wait(1000);
+  //   cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
+  //   cy.wait(1000);
+  //   cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
+
+  //   // Clear selected item
+  //   cy.get('.p-slider-handle:nth-child(2)')
+  //     .click()
+  //     .trigger('mousedown', { which: 1 })
+  //     .trigger('mousemove', { clientX: 250 })
+  //     .xpath('//span[contains(@class, "p-slider-handle")][2]')
+  //     .click()
+  //     .trigger('mouseup');
+  //   cy.contains('button', 'Clear').click();
+  //   cy.get('.v-toast__text').should('contain', 'Reset Success');
+  //   cy.wait(3000);
+
+  //   // selected item
+  //   cy.get('.p-slider-handle:nth-child(2)')
+  //     .click()
+  //     .trigger('mousedown', { which: 1 })
+  //     .trigger('mousemove', { clientX: 250 })
+  //     .xpath('//span[contains(@class, "p-slider-handle")][2]')
+  //     .click()
+  //     .trigger('mouseup');
+  //   cy.contains('button', 'Apply').click();
+  //   cy.contains('button', 'Apply').click();
+  //   cy.get('#tabFunnel').click();
+  //   cy.contains('p', 'Trace');
+  //   cy.contains('button', 'Apply All').click();
+
+  //   // make sure create map again.
+  //   cy.get('header').click();
+  //   cy.get('#iconState').click();
+  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
+  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+  //   });
+  // });
+
+  it('Timeframes', () => {
+    // select radio
+    cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace'
+    cy.wait(3000);
 
     // Clear selected item
     cy.get('.p-slider-handle:nth-child(2)')

src/components/Discover/Filter/Timeframes.vue

@@ -69,9 +69,9 @@ export default{
     timeFrameStartEnd: function() {
       let start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:ss');
       let end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:ss');
-      this.selectTimeFrame = [start ,end]; // 傳給後端的資料
+      this.selectTimeFrame = [start, end]; // 傳給後端的資料
 
-      return [start ,end];
+      return [start, end];
     },
     // 找出 slidrData，時間格式:毫秒時間戳
     sliderData: function() {
@@ -129,6 +129,17 @@ export default{
       return data;
     },
   },
+  watch:{
+    selectTimeFrame(newValue, oldValue) {
+      console.log(newValue); // []
+      if(newValue.length === 0) {
+        this.startTime = new Date(getMoment(this.filterTimeframe.x_axis.min).format());
+        this.endTime = new Date(getMoment(this.filterTimeframe.x_axis.max).format());
+        this.selectArea = [0, this.selectRange];
+        this.resizeMask(this.chart);
+      }
+    }
+  },
   methods: {
     resizeMask(chart) {
       let from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);

src/components/Discover/SidebarFilter.vue

@@ -383,7 +383,7 @@ export default {
       this.isEndSelected = null;
       this.isActAllTask = true;
       // Timeframes
-      this.timeFrameStartEnd = null;
+      this.selectTimeFrame = [];
       // Trace
       if (this.$refs.filterTraceView) {
         this.$refs.filterTraceView.showTraceId = null;