### Start Infrastructure (Hybrid Mode)

Source: https://github.com/pulsy-global/atria/blob/develop/DEVELOPERS.md

Launches PostgreSQL, NATS, and dashboards using Docker Compose. Includes an option to enable serverless functions.

```bash
docker compose -f deploy/docker/base/docker-compose.yml up -d

# With serverless functions (k3s + Fission)
docker compose -f deploy/docker/base/docker-compose.yml --profile functions up -d
```

--------------------------------

### Quick Start with Docker

Source: https://github.com/pulsy-global/atria/blob/develop/README.md

Run Atria locally using Docker by downloading and executing an install script, navigating to the production directory, and starting the Docker Compose services.

```bash
curl -fsSL https://raw.githubusercontent.com/Pulsy-Global/atria/main/deploy/docker/install.sh | bash
cd ./atria-oss/prod
docker compose up -d
```

--------------------------------

### Full Docker Mode

Source: https://github.com/pulsy-global/atria/blob/develop/DEVELOPERS.md

Builds and runs the entire Atria stack within Docker containers.

```bash
docker compose -f deploy/docker/dev/docker-compose.yml up -d --build
```

--------------------------------

### Run Individual Atria Services (Hybrid Mode)

Source: https://github.com/pulsy-global/atria/blob/develop/DEVELOPERS.md

Commands to run specific Atria services individually, useful when working on particular logic.

```bash
dotnet run --project src/Atria.Feed.Ingestor
dotnet run --project src/Atria.Feed.Runtime
dotnet run --project src/Atria.Feed.Delivery
```

--------------------------------

### Run Services (Hybrid Mode)

Source: https://github.com/pulsy-global/atria/blob/develop/DEVELOPERS.md

Runs the API and Dashboard services locally in separate terminals.

```bash
dotnet run --project src/Atria.Core.Api
dotnet run --project src/Atria.Core.Spa
```

--------------------------------

### Deploy History Table Structure

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/deploy-history-tab/deploy-history-tab.component.html

This snippet shows the HTML structure for displaying deployment history, including placeholders for status, version, details, and timestamps. It also includes conditional rendering for error messages and counts for different deployment statuses.

```html
<div>
  {{ getStatusIcon(item.status) }} {{ getStatusLabel(item.status) }}

  {{ item.version }}

  {{ getDeployDetailsTitle(item) }}

  {{ detailsMessage }}

  {{ item.createdAt | cultureAgnosticDate:'medium' }}

  {{ item.updatedAt | cultureAgnosticDate:'medium' }}

  {{ getStatusIcon(item.status) }}

  <h4> {{ item.version }}</h4>

  {{ item.createdAt | cultureAgnosticDate:'short' }}

  {{ getStatusLabel(item.status) }}

  Updated: {{ item.updatedAt | cultureAgnosticDate:'medium' }}

  {{ errorInfo.title }}

  {{ errorInfo.message }}

  {{ (deployHistory | filter:'status':DeployStatus.Deployed).length }} Active

  {{ (deployHistory | filter:'status':DeployStatus.Failed).length }} Failed

  {{ (deployHistory | filter:'status':DeployStatus.Pending).length }} Pending
</div>
```

--------------------------------

### Conditional Rendering Logic

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/basic/basic.component.html

This snippet demonstrates various conditional rendering scenarios based on item properties like link, externalLink, function, and disabled status.

```html
@if (item.link && !item.externalLink && !item.function && !item.disabled) {

} @if (item.link && item.externalLink && !item.function && !item.disabled) { } @if (!item.link && item.function && !item.disabled) {

} @if (item.link && !item.externalLink && item.function && !item.disabled) {

} @if (item.link && item.externalLink && item.function && !item.disabled) { } @if (!item.link && !item.function && !item.disabled) {

} @if (item.disabled) {

}
```

--------------------------------

### Output Details Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/output-table/output-table.component.html

Displays the name, type, description, creation date, and tags for a single output.

```html
### {{output.name}}

{{getTypeText(output.type)}}

{{output.description || 'No description'}}

Type:

{{getTypeText(output.type)}}

Created:

{{formatFieldValue('createdAt', output.createdAt)}}

Tags:

{{ getTagName(tagId) }}

No Tags
```

--------------------------------

### Output Configuration Logic

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/output-tab/output-tab.component.html

This snippet shows the Angular template logic for rendering different output types and displaying configuration details. It includes a switch statement to handle specific output types and a default case for unimplemented types.

```html
<div class="output-configuration">
  <h3>{{ currentOutput.name }}</h3>

  <div class="output-status">
    <span class="label">Active</span>
  </div>

  <div class="output-type">
    <h5>Type</h5>
    {{ getTypeLabel(currentOutput.type) }}
  </div>

  <div class="output-description">
    <h5>Description</h5>
    {{ currentOutput.description }}
  </div>

  @switch (currentOutput.type) {
    @case (OutputType.Webhook) { 
      <!-- Webhook specific configuration -->
    }
    @case (OutputType.Telegram) { 
      <!-- Telegram specific configuration -->
    }
    @case (OutputType.Discord) { 
      <!-- Discord specific configuration -->
    }
    @case (OutputType.Email) { 
      <!-- Email specific configuration -->
    }
    @case (OutputType.Postgres) { 
      <!-- Postgres specific configuration -->
    }
    @default {
      <div class="settings-placeholder">
        <span class="settings-icon">settings</span>
        Configuration component for {{ getTypeLabel(currentOutput.type) }} is not implemented yet
      </div>
    }
  }
</div>
```

--------------------------------

### Aside Component HTML Structure

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/components/aside/aside.component.html

The HTML template for the Aside component, demonstrating conditional rendering and loops for navigation items.

```html
@if (item.icon) { }

{{ item.title }}

@if (item.subtitle) {

{{ item.subtitle }}

}

@if (item.badge) {

{{ item.badge.title }}

}

@if (!skipChildren) {

@for (item of item.children; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'basic') { } @if (item.type === 'collapsable') { } @if (item.type === 'divider') { } @if (item.type === 'group') { } @if (item.type === 'spacer') { } } }

}
```

--------------------------------

### Conditional Rendering Logic

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/components/basic/basic.component.html

This snippet demonstrates the conditional rendering logic within the basic vertical navigation component's template, handling various states like links, external links, functions, and disabled items.

```html
@if (item.link && !item.externalLink && !item.function && !item.disabled) { } @if (item.link && item.externalLink && !item.function && !item.disabled) { } @if (!item.link && item.function && !item.disabled) {

} @if (item.link && !item.externalLink && item.function && !item.disabled) { } @if (item.link && item.externalLink && item.function && !item.disabled) { } @if (!item.link && !item.function && !item.disabled) {

} @if (item.disabled) {

}

@if (item.icon) { }

{{ item.title }}

@if (item.subtitle) {

{{ item.subtitle }}

}

@if (item.badge) {

{{ item.badge.title }}

}
```

--------------------------------

### Icon Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/basic/basic.component.html

Conditionally displays an icon if the item has an icon property.

```html
@if (item.icon) { }
```

--------------------------------

### Test Console UI Elements

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/feed-console/feed-console.component.html

This snippet shows the HTML structure for the test console, including buttons for actions like running tests, clearing output, and deploying.

```html
<chevron_right>

terminal Test Console

check_circle Passed

cancel Failed

science Test Feed rocket_launch Deploy

Block Number  refresh Execute Outputs Auto-collapse

play_arrow {{ isTestRunning ? 'Running...' : 'Re-run Test' }}

delete_sweep Clear

terminal

No output yet

Run a test to see console output

{{ line }}
```

--------------------------------

### Badge Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/basic/basic.component.html

Conditionally displays a badge with its title if the item has a badge property.

```html
@if (item.badge) {

{{ item.badge.title }}

}
```

--------------------------------

### Conditional Rendering Logic

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed-table/feed-table.component.html

Demonstrates conditional rendering based on loading state and the presence of feeds.

```html
@if (isLoading) { } @else if (feeds.length > 0) { } @else { }
```

--------------------------------

### Subtitle Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/basic/basic.component.html

Conditionally displays the subtitle if the item has a subtitle property.

```html
@if (item.subtitle) {

{{ item.subtitle }}

}
```

--------------------------------

### Title Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/basic/basic.component.html

Displays the title of the navigation item.

```html
{{ item.title }}
```

--------------------------------

### Filter List Bindings

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed-table/feed-table.component.html

Illustrates the binding of filter list elements to feed properties.

```html
Name filter_list

{{feed.name}}

Version filter_list

{{feed.version || 'v1.0.0'}}

Status filter_list

{{getStatusText(feed.status)}} -{{ getFeedLag(feed) | number }} blocks in sync info

Network filter_list

{{getNetworkTitle(feed.networkId)}}

{{getEnvironmentTitle(feed.networkId)}}

Data Type filter_list

{{formatFieldValue('dataType', feed.dataType)}}

Tags filter_list

{{ getTagName(tagId) }}

No Tags
```

--------------------------------

### Main Navigation Loop

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/vertical.component.html

Iterates through the navigation items and conditionally renders them based on visibility and type.

```html
@for (item of navigation; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'aside') { } @if (item.type === 'basic') { } @if (item.type === 'collapsable') { } @if (item.type === 'divider') { } @if (item.type === 'group') { } @if (item.type === 'spacer') { } } }
```

--------------------------------

### Connection Status and Play/Pause Indicator

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/result-tab/result-tab.component.html

Dynamically displays the connection status (Connected, Paused, Connecting) and shows a play or pause icon based on the stream connection state.

```html
{{ isStreamConnected ? 'Connected' : (isPaused ? 'Paused' : 'Connecting...') }}

{{ isStreamConnected ? 'pause_circle' : 'play_circle' }}
```

--------------------------------

### Layout Component HTML Structure

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/app/layout/layout.component.html

The HTML structure for the layout component, including conditional rendering based on screen size and placeholders for different message types.

```html
@if (isScreenSmall) { ![Logo image](images/logo/logo.svg) ![Pulsy logo](images/logo/pulsy-logo.svg)

Atria beta

[Powered by Pulsy](https://pulsy.app)}

@if (!isScreenSmall) {

![Logo image](images/logo/logo.svg)

![Logo image](images/logo/logo.svg)

![Pulsy logo](images/logo/pulsy-logo.svg)

Atria beta

[Powered by Pulsy](https://pulsy.app)

} @if (isScreenSmall) { } 

@if (true) { } 

Success Success message Error Error message Warning Warning message Info Info message
```

--------------------------------

### Alert Component Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/alert/alert.component.html

The HTML template for the alert component, demonstrating conditional rendering based on input properties like dismissible, dismissed, appearance, showIcon, and type.

```html
@if (!dismissible || (dismissible && !dismissed)) {

@if (appearance === 'border') {

} @if (showIcon) {

@if (type === 'primary') { } @if (type === 'accent') { } @if (type === 'warn') { } @if (type === 'basic') { } @if (type === 'info') { } @if (type === 'success') { } @if (type === 'warning') { } @if (type === 'error') { }

}

}
```

--------------------------------

### Horizontal Navigation Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/horizontal.component.html

The HTML template for the horizontal navigation component, demonstrating conditional rendering based on navigation item properties.

```html
@for (item of navigation; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'basic') { } @if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' ) { } @if (item.type === 'spacer') { } } }
```

--------------------------------

### Output Table Structure

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/output-table/output-table.component.html

Basic structure of the output table component, including conditional rendering for loading states and output presence.

```html
@if (isLoading) { } @else if (outputs.length > 0) { } @else { }
```

--------------------------------

### Output Form Type Switching

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/output/output.component.html

This snippet demonstrates how to conditionally render form fields based on the selected output type using Angular's structural directives.

```html
@switch (outputForm.get('type')?.value) {
  @case (OutputType.Webhook) { }
  @case (OutputType.Telegram) { }
  @case (OutputType.Postgres) { }
  @case (OutputType.Email) { }
  @case (OutputType.Discord) { }
  @case (OutputType.S3) { }
}
```

--------------------------------

### Selected Result Details

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/result-tab/result-tab.component.html

Displays detailed information for a selected result, including block number, timestamp, and size. Includes a copy button and formatted JSON data.

```html
Block {{ selectedResult.blockNumber ?? '—' }} Timestamp {{ selectedResult.createdAt | cultureAgnosticDate:'medium' }} Size {{ formatBytes(selectedResult.sizeBytes) }}

content_copy

{{ formatJson(selectedResult.data) }}
```

--------------------------------

### Confirm Modal HTML Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/shared/modals/confirm/confirm-modal.component.html

This is the HTML structure for the confirm modal, including dynamic content binding for title, message, and button texts.

```html
{{ getIcon() }} {{ data.title || 'Confirm' }}

close

{{ data.message }}

{{ data.cancelText || 'Cancel' }} {{ data.confirmText || 'Confirm' }}
```

--------------------------------

### Result Item Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed/components/result-tab/result-tab.component.html

Renders individual result items, showing a block number or sequence number, and a timestamp. Includes an icon for expanding details.

```html
{{ item.blockNumber ?? '#' + item.seqNumber }} TEST chevron_right

{{ item.createdAt | cultureAgnosticDate:'short' }}
```

--------------------------------

### Branch Component HTML Structure

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/horizontal/components/branch/branch.component.html

The HTML template for the branch component, including conditional rendering for various item types, icons, titles, subtitles, and badges.

```html
@if (!child) {

} @for (item of item.children; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'basic') {

} @if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' ) {

} @if (item.type === 'divider') {

} } }

@if (item.icon) { }

{{ item.title }}

@if (item.subtitle) {

{{ item.subtitle }}

}

@if (item.badge) {

{{ item.badge.title }}

}
```

--------------------------------

### Confirmation Dialog Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/services/confirmation/dialog/dialog.component.html

The HTML template for the confirmation dialog component, using Angular's structural directives (@if) to conditionally render elements based on the dialog's data properties. This includes dismissible behavior, icons, titles, messages, and action buttons (confirm and cancel).

```html
@if (data.dismissible) {

}

@if (data.icon.show) {

} @if (data.title || data.message) {

@if (data.title) {

} @if (data.message) {

}

}

@if (data.actions.confirm.show || data.actions.cancel.show) {

@if (data.actions.cancel.show) { {{ data.actions.cancel.label }} } @if (data.actions.confirm.show) { {{ data.actions.confirm.label }} }

}
```

--------------------------------

### Feed Item Display

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/pages/feed-table/feed-table.component.html

Shows how individual feed properties like name, version, status, network, and data type are displayed.

```html
<h3> {{feed.name}} </h3>

{{feed.version || 'v1.0.0'}}

{{getNetworkTitle(feed.networkId)}} - {{getEnvironmentTitle(feed.networkId)}}

{{getStatusText(feed.status)}}

{{ errorInfo.title }}

{{ errorInfo.message }}

Data Type:

{{formatFieldValue('dataType', feed.dataType)}}

Network:

{{getNetworkTitle(feed.networkId)}}

Block Delay:

{{feed.blockDelay}}

Statuses:

{{streamData[feed.id].feedCursor}} / {{streamData[feed.id].chainHead}} N/A

Tags:

{{ getTagName(tagId) }}

No Tags
```

--------------------------------

### Collapsable Component Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/components/collapsable/collapsable.component.html

The HTML template for the collapsable navigation component, including conditional rendering for icons, titles, subtitles, badges, and child items. It also handles different item types like 'basic', 'collapsable', 'divider', 'group', and 'spacer'.

```html
@if (item.icon) { }

{{ item.title }}

@if (item.subtitle) {

{{ item.subtitle }}

}

@if (item.badge) {

{{ item.badge.title }}

}

@if (!isCollapsed) {

@for (item of item.children; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'basic') { } @if (item.type === 'collapsable') { } @if (item.type === 'divider') { } @if (item.type === 'group') { } @if (item.type === 'spacer') { } } }

}
```

--------------------------------

### Active Aside Item Loop

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/vertical.component.html

Conditionally renders navigation items when an active aside item ID is present, filtering for the specific active aside item.

```html
@if (activeAsideItemId) {

@for (item of navigation; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'aside' && item.id === activeAsideItemId) { } } }

}
```

--------------------------------

### Vertical Navigation Group Template

Source: https://github.com/pulsy-global/atria/blob/develop/src/Atria.Core.Spa/wwwroot/fuse/components/navigation/vertical/components/group/group.component.html

The HTML template for the vertical navigation group component, including conditional rendering for title, subtitle, badge, and child items.

```html
@if (item.icon) { }

{{ item.title }}

@if (item.subtitle) {

{{ item.subtitle }}

}

@if (item.badge) {

{{ item.badge.title }}

}

@for (item of item.children; track trackByFn($index, item)) { @if ((item.hidden && !item.hidden(item)) || !item.hidden) { @if (item.type === 'basic') { } @if (item.type === 'collapsable') { } @if (item.type === 'divider') { } @if (item.type === 'group') { } @if (item.type === 'spacer') { } } }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.