fix(#2465): Replace time selection component in data explorer download (

#2466)

ui/src/app/core-ui/core-ui.module.ts

@@ -77,6 +77,7 @@ import { SelectDataMissingValuesComponent } from './data-download-dialog/compone
 import { StatusWidgetComponent } from './status/status-widget.component';
 import { SpSimpleMetricsComponent } from './monitoring/simple-metrics/simple-metrics.component';
 import { SpSimpleLogsComponent } from './monitoring/simple-logs/simple-logs.component';
+import { DateInputComponent } from './date-input/date-input.component';
 
 @NgModule({
     imports: [
@@ -108,6 +109,7 @@ import { SpSimpleLogsComponent } from './monitoring/simple-logs/simple-logs.comp
     declarations: [
         ConfigureLabelsComponent,
         DataDownloadDialogComponent,
+        DateInputComponent,
         DisplayRecommendedPipe,
         ObjectPermissionDialogComponent,
         PipelineElementTemplateConfigComponent,
@@ -150,6 +152,7 @@ import { SpSimpleLogsComponent } from './monitoring/simple-logs/simple-logs.comp
     exports: [
         ConfigureLabelsComponent,
         DataDownloadDialogComponent,
+        DateInputComponent,
         PipelineElementTemplateConfigComponent,
         StaticAnyInputComponent,
         StaticPropertyComponent,

ui/src/app/core-ui/data-download-dialog/components/select-data/select-data-range/select-data-range.component.html

@@ -46,38 +46,19 @@ <h5>Data Range</h5>
 
     <div
         fxLayout="row"
-        fxLayoutAlign="start center"
+        fxLayoutGap="10px"
         class="ml-35"
         *ngIf="dataExportConfig.dataRangeConfiguration === 'customInterval'"
     >
-        <mat-form-field class="form-field-date">
-            <input
-                matInput
-                [owlDateTime]="dt1"
-                [owlDateTimeTrigger]="dt1"
-                [(ngModel)]="datePickerSelection"
-                [selectMode]="'range'"
-                (dateTimeChange)="setDateRangeFromSelection()"
-            />
-            <mat-icon
-                matSuffix
-                [owlDateTimeTrigger]="dt1"
-                *ngIf="
-                    dataExportConfig.dataRangeConfiguration === 'customInterval'
-                "
-            >
-                event
-            </mat-icon>
-            <mat-icon
-                matSuffix
-                class="event-color"
-                *ngIf="
-                    dataExportConfig.dataRangeConfiguration !== 'customInterval'
-                "
-            >
-                event
-            </mat-icon>
-            <owl-date-time #dt1></owl-date-time>
-        </mat-form-field>
+        <div>
+            <h5>From&nbsp;</h5>
+            <sp-date-input [(date)]="dataExportConfig.dateRange.startDate">
+            </sp-date-input>
+        </div>
+        <div>
+            <h5>To&nbsp;</h5>
+            <sp-date-input [(date)]="dataExportConfig.dateRange.endDate">
+            </sp-date-input>
+        </div>
     </div>
 </mat-radio-group>

ui/src/app/core-ui/data-download-dialog/components/select-data/select-data-range/select-data-range.component.scss

@@ -15,3 +15,7 @@
  *  limitations under the License.
  *
  */
+
+.ml-35 {
+    margin-left: 35px;
+}

ui/src/app/core-ui/data-download-dialog/components/select-data/select-data-range/select-data-range.component.ts

@@ -35,8 +35,6 @@ export class SelectDataRangeComponent implements OnInit {
     @Input() dataExplorerDataConfig: DataExplorerDataConfig;
     @Input() dataExportConfig: DataExportConfig;
 
-    datePickerSelection: Date[] = [];
-
     ngOnInit(): void {
         if (!this.dataExportConfig.dateRange) {
             this.initDateSelection();
@@ -46,19 +44,6 @@ export class SelectDataRangeComponent implements OnInit {
     initDateSelection() {
         const startDate = new Date();
         startDate.setDate(startDate.getDate() - 5);
-        this.datePickerSelection[0] = startDate;
-        this.datePickerSelection[1] = new Date();
-        this.dataExportConfig.dateRange = new DateRange(
-            this.datePickerSelection[0],
-            this.datePickerSelection[1],
-        );
-        this.setDateRangeFromSelection();
-    }
-
-    private setDateRangeFromSelection() {
-        this.dataExportConfig.dateRange = new DateRange(
-            this.datePickerSelection[0],
-            this.datePickerSelection[1],
-        );
+        this.dataExportConfig.dateRange = new DateRange(startDate, new Date());
     }
 }

ui/src/app/data-explorer/data-explorer.module.ts

@@ -80,7 +80,6 @@ import { NgxEchartsModule } from 'ngx-echarts';
 import { ImageViewerComponent } from './components/widgets/image/image-viewer/image-viewer.component';
 import { ImageBarComponent } from './components/widgets/image/image-bar/image-bar.component';
 import { ImageBarPreviewComponent } from './components/widgets/image/image-bar/image-bar-preview/image-bar-preview.component';
-import { DateInputComponent } from './components/date-input/date-input.component';
 import { SpEchartsWidgetComponent } from './components/widgets/base/echarts-widget.component';
 import { SpValueHeatmapWidgetConfigComponent } from './components/widgets/value-heatmap/config/value-heatmap-chart-widget-config.component';
 import { SpHistogramChartWidgetConfigComponent } from './components/widgets/histogram/config/histogram-chart-widget-config.component';
@@ -176,7 +175,6 @@ import { SpVisualizationConfigOuterComponent } from './components/widgets/utils/
         DataExplorerVisualisationSettingsComponent,
         WidgetDirective,
         TooMuchDataComponent,
-        DateInputComponent,
         SpEchartsWidgetComponent,
         SpValueHeatmapWidgetConfigComponent,
         SpHistogramChartWidgetConfigComponent,