Skip to content
This repository was archived by the owner on Aug 30, 2023. It is now read-only.

Commit 90a040d

Browse files
MohamedElmdaryMohamedElmdary
committed
Added node filters support
1 parent a5b231c commit 90a040d

File tree

4 files changed

+139
-69
lines changed

4 files changed

+139
-69
lines changed

‎easy-docs/public/build/elements/vm.wc.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/elements/vm/Vm.wc.svelte

Lines changed: 117 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
{ label: "Memory", symbol: 'memory', placeholder: 'Your Memory in MB', type: 'number'},
3636
{ label: "Public IP", symbol: "publicIp", placeholder: "", type: 'checkbox' },
3737
{ label: "Planetary Network", symbol: "planetary", placeholder: "", type: 'checkbox' },
38-
{ label: "Node ID", symbol: 'nodeId', placeholder: 'Your Node ID', type: 'number', link: { label: "Grid Explorer", url: "https://library.threefold.me/info/threefold#/manual_tfgrid3/threefold__grid3_explorer"}},
38+
// { label: "Node ID", symbol: 'nodeId', placeholder: 'Your Node ID', type: 'number', link: { label: "Grid Explorer", url: "https://library.threefold.me/info/threefold#/manual_tfgrid3/threefold__grid3_explorer"}},
3939
];
4040
4141
// prettier-ignore
@@ -130,6 +130,18 @@
130130
{ label: "MRU Filter", symbol: "mru", type: "number" },
131131
{ label: "SRU Filter", symbol: "sru", type: "number" },
132132
];
133+
134+
let nodeSelection: string;
135+
let nodes: number[] = [];
136+
let loadingNodes: boolean = false;
137+
function onLoadNodesHandler() {
138+
loadingNodes = true;
139+
findNodes(nodeFilters, profile)
140+
.then((_nodes) => {
141+
nodes = _nodes;
142+
})
143+
.finally(() => (loadingNodes = false));
144+
}
133145
</script>
134146

135147
<div style="padding: 15px;">
@@ -267,69 +279,109 @@
267279
</div>
268280
{/each}
269281

270-
<section style="width: 50%;">
271-
{#each filtersFields as field (field.symbol)}
272-
{#if field.type === "checkbox"}
273-
<div style="display: flex; align-items: center;" class="mb-2">
274-
<label class="switch">
275-
<input
276-
type="checkbox"
277-
bind:checked={nodeFilters[field.symbol]}
278-
id={field.symbol}
279-
/>
280-
<span class="slider" />
281-
</label>
282-
<label
283-
for={field.symbol}
284-
class="label ml-2"
285-
style="cursor: pointer;"
286-
>
287-
{field.label}
288-
</label>
289-
</div>
290-
{/if}
282+
<p class="label">Node Selection</p>
283+
<div class="select mb-2">
284+
<select bind:value={nodeSelection}>
285+
<option selected disabled>Choose a way to select node</option>
286+
<option value="automatic">Automatic</option>
287+
<option value="manual">Manual</option>
288+
</select>
289+
</div>
291290

292-
{#if field.type === "text"}
293-
<div class="field">
294-
<p class="label">{field.label}</p>
295-
<div class="control">
296-
<input
297-
class="input"
298-
type="text"
299-
placeholder={field.label}
300-
bind:value={nodeFilters[field.symbol]}
301-
/>
291+
{#if nodeSelection === "automatic"}
292+
<section style="width: 50%;">
293+
<h5 class="is-size-3 has-text-weight-bold">Nodes Filter</h5>
294+
{#each filtersFields as field (field.symbol)}
295+
{#if field.type === "checkbox"}
296+
<div style="display: flex; align-items: center;" class="mb-2">
297+
<label class="switch">
298+
<input
299+
type="checkbox"
300+
bind:checked={nodeFilters[field.symbol]}
301+
id={field.symbol}
302+
/>
303+
<span class="slider" />
304+
</label>
305+
<label
306+
for={field.symbol}
307+
class="label ml-2"
308+
style="cursor: pointer;"
309+
>
310+
{field.label}
311+
</label>
302312
</div>
303-
</div>
304-
{/if}
313+
{/if}
305314

306-
{#if field.type === "number"}
307-
<div class="field">
308-
<p class="label">{field.label}</p>
309-
<div class="control">
310-
<input
311-
class="input"
312-
type="number"
313-
placeholder={field.label}
314-
bind:value={nodeFilters[field.symbol]}
315-
/>
315+
{#if field.type === "text"}
316+
<div class="field">
317+
<p class="label">{field.label}</p>
318+
<div class="control">
319+
<input
320+
class="input"
321+
type="text"
322+
placeholder={field.label}
323+
bind:value={nodeFilters[field.symbol]}
324+
/>
325+
</div>
316326
</div>
317-
</div>
318-
{/if}
319-
{/each}
320-
</section>
321-
322-
<button
323-
class="button is-primary mt-4"
324-
type="button"
325-
on:click={() => {
326-
findNodes(nodeFilters).then((res) => {
327-
console.log(res);
328-
});
329-
}}
330-
>
331-
Apply Filters
332-
</button>
327+
{/if}
328+
329+
{#if field.type === "number"}
330+
<div class="field">
331+
<p class="label">{field.label}</p>
332+
<div class="control">
333+
<input
334+
class="input"
335+
type="number"
336+
placeholder={field.label}
337+
bind:value={nodeFilters[field.symbol]}
338+
/>
339+
</div>
340+
</div>
341+
{/if}
342+
{/each}
343+
344+
<button
345+
class={"button is-primary mt-2 " +
346+
(loadingNodes ? "is-loading" : "")}
347+
disabled={loadingNodes}
348+
type="button"
349+
on:click={onLoadNodesHandler}
350+
>
351+
Apply Filters
352+
</button>
353+
354+
<div class="select mt-4">
355+
<p class="label">Node ID</p>
356+
<select bind:value={data.nodeId}>
357+
<option selected disabled>
358+
{#if loadingNodes}
359+
Loading...
360+
{:else}
361+
Please select a node ID
362+
{/if}
363+
</option>
364+
{#each nodes as node (node)}
365+
<option value={node}>
366+
{node}
367+
</option>
368+
{/each}
369+
</select>
370+
</div>
371+
</section>
372+
{:else if nodeSelection === "manual"}
373+
<div class="field">
374+
<p class="label">Node ID</p>
375+
<div class="control">
376+
<input
377+
class="input"
378+
type="number"
379+
placeholder="Your Node ID"
380+
bind:value={data.nodeId}
381+
/>
382+
</div>
383+
</div>
384+
{/if}
333385
{/if}
334386

335387
{#if active === "Environment Variables"}
@@ -521,4 +573,9 @@
521573
transform: translateX(26px);
522574
}
523575
}
576+
577+
.select,
578+
.select > select {
579+
width: 100%;
580+
}
524581
</style>

‎src/types/vm.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class VM {
3939
public memory = 1024 * 8,
4040
public entrypoint = "/sbin/zinit init",
4141
public planetary = true,
42-
public nodeId = 1,
42+
public nodeId = undefined,
4343
public rootFsSize = 25,
4444

4545
/* Network */

‎src/utils/findNodes.ts

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1+
import type { IProfile } from "../types/Profile";
12
const { GridClient, Nodes } = window.configs?.grid3_client ?? {};
23

3-
export default function findNodes(filters: any) {
4-
const nodes = new Nodes(
5-
"https://graphql.dev.grid.tf/graphql",
6-
"https://gridproxy.dev.grid.tf"
7-
);
4+
export default function findNodes(
5+
filters: any,
6+
profile: IProfile
7+
): Promise<number[]> {
8+
return new Promise(async (res) => {
9+
const { networkEnv } = profile;
10+
const grid = new GridClient("" as any, "", "", null);
811

9-
return nodes.filterNodes(filters);
12+
const { graphql, rmbProxy } = grid.getDefaultUrls(networkEnv as any);
13+
const nodes = new Nodes(graphql, rmbProxy);
14+
15+
try {
16+
const items = await nodes.filterNodes(filters);
17+
const resNodes = items.map((node) => node.nodeId) as number[];
18+
res(resNodes);
19+
} catch {
20+
res([]);
21+
}
22+
});
1023
}

0 commit comments

Comments
 (0)