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

add cache options

pull/1/head
Stephanie Gredell 7 months ago
parent
8a052c460b
commit
880f28bb03
2 changed files with 65 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      static/app.js
  2. 38
      static/game.html

70
static/app.js
Unescape View File

@ -109,8 +109,10 @@ export class CanvasApp {
if (nodeObj.type === 'Database') { if (nodeObj.type === 'Database') {
nodeObj.props.replication = parseInt(panel.querySelector("input[name='replication']").value, 10); nodeObj.props.replication = parseInt(panel.querySelector("input[name='replication']").value, 10);
} }
if (nodeObj.type === 'CacheStandard' || nodeObj.type === 'CacheLarge') { if (nodeObj.type === 'cache') {
nodeObj.props.cacheTTL = parseInt(panel.querySelector("input[name='cacheTTL']").value, 10); nodeObj.props.cacheTTL = parseInt(panel.querySelector("input[name='cacheTTL']").value, 10);
nodeObj.props.maxEntries = parseInt(panel.querySelector("input[name='maxEntries']").value, 10);
nodeObj.props.evictionPolicy = panel.querySelector("select[name='evictionPolicy']").value;
} }
if (this.computeTypes.includes(nodeObj.type)) { if (this.computeTypes.includes(nodeObj.type)) {
nodeObj.props.instanceSize = panel.querySelector("select[name='instanceSize']").value; nodeObj.props.instanceSize = panel.querySelector("select[name='instanceSize']").value;
@ -149,6 +151,11 @@ export class CanvasApp {
this.activeNode = nodeObj; this.activeNode = nodeObj;
const panel = this.nodePropsPanel; const panel = this.nodePropsPanel;
if (nodeObj.type === 'user') {
this.hidePropsPanel();
return;
}
// Position the panel (optional, or you can use fixed top/right) // Position the panel (optional, or you can use fixed top/right)
const bbox = nodeObj.group.getBBox(); const bbox = nodeObj.group.getBBox();
const ctm = nodeObj.group.getCTM(); const ctm = nodeObj.group.getCTM();
@ -168,10 +175,13 @@ export class CanvasApp {
} }
// Show cache fields if it's a cache // Show cache fields if it's a cache
const isCache = nodeObj.type === 'CacheStandard' || nodeObj.type === 'CacheLarge'; const isCache = nodeObj.type === 'cache';
this.cacheGroup.style.display = isCache ? 'block' : 'none'; this.cacheGroup.style.display = isCache ? 'block' : 'none';
if (isCache) { if (isCache) {
this.cacheGroup.querySelector("input[name='cacheTTL']").value = nodeObj.props.cacheTTL; this.cacheGroup.querySelector("input[name='cacheTTL']").value = nodeObj.props.cacheTTL ?? 0;
panel.querySelector('input[name="cacheTTL"]').value = nodeObj.props.cacheTTL;
panel.querySelector("input[name='maxEntries']").value = nodeObj.props.maxEntries || 100000;
panel.querySelector("select[name='evictionPolicy']").value = nodeObj.props.evictionPolicy || 'LRU';
} }
this.propsSaveBtn.disabled = false; this.propsSaveBtn.disabled = false;
@ -215,35 +225,39 @@ export class CanvasApp {
} }
exportDesign() { exportDesign() {
const nodes = this.placedComponents.map(n => { const nodes = this.placedComponents
const baseProps = { label: n.props.label }; .filter(n => n.type !== 'user')
.map(n => {
const baseProps = { label: n.props.label };
// Add only if it's a database // Add only if it's a database
if (n.type === 'Database') { if (n.type === 'Database') {
baseProps.replication = n.props.replication; 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 // Add only if it's a cache
const computeTypes = ['WebServer', 'Microservice']; if (n.type === 'cache') {
if (computeTypes.includes(n.type)) { baseProps.cacheTTL = n.props.cacheTTL;
baseProps.instanceSize = n.props.instanceSize; baseProps.maxEntries = n.props.maxEntries;
} baseProps.evictionPolicy = n.props.evictionPolicy;
}
return { // Add only if it's a compute node
id: n.id, const computeTypes = ['WebServer', 'Microservice'];
type: n.type, if (computeTypes.includes(n.type)) {
props: baseProps, baseProps.instanceSize = n.props.instanceSize;
position: {
x: n.x,
y: n.y
} }
};
}); return {
id: n.id,
type: n.type,
props: baseProps,
position: {
x: n.x,
y: n.y
}
};
});
const connections = this.connections.map(c => ({ const connections = this.connections.map(c => ({
source: c.start.id, source: c.start.id,

38
static/game.html
Unescape View File

@ -525,20 +525,20 @@
} }
#node-props-panel .form-group { #node-props-panel .form-group {
margin-bottom: 10px; margin-bottom: 10px;
} }
#node-props-panel label { #node-props-panel label {
display: block; display: block;
font-weight: bold; font-weight: bold;
margin-bottom: 4px; margin-bottom: 4px;
} }
#node-props-panel select { #node-props-panel select {
width: 100%; width: 100%;
padding: 4px; padding: 4px;
font-size: 14px; font-size: 14px;
} }
</style> </style>
</head> </head>
<body> <body>
@ -735,7 +735,15 @@
<label>replication factor:<input type="number" name="replication" min="1" step="1" /></label> <label>replication factor:<input type="number" name="replication" min="1" step="1" /></label>
</div> </div>
<div id="cache-group" class="prop-group"> <div id="cache-group" class="prop-group">
<label>cache ttl (secs):<input type="number" name="cachettl" min="0" step="60" /></label> <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</option>
<option value="LFU">LFU</option>
<option value="Random">Random</option>
</select>
</label>
</div> </div>
<div id="compute-group"> <div id="compute-group">
<label>Instance Size:</label> <label>Instance Size:</label>

Write Preview
Loading…
Cancel
Save