diff --git a/src/components/Scheduled/ForceRunNotification/index.scss b/src/components/Scheduled/ForceRunNotification/index.scss new file mode 100644 index 000000000..1bd369e07 --- /dev/null +++ b/src/components/Scheduled/ForceRunNotification/index.scss @@ -0,0 +1,25 @@ +/** + * Copyright 2021 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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. + */ + +.Scheduled-Force-Run-Snackbar { + & .mdc-snackbar__surface { + background-color: #051e34; // navy800 + } + i.rmwc-icon { + // !important is needed because Snackbar sets an inline color style + color: #00bfa5 !important; // successOnDark + } +} diff --git a/src/components/Scheduled/ForceRunNotification/index.tsx b/src/components/Scheduled/ForceRunNotification/index.tsx new file mode 100644 index 000000000..130c80bd4 --- /dev/null +++ b/src/components/Scheduled/ForceRunNotification/index.tsx @@ -0,0 +1,43 @@ +/** + * Copyright 2021 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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 './index.scss'; + +import { Snackbar } from '@rmwc/snackbar'; +import React from 'react'; + +export const SNACKBAR_MESSAGE = 'Force run executed'; + +interface Props { + showForceRunNotification: boolean; + setShowForceRunNotification: (value: boolean) => void; +} + +const ForceRunNotification: React.FC> = ({ + showForceRunNotification, + setShowForceRunNotification, +}) => ( + setShowForceRunNotification(false)} + message={SNACKBAR_MESSAGE} + icon={{ icon: 'check_circle', size: 'medium' }} + timeout={2000} + /> +); + +export default ForceRunNotification; diff --git a/src/components/Scheduled/List/List.tsx b/src/components/Scheduled/List/List.tsx new file mode 100644 index 000000000..d1d335125 --- /dev/null +++ b/src/components/Scheduled/List/List.tsx @@ -0,0 +1,49 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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 { Card } from '@rmwc/card'; +import { Elevation } from '@rmwc/elevation'; +import { GridCell } from '@rmwc/grid'; +import React from 'react'; + +import { useScheduled } from '../api/useScheduled'; +import { ScheduledTable } from './ScheduledTable/ScheduledTable'; +import { ZeroState } from './ZeroState'; + +export const ScheduledList: React.FC< + React.PropsWithChildren<{ + setShowForceRunNotification: (show: boolean) => void; + }> +> = ({ setShowForceRunNotification }) => { + const specs = useScheduled(); + + return ( + + + + {specs.length ? ( + + ) : ( + + )} + + + + ); +}; diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss new file mode 100644 index 000000000..93ea7e747 --- /dev/null +++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.module.scss @@ -0,0 +1,19 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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. + */ + +.scheduledTable { + border-radius: 8px; +} diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx new file mode 100644 index 000000000..1e3871bcc --- /dev/null +++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx @@ -0,0 +1,47 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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 { DataTable, DataTableBody, DataTableContent } from '@rmwc/data-table'; +import React from 'react'; + +import { ScheduledFunction } from '../../models'; +import styles from './ScheduledTable.module.scss'; +import { ScheduledTableRow } from './ScheduledTableRow'; + +export interface ScheduledTableProps { + functions: ScheduledFunction[]; + setShowForceRunNotification: (show: boolean) => void; +} + +export const ScheduledTable: React.FC< + React.PropsWithChildren +> = ({ functions, setShowForceRunNotification }) => { + return ( + + + + {functions.map((func) => ( + + ))} + + + + ); +}; diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss new file mode 100644 index 000000000..6059e11ae --- /dev/null +++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.module.scss @@ -0,0 +1,48 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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. + */ + +.infoCell { + padding: 8px 16px; +} + +.iconCell { + padding-left: 16px; + padding-right: 0px; + align-items: center; + justify-content: center; + display: flex; + height: 100px; + width: 72px; + + svg { + color: var(--mdc-theme-primary); + scale: 1.5; + } +} + +.infoHeader { + align-items: center; + display: flex; + + img { + height: 16px; + width: 16px; + } +} + +.infoCell { + width: 100%; +} diff --git a/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx new file mode 100644 index 000000000..5ee62f445 --- /dev/null +++ b/src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx @@ -0,0 +1,81 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License 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 { Button } from '@rmwc/button'; +import { DataTableCell, DataTableRow } from '@rmwc/data-table'; +import { Typography } from '@rmwc/typography'; +import React, { useCallback } from 'react'; + +import { useEmulatorConfig } from '../../../common/EmulatorConfigProvider'; +import { ScheduledIcon } from '../../../common/icons'; +import { forceRunScheduledFunction } from '../../api/internal/useScheduledFunctions'; +import { ScheduledFunction } from '../../models'; +import styles from './ScheduledTableRow.module.scss'; + +export interface ScheduledTableRowProps { + scheduledFunc: ScheduledFunction; + setShowForceRunNotification: (show: boolean) => void; +} + +export const ScheduledTableRow: React.FC< + React.PropsWithChildren +> = ({ scheduledFunc, setShowForceRunNotification }) => { + const { hostAndPort } = useEmulatorConfig('functions'); + + const handleClick = useCallback( + () => + forceRunScheduledFunction( + scheduledFunc.id, + hostAndPort, + setShowForceRunNotification + ), + [scheduledFunc, hostAndPort, setShowForceRunNotification] + ); + + return ( + + + {} + + +
+ + {scheduledFunc.name} + +
+
+ + {scheduledFunc.scheduleTrigger.schedule} + +
+
+ +