You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
14 KiB
306 lines
14 KiB
{{ define "canvas" }} |
|
<div id="canvas-wrapper"> |
|
<input class="tabinput" type="radio" id="tab1" name="tab" checked> |
|
<input class="tabinput" type="radio" id="tab2" name="tab"> |
|
<!-- <input class="tabinput" type="radio" id="tab3" name="tab"> --> |
|
|
|
<div class="tabs"> |
|
<div class="tab-labels"> |
|
<label for="tab1">Requirements</label> |
|
<label for="tab2">Design</label> |
|
<!-- <label for="tab3">Resources</label> --> |
|
</div> |
|
|
|
<!-- Requirements --> |
|
<div id="content1" class="tab-content"> |
|
{{ if .Level.InterviewerRequirements }} |
|
<div class="requirements-section"> |
|
<h3>Interviewer Requirements</h3> |
|
<ul class="requirements-list"> |
|
{{ range .Level.InterviewerRequirements }} |
|
<li class="requirement-item">{{ . }}</li> |
|
{{ end }} |
|
</ul> |
|
</div> |
|
{{ end }} |
|
|
|
{{ if .Level.FunctionalRequirements }} |
|
<div class="requirements-section"> |
|
<h3>Functional Requirements</h3> |
|
<ul class="requirements-list"> |
|
{{ range .Level.FunctionalRequirements }} |
|
<li class="requirement-item">{{ . }}</li> |
|
{{ end }} |
|
</ul> |
|
</div> |
|
{{ end }} |
|
|
|
{{ if .Level.NonFunctionalRequirements }} |
|
<div class="requirements-section"> |
|
<h3>Non-Functional Requirements</h3> |
|
<ul class="requirements-list"> |
|
{{ range .Level.NonFunctionalRequirements }} |
|
<li class="requirement-item">{{ . }}</li> |
|
{{ end }} |
|
</ul> |
|
</div> |
|
{{ end }} |
|
|
|
<div class="continue-section"> |
|
<button class="continue-button" id="create-design-button">Create your design</button> |
|
<button class="continue-button" id="learn-more-button">Learn more</button> |
|
</div> |
|
</div> |
|
|
|
<!-- Design--> |
|
<div id="content2" class="tab-content"> |
|
<div id="sidebar"> |
|
<div class="component-icon" draggable="true" data-type="user"> |
|
user |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="loadBalancer"> |
|
load balancer |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="webserver"> |
|
webserver |
|
</div> |
|
<div class="component-icon" draggable="true" data-type="database"> |
|
database |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="cache"> |
|
cache |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="messageQueue"> |
|
message queue |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="cdn"> |
|
CDN |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="microservice"> |
|
microservice node |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="data pipeline"> |
|
data pipeline |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="monitoring/alerting"> |
|
monitoring/alerting |
|
</div> |
|
|
|
<div class="component-icon" draggable="true" data-type="third party service"> |
|
third-party service |
|
</div> |
|
</div> |
|
|
|
<div id="canvas-container"> |
|
<div id="connection-modal" style="display: none;" class="modal"> |
|
<div class="modal-content"> |
|
<h3>Create Connection</h3> |
|
<label> |
|
Label: |
|
<input type="text" id="connection-label" value="Read traffic"> |
|
</label> |
|
<label> |
|
Protocol: |
|
<select id="connection-protocol"> |
|
<option>HTTP</option> |
|
<option>HTTPS</option> |
|
<option>Database</option> |
|
<option>Redis</option> |
|
</select> |
|
</label> |
|
<label style="margin-top: 10px;"> |
|
<input type="checkbox" id="connection-tls"> |
|
Enable TLS (encryption) |
|
</label> |
|
<label for="connection-capacity">Capacity Limit (RPS):</label> |
|
<input type="number" id="connection-capacity" value="1000" min="1" /> |
|
<div class="modal-actions"> |
|
<button id="connection-save">Save</button> |
|
<button id="connection-cancel">Cancel</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="canvas-toolbar"> |
|
<button id="arrow-tool-btn" class="toolbar-btn">Arrow Tool</button> |
|
</div> |
|
|
|
<svg id="canvas"> |
|
<defs> |
|
<marker id="arrowhead-start" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto" |
|
markerUnits="strokeWidth"> |
|
<path d="M10 0 L0 3.5 L10 7" fill="#ccc" /> |
|
</marker> |
|
<marker id="arrowhead-end" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" |
|
markerUnits="strokeWidth"> |
|
<path d="M0 0 L10 3.5 L0 7" fill="#ccc" /> |
|
</marker> |
|
</defs> |
|
</svg> |
|
<div id="node-props-panel"> |
|
<h3>node properties</h3> |
|
<div id="label-group" data-group="label-group"> |
|
<label>label:</label> |
|
<input type="text" name="label" /> |
|
</div> |
|
<div id="db-group" class="prop-group" data-group="db-group"> |
|
<label>replication factor:<input type="number" name="replication" min="1" step="1" /></label> |
|
</div> |
|
<div id="cache-group" class="prop-group" data-group="cache-group"> |
|
<label>cache ttl (secs):<input type="number" name="cacheTTL" min="0" step="60" /></label> |
|
<label>Max Entries: <input name="maxEntries" type="number" /></label> |
|
<label>Eviction Policy: |
|
<select name="evictionPolicy"> |
|
<option value="LRU">LRU (Least Recently Used)</option> |
|
<option value="LFU">LFU (Least Frequently Used)</option> |
|
</select> |
|
</label> |
|
</div> |
|
<div id="compute-group" data-group="compute-group" class="prop-group"> |
|
<label>RPS Capacity:</label> |
|
<input type="number" name="rpsCapacity" min="1" /> |
|
|
|
<label>Base Latency (ms):</label> |
|
<input type="number" name="baseLatencyMs" min="1" /> |
|
</div> |
|
<div id="lb-group" data-group="lb-group" class="prop-group"> |
|
<label>Algorithm</label> |
|
<select name="algorithm"> |
|
<option value="round-robin">Round Robin</option> |
|
<option value="least-connection">Least Connection</option> |
|
</select> |
|
</div> |
|
<div id="mq-group" data-group="mq-group" class="prop-group"> |
|
<label>Queue Capacity (,ax Messages that can be held in que)</label> |
|
<input type="number" name="queueCapacity" min="1" /> |
|
|
|
<label>Retention Time (seconds)</label> |
|
<input type="number" name="retentionSeconds" min="1" /> |
|
</div> |
|
<div id="cdn-group" data-group="cdn-group" class="prop-group"> |
|
<label>TTL (seconds)</label> |
|
<input type="number" name="ttl" min="1" /> |
|
|
|
<label>Geo Replication</label> |
|
<select name="geoReplication"> |
|
<option value="global">Global</option> |
|
<option value="regional">Regional</option> |
|
<option value="custom">Custom</option> |
|
</select> |
|
|
|
<label>Caching Strategy</label> |
|
<select name="cachingStrategy"> |
|
<option value="cache-first">Cache First</option> |
|
<option value="network-first">Network First</option> |
|
<option value="stale-while-revalidate">Stale While Revalidate</option> |
|
</select> |
|
|
|
<label>Compression</label> |
|
<select name="compression"> |
|
<option value="brotli">Brotli</option> |
|
<option value="gzip">Gzip</option> |
|
<option value="none">None</option> |
|
</select> |
|
|
|
<label>HTTP/2 Support</label> |
|
<select name="http2"> |
|
<option value="enabled">Enabled</option> |
|
<option value="disabled">Disabled</option> |
|
</select> |
|
</div> |
|
<div id="microservice-group" data-group="microservice-group" class="prop-group"> |
|
<label> |
|
Instance Count: |
|
<input type="number" name="instanceCount" value="3" min="1" /> |
|
</label> |
|
|
|
<label> |
|
CPU (vCPUs): |
|
<input type="number" name="cpu" value="2" min="1" /> |
|
</label> |
|
|
|
<label> |
|
RAM (GB): |
|
<input type="number" name="ramGb" value="4" min="1" /> |
|
</label> |
|
|
|
<label> |
|
RPS Capacity: |
|
<input type="number" name="rpsCapacity" value="150" min="1" /> |
|
</label> |
|
|
|
<label> |
|
Scaling Strategy: |
|
<select name="scalingStrategy"> |
|
<option value="auto" selected>Auto</option> |
|
<option value="manual">Manual</option> |
|
</select> |
|
</label> |
|
</div> |
|
<div id="datapipeline-group" data-group="pipeline-group" class="prop-group"> |
|
<label>Batch Size</label> |
|
<input type="number" name="batchSize" min="1" /> |
|
|
|
<label>Schedule</label> |
|
<select name="schedule"> |
|
<option value="realtime">Real-time</option> |
|
<option value="hourly">Hourly</option> |
|
<option value="daily">Daily</option> |
|
<option value="weekly">Weekly</option> |
|
</select> |
|
|
|
<label>Transformations</label> |
|
<select name="transformations"> |
|
<option value="normalize">Normalize</option> |
|
<option value="dedupe">Dedupe</option> |
|
<option value="filter">Filter</option> |
|
<option value="enrich">Enrich</option> |
|
<option value="aggregate">Aggregate</option> |
|
</select> |
|
|
|
<label>Destination</label> |
|
<input type="text" name="destination" placeholder="e.g. data warehouse" /> |
|
</div> |
|
<div id="monitor-group" data-group="monitor-group" class="prop-group"> |
|
<label>Monitoring Tool</label> |
|
<select name="tool"> |
|
<option value="Prometheus">Prometheus</option> |
|
<option value="Datadog">Datadog</option> |
|
<option value="New Relic">New Relic</option> |
|
<option value="Grafana Cloud">Grafana Cloud</option> |
|
</select> |
|
|
|
<label>Alert Threshold (%)</label> |
|
<input type="number" name="alertThreshold" min="0" max="100" /> |
|
</div> |
|
<div id="third-party-group" data-group="third-party-group" class="prop-group"> |
|
<label>Provider</label> |
|
<input type="text" name="provider" /> |
|
|
|
<label>Latency (ms)</label> |
|
<input type="number" name="latency" min="0" /> |
|
</div> |
|
|
|
|
|
<!-- PUT NEW COMPONENTS BEFORE THIS BUTTON --> |
|
<button id="node-props-save" disabled>save</button> |
|
</div> |
|
<div id="bottom-panel"> |
|
<button id="run-button" disabled>Test Design</button> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Metrics--> |
|
<!-- <div id="content3" class="tab-content">This is Tab 3 content.</div> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{{ end }}
|
|
|