diff --git a/public/components/create_report/create_report.js b/public/components/create_report/create_report.js
deleted file mode 100644
index 4153bc6a..00000000
--- a/public/components/create_report/create_report.js
+++ /dev/null
@@ -1,412 +0,0 @@
-/*
- * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License").
- * You may not use this file except in compliance with the License.
- * A copy of the License is located at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * or in the "license" file accompanying this file. This file is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
- * express or implied. See the License for the specific language governing
- * permissions and limitations under the License.
- */
-
-import React, { useState } from 'react';
-import {
- EuiButtonEmpty,
- EuiComboBox,
- EuiDatePicker,
- EuiFieldText,
- EuiSelect,
- EuiFlexGroup,
- EuiFlexItem,
- EuiFormRow,
- EuiButton,
- EuiPage,
- EuiPageHeader,
- EuiTitle,
- EuiPageBody,
- EuiPageContent,
- EuiPageContentBody,
- EuiInMemoryTable,
- EuiHorizontalRule,
- EuiSpacer,
- EuiSuggest,
- EuiTextArea,
- EuiRadioGroup,
- } from '@elastic/eui';
-import { htmlIdGenerator } from '@elastic/eui/lib/services';
-import moment from 'moment';
-import { ReportSettings } from './report_settings/report_settings';
-import { ReportDelivery } from './delivery/delivery';
-import { ReportSchedule } from './schedule/schedule';
-
-const idPrefix = htmlIdGenerator()();
-
-export class CreateReport extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- reportSettingsRadioIdSelected: '',
- reportSettingsSetRadioIdSelected: `${idPrefix}1`,
- reportSettingsDashboard: '',
- deliveryEmailSubject: "",
- deliveryEmailBody: "",
- scheduleRadioFutureDateSelected: false,
- scheduleRadioRecurringSelected: false,
- scheduleUTCOffset: '',
- scheduleRecurringFrequency: 'Daily',
- scheduleRecurringDailyTime: '',
- scheduleRecurringUTCOffset: '',
- scheduleRecurringWeeklyDayOfWeek: 'Monday',
- scheduleRecurringStartDate: moment(),
- };
- }
-
- onChangeReportSettingsDashboard = (e) => {
- this.setState({
- reportSettingsDashboard: e.target.value
- });
- }
-
- onChangeDeliveryEmailSubject = (e) => {
- this.setState({
- deliveryEmailSubject: e.target.value
- });
- }
-
- onChangeDeliveryEmailBody = (e) => {
- this.setState({
- deliveryEmailBody: e.target.value
- });
- }
-
- componentDidMount() {
- const { httpClient } = this.props;
- }
-
- ReportSettingsDashboardSelect = () => {
- const description = 'this is a short description';
- const sampleItems = [
- {
- type: { iconType: 'kqlField', color: 'tint4' },
- label: 'Flight Dashboard Data',
- description: description,
- },
- {
- type: { iconType: 'kqlValue', color: 'tint0' },
- label: 'E-commerce data',
- description: description,
- },
- {
- type: { iconType: 'kqlSelector', color: 'tint2' },
- label: 'Ticket data',
- description: description,
- },
- ];
-
- const [status, setStatus] = useState('unchanged');
-
- const onItemClick = item => {
- alert(`Item [${item.label}] was clicked`);
- };
-
- return (
-
- {} }
- onItemClick={this.onChangeReportSettingsDashboard}
- placeholder="Start typing to display suggestions"
- suggestions={sampleItems}
- />
-
- );
- }
-
- ScheduleRadio = () => {
- const radios = [
- {
- id: `${idPrefix}7`,
- label: 'Now',
- },
- {
- id: `${idPrefix}8`,
- label: 'Future Date',
- },
- {
- id: `${idPrefix}9`,
- label: 'Recurring',
- },
- ];
-
- const [radioIdSelected, setRadioIdSelected] = useState(`${idPrefix}7`);
-
- const onChangeSettingsRadio = optionId => {
- setRadioIdSelected(optionId);
- console.log(optionId)
- if (optionId === `${idPrefix}7`) {
- this.setState({
- scheduleRadioFutureDateSelected: false
- });
- this.setState({
- scheduleRadioRecurringSelected: false
- });
- }
- else if (optionId === `${idPrefix}8`) {
- this.setState({
- scheduleRadioFutureDateSelected: true
- });
- this.setState({
- scheduleRadioRecurringSelected: false
- });
- }
- else if (optionId === `${idPrefix}9`) {
- this.setState({
- scheduleRadioFutureDateSelected: false
- });
- this.setState({
- scheduleRadioRecurringSelected: true
- });
- }
- };
-
- return (
- onChangeSettingsRadio(id)}
- name="scheduleRadioGroup"
- legend={{
- children: This is a legend for a radio group,
- }}
- />
- );
- };
-
-
- timezone_options = [
- { value: -4, text: 'EDT -04:00' },
- { value: -5, text: 'CDT -05:00' },
- { value: -6, text: 'MDT -06:00' },
- { value: -7, text: 'MST/PDT -07:00' },
- { value: -8, text: 'AKDT -08:00' },
- { value: -10, text: 'HST -10:00' }
- ];
-
- ScheduleFutureDatePicker = () => {
- const [startDate, setStartDate] = useState(moment());
-
- const handleChangeScheduleDate = date => {
- setStartDate(date);
- };
-
- const onSelectOffsetChange = e => {
- this.setState({
- scheduleUTCOffset: parseInt(e.target.value, 10),
- });
- };
-
- return (
-
-
-
-
-
-
-
-
- );
- }
-
- ScheduleRecurringDailyInput = () => {
- const [startDate, setStartDate] = useState(moment());
-
- const handleTimeChange = date => {
- setStartDate(date);
- this.setState({
- scheduleRecurringStartDate: date
- });
- };
-
- const onSelectOffsetChange = e => {
- this.setState({
- scheduleRecurringUTCOffset: parseInt(e.target.value, 10),
- });
- };
-
- return (
-
-
-
-
-
-
-
-
- );
- }
-
- ScheduleRecurringWeeklyInput = () => {
- const recurringDayOptions = [
- { value: 'Monday', text: 'Monday' },
- { value: 'Tuesday', text: 'Tuesday' },
- { value: 'Wednesday', text: 'Wednesday' },
- { value: 'Thursday', text: 'Thursday' },
- { value: 'Friday', text: 'Friday' },
- { value: 'Saturday', text: 'Saturday' },
- { value: 'Sunday', text: 'Sunday' },
- ];
-
- const onChangeDayOfWeek = (e) => {
- this.setState({
- scheduleRecurringWeeklyDayOfWeek: e.target.value
- });
- }
-
- return (
-
-
-
-
-
-
- );
- }
-
- ScheduleRecurringMonthlyInput = () => {
- const handleChangeMonthly = (date) => {
- this.setState({
- scheduleRecurringStartDate: date
- });
- }
- return (
-
-
-
-
-
- );
- }
-
- ScheduleRecurringFrequency = () => {
- const options = [
- { value: 'Daily', text: 'Daily' },
- { value: 'Weekly', text: 'Weekly' },
- { value: 'Monthly', text: 'Monthly' },
- ];
-
- const onChangeScheduleRecurringFrequency = e => {
- this.setState({
- scheduleRecurringFrequency: e.target.value
- });
- }
-
- const daily = (this.state.scheduleRecurringFrequency == 'Daily')
- ?
- : null;
-
- const weekly = (this.state.scheduleRecurringFrequency == 'Weekly')
- ?
- : null;
-
- const monthly = (this.state.scheduleRecurringFrequency == 'Monthly')
- ?
- : null;
-
- return (
-
-
-
-
- {daily}
- {weekly}
- {monthly}
-
- );
- }
-
- render() {
- const scheduleFutureDateCalendar = this.state.scheduleRadioFutureDateSelected
- ?
- : null;
-
- const scheduleRecurringFrequencySelect = this.state.scheduleRadioRecurringSelected
- ?
- : null;
- return (
-
-
-
- Create Report
-
-
-
-
-
-
-
-
-
- {window.location.assign('opendistro-kibana-reports#/')}}
- >
- Cancel
-
-
-
- Create
-
-
-
-
- );
- }
-}
\ No newline at end of file
diff --git a/public/components/create_report/create_report.tsx b/public/components/create_report/create_report.tsx
new file mode 100644
index 00000000..7b841919
--- /dev/null
+++ b/public/components/create_report/create_report.tsx
@@ -0,0 +1,312 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+ EuiButtonEmpty,
+ EuiDatePicker,
+ EuiSelect,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiButton,
+ EuiPage,
+ EuiTitle,
+ EuiPageBody,
+ EuiSpacer,
+ EuiRadioGroup,
+ } from '@elastic/eui';
+import { htmlIdGenerator } from '@elastic/eui/lib/services';
+import moment, { Moment } from 'moment';
+import { ReportSettings } from './report_settings/report_settings';
+import { ReportDelivery } from './delivery/delivery';
+import { ReportSchedule } from './schedule/schedule';
+
+const idPrefix = htmlIdGenerator()();
+
+const recurringDayOptions = [
+ { value: 'Monday', text: 'Monday' },
+ { value: 'Tuesday', text: 'Tuesday' },
+ { value: 'Wednesday', text: 'Wednesday' },
+ { value: 'Thursday', text: 'Thursday' },
+ { value: 'Friday', text: 'Friday' },
+ { value: 'Saturday', text: 'Saturday' },
+ { value: 'Sunday', text: 'Sunday' },
+];
+
+const timezone_options = [
+ { value: -4, text: 'EDT -04:00' },
+ { value: -5, text: 'CDT -05:00' },
+ { value: -6, text: 'MDT -06:00' },
+ { value: -7, text: 'MST/PDT -07:00' },
+ { value: -8, text: 'AKDT -08:00' },
+ { value: -10, text: 'HST -10:00' }
+];
+
+function ScheduleRecurringFrequency() {
+ const [scheduleRecurringFrequency, setScheduleRecurringFrequency] = useState('Daily');
+ const [scheduleRecurringStartDate, setScheduleRecurringStartDate] = useState(moment());
+ const [scheduleRecurringUTCOffset, setScheduleRecurringUTCOffset] = useState(0);
+ const [scheduleRecurringWeeklyDayOfWeek, setScheduleRecurringWeeklyDayOfWeek] = useState('Monday');
+
+ const options = [
+ { value: 'Daily', text: 'Daily' },
+ { value: 'Weekly', text: 'Weekly' },
+ { value: 'Monthly', text: 'Monthly' },
+ ];
+
+ const onChangeScheduleRecurringFrequency = e => {
+ setScheduleRecurringFrequency(e.target.value);
+ }
+
+ const ScheduleRecurringDailyInput = () => {
+ const handleTimeChange = date => {
+ setScheduleRecurringStartDate(date);
+ };
+
+ const onSelectOffsetChange = e => {
+ setScheduleRecurringUTCOffset(parseInt(e.target.value, 10));
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const ScheduleRecurringWeeklyInput = () => {
+ const onChangeDayOfWeek = (e: React.MouseEvent<>) => {
+ setScheduleRecurringWeeklyDayOfWeek(e.target.value);
+ }
+
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ const ScheduleRecurringMonthlyInput = () => {
+ const handleChangeMonthly = (date) => {
+ setScheduleRecurringStartDate(date);
+ }
+ return (
+
+
+
+
+
+ );
+ }
+
+ let frequency = null;
+ switch(scheduleRecurringFrequency) {
+ case 'Daily':
+ frequency=
+ break;
+ case 'Weekly':
+ frequency=
+ break;
+ case 'Monthly':
+ frequency=
+ break;
+ }
+
+ return (
+
+
+
+
+ {frequency}
+
+ );
+}
+
+function ScheduleFutureDatePicker() {
+ const [scheduleFutureDate, setScheduleFutureDate] = useState(moment());
+ const [scheduleUTCOffset, setScheduleUTCOffset] = useState(0);
+
+ const handleChangeScheduleDate = date => {
+ setScheduleFutureDate(date);
+ };
+
+ const onSelectOffsetChange = e => {
+ setScheduleUTCOffset(parseInt(e.target.value, 10));
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function CreateReport() {
+ // todo: simplify useState
+ const [reportSettingsDashboard, setReportSettingsDashboard] = useState('');
+ const [deliveryEmailSubject, setDeliveryEmailSubject] = useState('');
+ const [deliveryEmailBody, setDeliveryEmailBody] = useState('');
+ const [scheduleRadioFutureDateSelected, setScheduleRadioFutureDateSelected] = useState(false);
+ const [scheduleRadioRecurringSelected, setScheduleRadioRecurringSelected] = useState(false);
+ const [scheduleRadioIdSelected, setScheduleRadioIdSelected] = useState(`${idPrefix}7`);
+
+ const onChangeReportSettingsDashboard = (e) => {
+ setReportSettingsDashboard(e.target.value);
+ }
+
+ const onChangeDeliveryEmailSubject = (e) => {
+ setDeliveryEmailSubject(e.target.value);
+ }
+
+ const onChangeDeliveryEmailBody = (e) => {;
+ setDeliveryEmailBody(e.target.value);
+ }
+
+ const onChangeScheduleSettingsRadio = optionId => {
+ setScheduleRadioIdSelected(optionId);
+ if (optionId === `${idPrefix}7`) {
+ setScheduleRadioFutureDateSelected(false);
+ setScheduleRadioRecurringSelected(false);
+ }
+ else if (optionId === `${idPrefix}8`) {
+ setScheduleRadioFutureDateSelected(true);
+ setScheduleRadioRecurringSelected(false);
+ }
+ else if (optionId === `${idPrefix}9`) {
+ setScheduleRadioFutureDateSelected(false);
+ setScheduleRadioRecurringSelected(true);
+ }
+ };
+
+ const ScheduleRadio = () => {
+ const radios = [
+ {
+ id: `${idPrefix}7`,
+ label: 'Now',
+ },
+ {
+ id: `${idPrefix}8`,
+ label: 'Future Date',
+ },
+ {
+ id: `${idPrefix}9`,
+ label: 'Recurring',
+ },
+ ];
+ return (
+
+ );
+ };
+
+ const scheduleFutureDateCalendar = scheduleRadioFutureDateSelected
+ ?
+ : null;
+
+ const scheduleRecurringFrequencySelect = scheduleRadioRecurringSelected
+ ?
+ : null;
+
+ return (
+
+
+
+ Create Report
+
+
+
+
+
+
+
+
+
+ {window.location.assign('opendistro-kibana-reports#/')}}
+ >
+ Cancel
+
+
+
+ Create
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/public/components/create_report/delivery/delivery.js b/public/components/create_report/delivery/delivery.tsx
similarity index 92%
rename from public/components/create_report/delivery/delivery.js
rename to public/components/create_report/delivery/delivery.tsx
index 75521749..26aa06aa 100644
--- a/public/components/create_report/delivery/delivery.js
+++ b/public/components/create_report/delivery/delivery.tsx
@@ -13,24 +13,16 @@
* permissions and limitations under the License.
*/
-import React, { useState } from 'react';
+import React from 'react';
import {
EuiFieldText,
EuiFormRow,
- EuiButton,
- EuiPage,
EuiPageHeader,
EuiTitle,
- EuiPageBody,
EuiPageContent,
EuiPageContentBody,
- EuiInMemoryTable,
EuiHorizontalRule,
- EuiSpacer,
- EuiSuggest,
EuiTextArea,
- EuiRadioGroup,
- EuiComboBox,
} from '@elastic/eui';
import { DeliveryRecipientsBox } from './delivery_recipients_box';
import { DeliveryChannelRadio } from './delivery_channel_radio';
diff --git a/public/components/create_report/delivery/delivery_channel_radio.js b/public/components/create_report/delivery/delivery_channel_radio.tsx
similarity index 94%
rename from public/components/create_report/delivery/delivery_channel_radio.js
rename to public/components/create_report/delivery/delivery_channel_radio.tsx
index b83690aa..f4c712e4 100644
--- a/public/components/create_report/delivery/delivery_channel_radio.js
+++ b/public/components/create_report/delivery/delivery_channel_radio.tsx
@@ -51,9 +51,6 @@ const DeliveryChannelRadio = () => {
idSelected={radioIdSelected}
onChange={handleChangeDeliveryChannel}
name="deliveryChannelRadioGroup"
- legend={{
- children: This is a legend for a radio group,
- }}
/>
);
};
diff --git a/public/components/create_report/delivery/delivery_recipients_box.js b/public/components/create_report/delivery/delivery_recipients_box.tsx
similarity index 100%
rename from public/components/create_report/delivery/delivery_recipients_box.js
rename to public/components/create_report/delivery/delivery_recipients_box.tsx
diff --git a/public/components/create_report/index.js b/public/components/create_report/index.ts
similarity index 100%
rename from public/components/create_report/index.js
rename to public/components/create_report/index.ts
diff --git a/public/components/create_report/report_settings/report_settings.js b/public/components/create_report/report_settings/report_settings.tsx
similarity index 100%
rename from public/components/create_report/report_settings/report_settings.js
rename to public/components/create_report/report_settings/report_settings.tsx
diff --git a/public/components/create_report/schedule/schedule.js b/public/components/create_report/schedule/schedule.tsx
similarity index 100%
rename from public/components/create_report/schedule/schedule.js
rename to public/components/create_report/schedule/schedule.tsx