Web console: Fix missing include future flag for byPeriod rules (#8859)

* Add missing button for include future, and handle logic for default true case

* Remove duplicate go to tasks button

* Fix lgtm issue

* Revert changes on old console

* Made changes based on PR comments

web-console/src/components/rule-editor/rule-editor.scss

@@ -30,4 +30,11 @@
       flex: 1;
     }
   }
+
+  .by-period {
+    display: flex;
+    .bp3-input-group {
+      padding-right: 15px;
+    }
+  }
 }

web-console/src/components/rule-editor/rule-editor.tsx

@@ -25,6 +25,7 @@ import {
   HTMLSelect,
   InputGroup,
   NumericInput,
+  Switch,
   TagInput,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
@@ -139,7 +140,6 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
 
   function renderColocatedDataSources() {
     const { rule, onChange } = props;
-
     return (
       <FormGroup label="Colocated datasources:">
         <TagInput
@@ -150,7 +150,6 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
       </FormGroup>
     );
   }
-
   return (
     <div className="rule-editor">
       <div className="title">
@@ -193,6 +192,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
                 <option value="ByInterval">by interval</option>
               </HTMLSelect>
               {ruleTimeType === 'ByPeriod' && (
+                <div className={`by-period`}>
                   <InputGroup
                     value={rule.period || ''}
                     onChange={(e: any) =>
@@ -200,6 +200,22 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
                     }
                     placeholder="P1D"
                   />
+                  <Switch
+                    large
+                    checked={rule.includeFuture !== undefined ? rule.includeFuture : true}
+                    label={`Include future`}
+                    onChange={() => {
+                      onChange(
+                        RuleUtil.changeIncludeFuture(
+                          rule,
+                          rule.includeFuture !== undefined
+                            ? (!rule.includeFuture as boolean)
+                            : false,
+                        ),
+                      );
+                    }}
+                  />
+                </div>
               )}
               {ruleTimeType === 'ByInterval' && (
                 <InputGroup

web-console/src/utils/load-rule.ts

@@ -29,6 +29,7 @@ export interface Rule {
     | 'broadcastByPeriod';
   interval?: string;
   period?: string;
+  includeFuture?: boolean;
   tieredReplicants?: Record<string, number>;
   colocatedDataSources?: string[];
 }
@@ -37,11 +38,23 @@ export type LoadType = 'load' | 'drop' | 'broadcast';
 export type TimeType = 'Forever' | 'ByInterval' | 'ByPeriod';
 
 export class RuleUtil {
+  static shouldIncludeFuture(rule: Rule): boolean {
+    if (rule.includeFuture !== false) {
+      return (
+        rule.type === 'loadByPeriod' ||
+        rule.type === 'dropByPeriod' ||
+        rule.type === 'broadcastByPeriod'
+      );
+    }
+    return false;
+  }
+
   static ruleToString(rule: Rule): string {
     return (
       rule.type +
       (rule.period ? `(${rule.period})` : '') +
-      (rule.interval ? `(${rule.interval})` : '')
+      (rule.interval ? `(${rule.interval})` : '') +
+      (RuleUtil.shouldIncludeFuture(rule) ? `(includeFuture)` : '')
     );
   }
 
@@ -75,6 +88,10 @@ export class RuleUtil {
     return Object.assign({}, rule, { period });
   }
 
+  static changeIncludeFuture(rule: Rule, includeFuture: boolean): Rule {
+    return Object.assign({}, rule, { includeFuture });
+  }
+
   static changeInterval(rule: Rule, interval: string): Rule {
     return Object.assign({}, rule, { interval });
   }

web-console/src/views/datasource-view/datasource-view.tsx

@@ -642,11 +642,6 @@ GROUP BY 1`;
       ];
     } else {
       return goToActions.concat([
-        {
-          icon: IconNames.GANTT_CHART,
-          title: 'Go to tasks',
-          onAction: () => goToTask(datasource),
-        },
         {
           icon: IconNames.AUTOMATIC_UPDATES,
           title: 'Edit retention rules',