feat: scheduled emulator UI

src/components/Scheduled/List/List.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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<unknown>> = () => {
+  const specs = useScheduled();
+
+  return (
+    <GridCell span={12} className="Scheduled">
+      <Elevation z="2" wrap>
+        <Card>
+          {specs.length ? (
+            <ScheduledTable functions={specs} />
+          ) : (
+            <ZeroState></ZeroState>
+          )}
+        </Card>
+      </Elevation>
+    </GridCell>
+  );
+};

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;
+}

src/components/Scheduled/List/ScheduledTable/ScheduledTable.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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[];
+}
+
+export const ScheduledTable: React.FC<
+  React.PropsWithChildren<ScheduledTableProps>
+> = ({ functions }) => {
+  return (
+    <DataTable className={styles.scheduledTable}>
+      <DataTableContent>
+        <DataTableBody>
+          {functions.map((func) => (
+            <ScheduledTableRow key={func.id} scheduledFunc={func} />
+          ))}
+        </DataTableBody>
+      </DataTableContent>
+    </DataTable>
+  );
+};

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%;
+}

src/components/Scheduled/List/ScheduledTable/ScheduledTableRow.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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;
+}
+
+export const ScheduledTableRow: React.FC<
+  React.PropsWithChildren<ScheduledTableRowProps>
+> = ({ scheduledFunc }) => {
+  const { hostAndPort } = useEmulatorConfig('functions');
+
+  const handleClick = useCallback(
+    () => forceRunScheduledFunction(scheduledFunc.id, hostAndPort),
+    [scheduledFunc, hostAndPort]
+  );
+
+  return (
+    <DataTableRow key={scheduledFunc.id} className={styles.scheduledRow}>
+      <DataTableCell className={`${styles.iconCell} iconCell`}>
+        {<ScheduledIcon theme="secondary" />}
+      </DataTableCell>
+      <DataTableCell className={styles.infoCell}>
+        <div className={styles.infoHeader}>
+          <Typography
+            use="body1"
+            theme="textPrimaryOnBackground"
+            className="scheduledName"
+          >
+            {scheduledFunc.name}
+          </Typography>
+        </div>
+        <div>
+          <Typography use="body2" theme="textSecondaryOnBackground">
+            {scheduledFunc.scheduleTrigger.schedule}
+          </Typography>
+        </div>
+      </DataTableCell>
+      <DataTableCell className={`${styles.actionCell} actionCell`}>
+        <Button
+          onClick={() => {
+            handleClick.call(scheduledFunc.id);
+          }}
+          className={styles.manageButton}
+          label={<div className={styles.manageButtonText}>Force run</div>}
+          aria-label={'Force run'}
+        />
+      </DataTableCell>
+    </DataTableRow>
+  );
+};

src/components/Scheduled/List/ZeroState.module.scss

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+.wrapper {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}

src/components/Scheduled/List/ZeroState.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { Typography } from '@rmwc/typography';
+import React from 'react';
+
+import styles from './ZeroState.module.scss';
+
+export const ZeroState: React.FC<React.PropsWithChildren<unknown>> = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Typography
+        use="body2"
+        className={styles.noResultsWrapper}
+        theme="textSecondaryOnBackground"
+      >
+        No scheduled functions for this project yet
+      </Typography>
+    </div>
+  );
+};

src/components/Scheduled/api/internal/useScheduledFunctions.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 useSwr from 'swr';
+
+import { useEmulatorConfig } from '../../../common/EmulatorConfigProvider';
+import { ScheduledFunction } from '../../models';
+
+export function useScheduledFunctions(): ScheduledFunction[] {
+  const config = useEmulatorConfig('functions');
+
+  const fetcher = async () => {
+    const url = `//${config.hostAndPort}/scheduled`;
+    console.log(`Fetching scheduled from ${url}`);
+    const response = await fetch(url);
+    const json = await response.json();
+    return json.scheduled;
+  };
+
+  const functions = useSwr(`list_scheduled`, fetcher, { suspense: true }).data;
+
+  return functions;
+}
+
+export function forceRunScheduledFunction(
+  triggerId: string,
+  hostAndPort: string
+) {
+  const url = `//${hostAndPort}/force_run/${triggerId}`;
+
+  fetch(url, { method: 'POST' })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log(data);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}

src/components/Scheduled/api/useScheduled.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+
+import { ScheduledFunction } from '../models';
+
+export const ScheduledContext = createContext<ScheduledFunction[]>([]);
+
+export const ScheduledProvider: React.FC<
+  React.PropsWithChildren<{
+    scheduled: ScheduledFunction[];
+  }>
+> = ({ children, scheduled }) => {
+  return (
+    <ScheduledContext.Provider value={scheduled}>
+      {children}
+    </ScheduledContext.Provider>
+  );
+};
+
+export function useScheduled() {
+  return useContext(ScheduledContext);
+}