Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Condense if/elif/else structure for header/body sections
Browse files Browse the repository at this point in the history
@JosephVolosin
JosephVolosin committed Jan 29, 2025
1 parent 363e2bf commit 7263e08
Showing 1 changed file with 260 additions and 280 deletions.
540 changes: 260 additions & 280 deletions src/components/external-source/ExternalTypeManager.svelte
View file
Original file line number Diff line number Diff line change
@@ -179,10 +179,6 @@
$: hasCreateExternalEventTypePermission = featurePermissions.externalEventType.canCreate(user);
$: hasCreationPermission = hasCreateExternalEventTypePermission && hasCreateExternalSourceTypePermission;
$: console.log(`DG: ${selectedDerivationGroupId}`);
$: console.log(`ES: ${selectedExternalSourceTypeId}`);
$: console.log(`EE: ${selectedExternalEventTypeId}`);
$: selectedDerivationGroupSources = $externalSources.filter(
source => selectedDerivationGroup?.name === source.derivation_group_name,
);
@@ -269,7 +265,7 @@
deleteDerivationGroup
} as CellRendererParams,
headerName: '',
resizable: false,
resizable: true,
sortable: false,
width: 80,
},
@@ -319,7 +315,7 @@
deleteExternalSourceType,
} as CellRendererParams,
headerName: '',
resizable: false,
resizable: true,
sortable: false,
width: 60,
},
@@ -360,7 +356,7 @@
deleteExternalEventType,
} as CellRendererParams,
headerName: '',
resizable: false,
resizable: true,
sortable: false,
width: 60,
},
@@ -524,301 +520,285 @@
</script>

<CssGrid class="type-manager-grid" columns={columnSize} minHeight="100%">
{#if selectedDerivationGroup === undefined && selectedExternalSourceType === undefined && selectedExternalEventType === undefined}
<Panel borderLeft borderTop padBody={true}>
<Panel borderRight borderTop padBody={true}>
<svelte:fragment slot="header">
<SectionTitle overflow="hidden">Upload Type Definition</SectionTitle>
{#if selectedDerivationGroup === undefined && selectedExternalSourceType === undefined && selectedExternalEventType === undefined}
<SectionTitle overflow="hidden">Upload Type Definition</SectionTitle>
{:else if selectedDerivationGroup !== undefined}
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />Sources in '{selectedDerivationGroup.name}'
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect Derivation Group', placement: 'top' }}
on:click|stopPropagation={() => {
selectedDerivationGroup = undefined;
selectedDerivationGroupId = null;
}}
>
<XIcon />
</button>
{:else if selectedExternalSourceType !== undefined}
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />'{selectedExternalSourceType.name}' Details
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect External Source Type', placement: 'top' }}
on:click|stopPropagation={() => {
selectedExternalSourceType = undefined;
selectedExternalSourceTypeId = null;
}}
>
<XIcon />
</button>
{:else if selectedExternalEventType !== undefined}
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />'{selectedExternalEventType.name}' Details
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect External Event Type', placement: 'top' }}
on:click|stopPropagation={() => {
selectedExternalEventType = undefined;
selectedExternalEventTypeId = null;
}}
>
<XIcon />
</button>
{/if}
</svelte:fragment>
<svelte:fragment slot="body">
<div>
<div class="type-creation-input">
<label for="file">Type JSON Schema File</label>
<input
bind:this={fileInput}
class="w-100 upload"
class:error={!!uploadResponseErrors.length}
name="file"
required
type="file"
accept="application/json"
bind:files
on:click={onClick}
/>
</div>
{#if file !== undefined}
<button
class="st-button primary"
style:width="100%"
disabled={parsedExternalSourceEventTypeSchema === undefined}
on:click={handleUpload}
use:permissionHandler={{
hasPermission: hasCreationPermission,
permissionError: creationPermissionError,
}}
use:tooltip={{ content: 'Upload External Source & Event Type(s)' }}
>
Upload
</button>
{#if parsedExternalSourceEventTypeSchema !== undefined}
<div class="parse-status st-typography-body">
<div class="check">
<CheckIcon />
{#if selectedDerivationGroup === undefined && selectedExternalSourceType === undefined && selectedExternalEventType === undefined}
<div>
<div class="type-creation-input">
<label for="file">Type JSON Schema File</label>
<input
bind:this={fileInput}
class="w-100 upload"
class:error={!!uploadResponseErrors.length}
name="file"
required
type="file"
accept="application/json"
bind:files
on:click={onClick}
/>
</div>
{#if file !== undefined}
<button
class="st-button primary"
style:width="100%"
disabled={parsedExternalSourceEventTypeSchema === undefined}
on:click={handleUpload}
use:permissionHandler={{
hasPermission: hasCreationPermission,
permissionError: creationPermissionError,
}}
use:tooltip={{ content: 'Upload External Source & Event Type(s)' }}
>
Upload
</button>
{#if parsedExternalSourceEventTypeSchema !== undefined}
<div class="parse-status st-typography-body">
<div class="check">
<CheckIcon />
</div>
Source & Event Type Attribute Schema Parsed
</div>
Source & Event Type Attribute Schema Parsed
{:else}
<WarningIcon />
<div class="status-text st-typography-body">Source & Event Type Attribute Schema Could Not Be Parsed</div>
{/if}
{/if}
{#if parsedExternalSourceEventTypeSchema !== undefined}
<div class="to-be-created st-typography-body">
<div class="to-be-created-header">The following External Source Type(s) will be created</div>
{#if parsedExternalSourceEventTypeSchema.source_types}
<ul>
{#each Object.keys(parsedExternalSourceEventTypeSchema.source_types) as newSourceTypeName}
<li class="st-typograph-body">{newSourceTypeName}</li>
{/each}
</ul>
{/if}
<div class="to-be-created-header">The following External Event Type(s) will be created</div>
{#if parsedExternalSourceEventTypeSchema.event_types}
<ul>
{#each Object.keys(parsedExternalSourceEventTypeSchema.event_types) as newEventTypeName}
<li class="st-typograph-body">{newEventTypeName}</li>
{/each}
</ul>
{/if}
</div>
{:else}
<WarningIcon />
<div class="status-text st-typography-body">Source & Event Type Attribute Schema Could Not Be Parsed</div>
{/if}
{/if}
{#if parsedExternalSourceEventTypeSchema !== undefined}
<div class="to-be-created st-typography-body">
<div class="to-be-created-header">The following External Source Type(s) will be created</div>
{#if parsedExternalSourceEventTypeSchema.source_types}
<ul>
{#each Object.keys(parsedExternalSourceEventTypeSchema.source_types) as newSourceTypeName}
<li class="st-typograph-body">{newSourceTypeName}</li>
{/each}
</ul>
{/if}
<div class="to-be-created-header">The following External Event Type(s) will be created</div>
{#if parsedExternalSourceEventTypeSchema.event_types}
<ul>
{#each Object.keys(parsedExternalSourceEventTypeSchema.event_types) as newEventTypeName}
<li class="st-typograph-body">{newEventTypeName}</li>
{/each}
</ul>
{/if}
<div class="errors">
{#each uploadResponseErrors as currentError}
<AlertError class="m-2" error={currentError} />
{/each}
<AlertError class="m-2" error={$createExternalSourceEventTypeError} />
</div>
{/if}
<div class="errors">
{#each uploadResponseErrors as currentError}
<AlertError class="m-2" error={currentError} />
{/each}
<AlertError class="m-2" error={$createExternalSourceEventTypeError} />
</div>
</div>
</svelte:fragment>
</Panel>
<CssGridGutter track={1} type="column" />
{:else if selectedDerivationGroup !== undefined}
<Panel borderRight borderTop padBody={true}>
<svelte:fragment slot="header">
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />Sources in '{selectedDerivationGroup.name}'
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect Derivation Group', placement: 'top' }}
on:click|stopPropagation={() => {
selectedDerivationGroup = undefined;
selectedDerivationGroupId = null;
}}
>
<XIcon />
</button>
</svelte:fragment>
<svelte:fragment slot="body">
{#if selectedDerivationGroupSources.length > 0}
{#each selectedDerivationGroupSources as source}
<!-- Collapsible details -->
<Collapse title={source.key} tooltipContent={source.key} defaultExpanded={false}>
<svelte:fragment slot="right">
<p class="st-typography-body derived-event-count">
{selectedDerivationGroup.sources.get(source.key)?.event_counts} events
</p>
</svelte:fragment>
<div class="st-typography-body">
<div class="st-typography-bold">Key:</div>
{source.key}
</div>
{:else if selectedDerivationGroup !== undefined}
{#if selectedDerivationGroupSources.length > 0}
{#each selectedDerivationGroupSources as source}
<!-- Collapsible details -->
<Collapse title={source.key} tooltipContent={source.key} defaultExpanded={false}>
<svelte:fragment slot="right">
<p class="st-typography-body derived-event-count">
{selectedDerivationGroup.sources.get(source.key)?.event_counts} events
</p>
</svelte:fragment>
<div class="st-typography-body">
<div class="st-typography-bold">Key:</div>
{source.key}
</div>

<div class="st-typography-body">
<div class="st-typography-bold">Source Type:</div>
{source.source_type_name}
</div>
<div class="st-typography-body">
<div class="st-typography-bold">Source Type:</div>
{source.source_type_name}
</div>

<div class="st-typography-body">
<div class="st-typography-bold">Start Time:</div>
{source.start_time}
</div>
<div class="st-typography-body">
<div class="st-typography-bold">Start Time:</div>
{source.start_time}
</div>

<div class="st-typography-body">
<div class="st-typography-bold">End Time:</div>
{source.end_time}
</div>
<div class="st-typography-body">
<div class="st-typography-bold">End Time:</div>
{source.end_time}
</div>

<div class="st-typography-body">
<div class="st-typography-bold">Valid At:</div>
{source.valid_at}
</div>
<div class="st-typography-body">
<div class="st-typography-bold">Valid At:</div>
{source.valid_at}
</div>

<div class="st-typography-body">
<div class="st-typography-bold">Created At:</div>
{source.created_at}
</div>
</Collapse>
{/each}
{:else}
<p class="st-typography-body">No sources in this group.</p>
{/if}
</svelte:fragment>
</Panel>
<CssGridGutter track={1} type="column" />
{:else if selectedExternalSourceType !== undefined}
<Panel borderRight borderTop padBody={true}>
<svelte:fragment slot="header">
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />'{selectedExternalSourceType.name}' Details
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect External Source Type', placement: 'top' }}
on:click|stopPropagation={() => {
selectedExternalSourceType = undefined;
selectedExternalSourceTypeId = null;
}}
>
<XIcon />
</button>
</svelte:fragment>
<svelte:fragment slot="body">
{#if selectedExternalSourceTypeDerivationGroups.length > 0}
{#each selectedExternalSourceTypeDerivationGroups as associatedDerivationGroup}
<!-- Collapsible details -->
<Collapse
title={associatedDerivationGroup.name}
tooltipContent={associatedDerivationGroup.name}
defaultExpanded={false}
>
<svelte:fragment slot="right">
<p class="st-typography-body derived-event-count">
{associatedDerivationGroup.derived_event_total} events
</p>
</svelte:fragment>
<div>
<div class="st-typography-bold">Name:</div>
{associatedDerivationGroup.name}
</div>
<div class="st-typography-body">
<div class="st-typography-bold">Created At:</div>
{source.created_at}
</div>
</Collapse>
{/each}
{:else}
<p class="st-typography-body">No sources in this group.</p>
{/if}
{:else if selectedExternalSourceType !== undefined}
{#if selectedExternalSourceTypeDerivationGroups.length > 0}
{#each selectedExternalSourceTypeDerivationGroups as associatedDerivationGroup}
<!-- Collapsible details -->
<Collapse
title={associatedDerivationGroup.name}
tooltipContent={associatedDerivationGroup.name}
defaultExpanded={false}
>
<svelte:fragment slot="right">
<p class="st-typography-body derived-event-count">
{associatedDerivationGroup.derived_event_total} events
</p>
</svelte:fragment>
<div>
<div class="st-typography-bold">Name:</div>
{associatedDerivationGroup.name}
</div>

<Collapse defaultExpanded={false} title="Sources" tooltipContent="View Contained External Sources">
{#each associatedDerivationGroup.sources as source}
<i class="st-typography-body">{source[0]}</i>
{/each}
<Collapse defaultExpanded={false} title="Sources" tooltipContent="View Contained External Sources">
{#each associatedDerivationGroup.sources as source}
<i class="st-typography-body">{source[0]}</i>
{/each}
</Collapse>
</Collapse>
</Collapse>
{/each}
{:else}
<p class="st-typography-body">No sources associated with this External Source Type.</p>
{/if}
<Collapse
title="Attribute Schema - Definition"
tooltipContent={`${selectedExternalSourceType.name} Attribute Schema Definition`}
defaultExpanded={false}
>
{#each Object.entries(selectedExternalSourceType.attribute_schema) as attribute}
{#if attribute[0] !== 'properties'}
<div class="st-typography-body attributes">
<div class="attribute-name">{attribute[0]}</div>
{#if Array.isArray(attribute[1])}
<ul class="attribute-array">
{#each attribute[1] as attributeValue}
<li class="attribute-value">{attributeValue}</li>
{/each}
</ul>
{:else}
<div class="attribute-value">{attribute[1]}</div>
{/if}
</div>
{/if}
{/each}
</Collapse>
<Collapse
title="Attribute Schema - Properties"
tooltipContent={`${selectedExternalSourceType.name} Attribute Schema Properties`}
defaultExpanded={false}
>
<div class="st-typography-body">
<Parameters
disabled={true}
expanded={false}
formParameters={getFormParameters(selectedExternalSourceTypeParametersMap, {}, [], undefined, undefined, true)}
/>
</div>
</Collapse>
</svelte:fragment>
</Panel>
<CssGridGutter track={1} type="column" />
{:else if selectedExternalEventType !== undefined}
<Panel borderRight borderTop padBody={true}>
<svelte:fragment slot="header">
<SectionTitle overflow="hidden">
<ExternalSourceIcon slot="icon" />'{selectedExternalEventType.name}' Details
</SectionTitle>
<button
class="st-button icon fs-6 deselect"
use:tooltip={{ content: 'Deselect External Event Type', placement: 'top' }}
on:click|stopPropagation={() => {
selectedExternalEventType = undefined;
selectedExternalEventTypeId = null;
}}
>
<XIcon />
</button>
</svelte:fragment>
<svelte:fragment slot="body">
<Collapse
title="Associated External Sources"
tooltipContent={`External Sources using ${selectedExternalEventType.name}`}
defaultExpanded={false}
>
{#if selectedExternalEventTypeSources.length > 0}
{#each selectedExternalEventTypeSources as associatedSource}
<li class="st-typography-body associated-sources">{associatedSource}</li>
{/each}
{:else}
{`No External Sources using ${selectedExternalEventType.name}`}
<p class="st-typography-body">No sources associated with this External Source Type.</p>
{/if}
</Collapse>
<Collapse
title="Attribute Schema - Definition"
tooltipContent={`${selectedExternalEventType.name} Attribute Schema Definition`}
defaultExpanded={false}
>
{#each Object.entries(selectedExternalEventType.attribute_schema) as attribute}
{#if attribute[0] !== 'properties'}
<div class="st-typography-body attributes">
<div class="attribute-name">{attribute[0]}</div>
{#if Array.isArray(attribute[1])}
<ul class="attribute-array">
{#each attribute[1] as attributeValue}
<li class="attribute-value">{attributeValue}</li>
{/each}
</ul>
{:else}
<div class="attribute-value">{attribute[1]}</div>
{/if}
</div>
<Collapse
title="Attribute Schema - Definition"
tooltipContent={`${selectedExternalSourceType.name} Attribute Schema Definition`}
defaultExpanded={false}
>
{#each Object.entries(selectedExternalSourceType.attribute_schema) as attribute}
{#if attribute[0] !== 'properties'}
<div class="st-typography-body attributes">
<div class="attribute-name">{attribute[0]}</div>
{#if Array.isArray(attribute[1])}
<ul class="attribute-array">
{#each attribute[1] as attributeValue}
<li class="attribute-value">{attributeValue}</li>
{/each}
</ul>
{:else}
<div class="attribute-value">{attribute[1]}</div>
{/if}
</div>
{/if}
{/each}
</Collapse>
<Collapse
title="Attribute Schema - Properties"
tooltipContent={`${selectedExternalSourceType.name} Attribute Schema Properties`}
defaultExpanded={false}
>
<div class="st-typography-body">
<Parameters
disabled={true}
expanded={false}
formParameters={getFormParameters(selectedExternalSourceTypeParametersMap, {}, [], undefined, undefined, true)}
/>
</div>
</Collapse>
{:else if selectedExternalEventType !== undefined}
<Collapse
title="Associated External Sources"
tooltipContent={`External Sources using ${selectedExternalEventType.name}`}
defaultExpanded={false}
>
{#if selectedExternalEventTypeSources.length > 0}
{#each selectedExternalEventTypeSources as associatedSource}
<li class="st-typography-body associated-sources">{associatedSource}</li>
{/each}
{:else}
{`No External Sources using ${selectedExternalEventType.name}`}
{/if}
{/each}
</Collapse>
<Collapse
title="Attribute Schema - Properties"
tooltipContent={`${selectedExternalEventType.name} Attribute Schema Properties`}
defaultExpanded={false}
>
<div class="st-typography-body">
<Parameters
disabled={true}
expanded={false}
formParameters={getFormParameters(selectedExternalEventTypeParametersMap, {}, [], undefined, undefined, true)}
/>
</div>
</Collapse>
</Collapse>
<Collapse
title="Attribute Schema - Definition"
tooltipContent={`${selectedExternalEventType.name} Attribute Schema Definition`}
defaultExpanded={false}
>
{#each Object.entries(selectedExternalEventType.attribute_schema) as attribute}
{#if attribute[0] !== 'properties'}
<div class="st-typography-body attributes">
<div class="attribute-name">{attribute[0]}</div>
{#if Array.isArray(attribute[1])}
<ul class="attribute-array">
{#each attribute[1] as attributeValue}
<li class="attribute-value">{attributeValue}</li>
{/each}
</ul>
{:else}
<div class="attribute-value">{attribute[1]}</div>
{/if}
</div>
{/if}
{/each}
</Collapse>
<Collapse
title="Attribute Schema - Properties"
tooltipContent={`${selectedExternalEventType.name} Attribute Schema Properties`}
defaultExpanded={false}
>
<div class="st-typography-body">
<Parameters
disabled={true}
expanded={false}
formParameters={getFormParameters(selectedExternalEventTypeParametersMap, {}, [], undefined, undefined, true)}
/>
</div>
</Collapse>
{/if}
</svelte:fragment>
</Panel>
<CssGridGutter track={1} type="column" />
{/if}
<div class="table-container">
<Panel>
<svelte:fragment slot="header">

0 comments on commit 7263e08

Please sign in to comment.