-
Notifications
You must be signed in to change notification settings - Fork 127
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added source node configuration logic
- Loading branch information
1 parent
efcfc12
commit a17ce4e
Showing
24 changed files
with
509 additions
and
311 deletions.
There are no files selected for viewing
194 changes: 194 additions & 0 deletions
194
frontend/src/components/ConfigurationDrawer/SourceNode/GCSConfigurationDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,194 @@ | ||
import React, { useState, useCallback } from "react"; | ||
import { Select } from "@/subframe/components/Select"; | ||
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion"; | ||
import { Button } from "@/subframe/components/Button"; | ||
import { TextField } from "@/subframe/components/TextField"; | ||
import { PropertiesRow } from "../../../subframe/components/PropertiesRow"; | ||
import { Switch } from "../../../subframe/components/Switch"; | ||
import { SourceConfigurationDrawerType } from "@/types"; | ||
|
||
// interface GCSConfigurationDrawer { | ||
|
||
// } | ||
|
||
export function GCSConfigurationDrawer() { | ||
return ( | ||
<div> | ||
<PropertiesAccordion title="Authentication"> | ||
<div className="flex flex-col items-start gap-4"> | ||
<span className="text-caption font-caption text-default-font"> | ||
In order to access your Google Cloud Storage, you'll need to set up | ||
a service account and upload the credentials as a JSON file. Learn more | ||
here. | ||
</span> | ||
<div className="flex flex-col items-start gap-2"> | ||
<Button | ||
variant="neutral-secondary" | ||
icon="FeatherUpload" | ||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}} | ||
> | ||
Upload | ||
</Button> | ||
<span className="text-caption font-caption text-subtext-color"> | ||
Upload your service account credentials as a JSON file. | ||
</span> | ||
</div> | ||
</div> | ||
</PropertiesAccordion> | ||
<PropertiesAccordion title="File Location"> | ||
<div className="flex flex-col items-start gap-4"> | ||
<TextField | ||
disabled={false} | ||
error={false} | ||
variant="outline" | ||
label="Bucket Name" | ||
helpText={ | ||
'The unique name of the GCS bucket to connect to, e.g. "project-data-storage".' | ||
} | ||
icon={null} | ||
iconRight={null} | ||
> | ||
<TextField.Input | ||
placeholder="" | ||
value="" | ||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}} | ||
/> | ||
</TextField> | ||
<TextField | ||
disabled={false} | ||
error={false} | ||
variant="outline" | ||
label="File Name" | ||
helpText="The filename or path of the document to retrieve." | ||
icon={null} | ||
iconRight={null} | ||
> | ||
<TextField.Input | ||
placeholder="" | ||
value="" | ||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}} | ||
/> | ||
</TextField> | ||
</div> | ||
<div className="flex w-full items-center gap-2 pt-4"> | ||
<Button | ||
variant="neutral-primary" | ||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}} | ||
> | ||
Test Connection | ||
</Button> | ||
</div> | ||
</PropertiesAccordion> | ||
<PropertiesAccordion title="Sample Data"> | ||
<div className="flex flex-col items-start gap-2"> | ||
<Button | ||
variant="neutral-secondary" | ||
icon="FeatherUpload" | ||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}} | ||
> | ||
Upload | ||
</Button> | ||
<span className="text-caption font-caption text-subtext-color"> | ||
Upload a CSV file to test this node with sample input data. | ||
</span> | ||
</div> | ||
</PropertiesAccordion> | ||
<PropertiesAccordion title="Run Schedule"> | ||
<div className="flex flex-col items-start gap-4"> | ||
<span className="text-caption font-caption text-default-font"> | ||
By default, a node will immediately run after all its input nodes have | ||
completed running. Setting a schedule delays running until the specified | ||
time. | ||
</span> | ||
<div className="flex w-full items-center gap-2"> | ||
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font"> | ||
Enable Schedule | ||
</span> | ||
<Switch checked={false} onCheckedChange={(checked: boolean) => {}} /> | ||
</div> | ||
<div className="flex w-full items-center justify-end gap-2"> | ||
<Button | ||
className="h-8 grow shrink-0 basis-0" | ||
variant="neutral-secondary" | ||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}} | ||
> | ||
Crontab | ||
</Button> | ||
<Button | ||
className="h-8 grow shrink-0 basis-0" | ||
icon="FeatherCheck" | ||
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}} | ||
> | ||
Basic | ||
</Button> | ||
</div> | ||
<div className="flex w-full items-center gap-2"> | ||
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font"> | ||
Run Frequency | ||
</span> | ||
<Select | ||
variant="filled" | ||
label="" | ||
placeholder="Weekly" | ||
helpText="" | ||
value="" | ||
onValueChange={(value: string) => {}} | ||
> | ||
<Select.Item value="5 mins">5 mins</Select.Item> | ||
<Select.Item value="30 mins">30 mins</Select.Item> | ||
<Select.Item value="1 hour">1 hour</Select.Item> | ||
</Select> | ||
</div> | ||
<div className="flex w-full items-center gap-2"> | ||
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font"> | ||
Day of Week | ||
</span> | ||
<Select | ||
variant="filled" | ||
label="" | ||
placeholder="Thursday" | ||
helpText="" | ||
value="" | ||
onValueChange={(value: string) => {}} | ||
> | ||
<Select.Item value="5 mins">5 mins</Select.Item> | ||
<Select.Item value="30 mins">30 mins</Select.Item> | ||
<Select.Item value="1 hour">1 hour</Select.Item> | ||
</Select> | ||
</div> | ||
<div className="flex w-full items-center gap-2"> | ||
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font"> | ||
Hour of Day | ||
</span> | ||
<Select | ||
variant="filled" | ||
label="" | ||
placeholder="12:00:00 UTC" | ||
helpText="" | ||
value="" | ||
onValueChange={(value: string) => {}} | ||
> | ||
<Select.Item value="5 mins">5 mins</Select.Item> | ||
<Select.Item value="30 mins">30 mins</Select.Item> | ||
<Select.Item value="1 hour">1 hour</Select.Item> | ||
</Select> | ||
</div> | ||
</div> | ||
</PropertiesAccordion> | ||
<PropertiesRow text="On Failure"> | ||
<Select | ||
variant="filled" | ||
label="" | ||
placeholder="Retry" | ||
helpText="" | ||
value="" | ||
onValueChange={(value: string) => {}} | ||
> | ||
<Select.Item value="5 mins">5 mins</Select.Item> | ||
<Select.Item value="Notify">Notify</Select.Item> | ||
<Select.Item value="Ignore">Ignore</Select.Item> | ||
</Select> | ||
</PropertiesRow> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.