codegirl007
/
system-design-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add webserver options to props panel and condense down to just one webserver option vs having 2 options

pull/1/head
Stephanie Gredell 7 months ago
parent
f9487ce24d
commit
8a052c460b
3 changed files with 76 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      static/app.js
  2. 47
      static/game.html
  3. 3
      static/node.js

44
static/app.js
Unescape View File

@ -1,6 +1,5 @@ @@ -1,6 +1,5 @@
import { generateNodeId, createSVGElement } from './utils.js';
import { ComponentNode } from './node.js'
import { Connection } from './connection.js'
import { generateNodeId, createSVGElement } from './utils.js';
export class CanvasApp {
constructor() {
@ -24,6 +23,9 @@ export class CanvasApp { @@ -24,6 +23,9 @@ export class CanvasApp {
this.dbGroup = document.getElementById('db-group');
this.cacheGroup = document.getElementById('cache-group');
this.selectedNode = null;
this.computeTypes = ['webserver', 'microservice'];
this.computeGroup = document.getElementById('compute-group');
this.placeholderText = createSVGElement('text', {
x: '50%',
@ -110,6 +112,9 @@ export class CanvasApp { @@ -110,6 +112,9 @@ export class CanvasApp {
if (nodeObj.type === 'CacheStandard' || nodeObj.type === 'CacheLarge') {
nodeObj.props.cacheTTL = parseInt(panel.querySelector("input[name='cacheTTL']").value, 10);
}
if (this.computeTypes.includes(nodeObj.type)) {
nodeObj.props.instanceSize = panel.querySelector("select[name='instanceSize']").value;
}
this.hidePropsPanel();
});
@ -171,6 +176,15 @@ export class CanvasApp { @@ -171,6 +176,15 @@ export class CanvasApp {
this.propsSaveBtn.disabled = false;
panel.style.display = 'block';
const isCompute = this.computeTypes.includes(nodeObj.type);
console.log(isCompute)
console.log(nodeObj)
this.computeGroup.style.display = isCompute ? 'block' : 'none';
if (isCompute) {
panel.querySelector("select[name='instanceSize']").value = nodeObj.props.instanceSize || 'medium';
}
}
hidePropsPanel() {
@ -201,15 +215,35 @@ export class CanvasApp { @@ -201,15 +215,35 @@ export class CanvasApp {
}
exportDesign() {
const nodes = this.placedComponents.map(n => ({
const nodes = this.placedComponents.map(n => {
const baseProps = { label: n.props.label };
// Add only if it's a database
if (n.type === 'Database') {
baseProps.replication = n.props.replication;
}
// Add only if it's a cache
if (n.type === 'CacheStandard' || n.type === 'CacheLarge') {
baseProps.cacheTTL = n.props.cacheTTL;
}
// Add only if it's a compute node
const computeTypes = ['WebServer', 'Microservice'];
if (computeTypes.includes(n.type)) {
baseProps.instanceSize = n.props.instanceSize;
}
return {
id: n.id,
type: n.type,
props: n.props,
props: baseProps,
position: {
x: n.x,
y: n.y
}
}));
};
});
const connections = this.connections.map(c => ({
source: c.start.id,

47
static/game.html
Unescape View File

@ -523,6 +523,22 @@ @@ -523,6 +523,22 @@
color: #fff;
border-radius: 4px;
}
#node-props-panel .form-group {
margin-bottom: 10px;
}
#node-props-panel label {
display: block;
font-weight: bold;
margin-bottom: 4px;
}
#node-props-panel select {
width: 100%;
padding: 4px;
font-size: 14px;
}
</style>
</head>
<body>
@ -596,29 +612,17 @@ @@ -596,29 +612,17 @@
<span class="tooltip">cost: $5/mo<br>distributes traffic evenly<br>latency: 5 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="webserver (small)">
web server (small)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>base latency: 50 ms</span>
<div class="component-icon" draggable="true" data-type="webserver">
webserver
<span class="tooltip">cost: varies<br>capacity and latency depends on instance size</span>
</div>
<div class="component-icon" draggable="true" data-type="webserver (medium)">
web server (medium)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>base latency: 40 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="database">
database
<span class="tooltip">cost: $20/mo<br>read capacity: 150 rps<br>base latency: 80 ms<br>supports replication</span>
</div>
<div class="component-icon" draggable="true" data-type="cache (standard)">
cache (standard)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>latency: 5 ms<br>80% hit rate with 1hr ttl</span>
</div>
<div class="component-icon" draggable="true" data-type="cache (large)">
cache (large)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>latency: 5 ms<br>higher hit rate for large datasets</span>
<div class="component-icon" draggable="true" data-type="cache">
cache
</div>
<div class="component-icon" draggable="true" data-type="messagequeue">
@ -733,6 +737,15 @@ @@ -733,6 +737,15 @@
<div id="cache-group" class="prop-group">
<label>cache ttl (secs):<input type="number" name="cachettl" min="0" step="60" /></label>
</div>
<div id="compute-group">
<label>Instance Size:</label>
<select name="instanceSize">
<option value="small">Small</option>
<option value="medium" selected>Medium</option>
<option value="large">Large</option>
</select>
</div>
<button id="node-props-save" disabled>save</button>
</div>
<div id="bottom-panel">

3
static/node.js
Unescape View File

@ -9,7 +9,8 @@ export class ComponentNode { @@ -9,7 +9,8 @@ export class ComponentNode {
this.props = {
label: type,
replication: 1,
cacheTTL: 0
cacheTTL: 0,
instanceSize: 'medium'
};
this.group = createSVGElement('g', { class: 'dropped', 'data-type': type });
const rect = createSVGElement('rect', {

Write Preview
Loading…
Cancel
Save