Skip to content

Commit 4cc38c4

Browse files
Le-CaignecLe-Caignec
committed
feat: add Builder Dashboard assets and update documentation references
1 parent dc9054c commit 4cc38c4

File tree

9 files changed

+206
-15
lines changed

9 files changed

+206
-15
lines changed

‎src/assets/tooling-&-explorers/builder-dashboard/build-voucher-view.png‎

771 KB
Loading

src/assets/builder-dashboard.png renamed to src/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png

File renamed without changes.

‎src/assets/tooling-&-explorers/builder-dashboard/my-iapps-view.png‎

314 KB
Loading

‎src/components/CardGrid.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="my-8 grid grid-cols-1 gap-6 md:grid-cols-2">
2+
<div class="my-4 grid grid-cols-1 gap-4 md:grid-cols-2">
33
<slot />
44
</div>
55
</template>

‎src/components/FeatureCard.vue‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,33 @@
44
class="block h-full text-inherit no-underline! visited:no-underline! hover:no-underline! active:no-underline!"
55
>
66
<div
7-
class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
7+
class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-3 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
88
>
9-
<div class="text-3xl">{{ icon }}</div>
10-
<h3 class="text-text1 m-0 mb-2">{{ title }}</h3>
11-
<p class="text-text2 m-0 flex-grow leading-relaxed">{{ description }}</p>
9+
<div class="!mb-3 flex items-center gap-2">
10+
<Icon :icon="icon" class="text-xl" :class="iconColor" />
11+
</div>
12+
<h3 class="text-text1 !mt-0 !mb-0 text-base font-semibold">
13+
{{ title }}
14+
</h3>
15+
<p class="text-text2 !mx-2 !my-2 flex-grow text-sm leading-relaxed">
16+
{{ description }}
17+
</p>
1218
</div>
1319
</a>
1420
</template>
1521

1622
<script setup lang="ts">
23+
import { Icon } from '@iconify/vue';
24+
1725
interface Props {
1826
icon: string;
1927
title: string;
2028
description: string;
2129
linkUrl: string;
30+
iconColor?: string;
2231
}
2332
24-
defineProps<Props>();
33+
withDefaults(defineProps<Props>(), {
34+
iconColor: 'text-blue-500',
35+
});
2536
</script>

‎src/overview/tooling-and-explorers/builder-dashboard.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Builder Dashboard
3+
description:
4+
Monitor iExec applications with the powerful Builder Dashboard. Manage your
5+
iApps and your manage vouchers
6+
---
7+
8+
# 🏗️ Builder Dashboard
9+
10+
The **Builder Dashboard** is your comprehensive development hub for iExec
11+
protocol. Monitor voucher usage, track your remaining compute capacity for TEE
12+
iApp runs, and view execution history—all in one place. This powerful interface
13+
streamlines your development workflow and provides deep insights on your
14+
confidential iApps deployed on the protocol.
15+
16+
<ImageViewer
17+
image-url="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png"
18+
image-alt="Builder Dashboard Overview"
19+
link-url="https://builder.iex.ec/"
20+
caption="🔗 Access the Builder Dashboard"
21+
/>
22+
23+
## 🎯 Key Features
24+
25+
<CardGrid>
26+
<FeatureCard
27+
icon="mdi:chart-line"
28+
title="Voucher consumption & Task History"
29+
description="View complete task execution history with status, pricing, deals, and comprehensive voucher consumption tracking"
30+
link-url="#voucher-history"
31+
icon-color="text-blue-500"
32+
/>
33+
34+
<FeatureCard
35+
icon="mdi:apps"
36+
title="Confidential iApp Monitoring"
37+
description="Monitor deployed iApps, track execution statistics, unique users"
38+
link-url="#iapp-management"
39+
icon-color="text-green-500"
40+
/>
41+
</CardGrid>
42+
43+
## 📊 Voucher Consumption & Task History {#voucher-history}
44+
45+
The first screen of the Builder Dashboard provides comprehensive voucher
46+
monitoring with detailed task execution history and real-time balance tracking.
47+
48+
<ImageViewer
49+
image-url="/assets/tooling-&-explorers/builder-dashboard/build-voucher-view.png"
50+
image-alt="Voucher Consumption Dashboard"
51+
link-url="https://builder.iex.ec/vouchers"
52+
caption="🔗 Access Voucher Dashboard"
53+
/>
54+
55+
### Current Voucher Balance & Management
56+
57+
<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-700 mb-6">
58+
<h4 class="!mt-0 !mb-2">💰 Voucher Balance Overview</h4>
59+
<ul class="!mb-0">
60+
<li><strong>Current Balance</strong>: View your remaining voucher credits and compute capacity</li>
61+
<li><strong>Claim New Vouchers</strong>: Request additional vouchers directly from the dashboard</li>
62+
<li><strong>Expiration Alerts</strong>: Get notified before vouchers expire</li>
63+
</ul>
64+
</div>
65+
66+
### Task Execution History
67+
68+
<CardGrid>
69+
<FeatureCard
70+
icon="mdi:history"
71+
title="Complete Task History"
72+
description="Chronological list of all executed tasks with detailed execution information"
73+
link-url="#task-history"
74+
icon-color="text-blue-500"
75+
/>
76+
77+
<FeatureCard
78+
icon="mdi:chart-line"
79+
title="Task Status Tracking"
80+
description="Real-time status updates: Pending, Running, Completed, Failed"
81+
link-url="#task-status"
82+
icon-color="text-green-500"
83+
/>
84+
85+
<FeatureCard
86+
icon="mdi:currency-usd"
87+
title="Pricing & Cost Analysis"
88+
description="Detailed cost breakdown per task and cumulative spending analytics"
89+
link-url="#cost-analysis"
90+
icon-color="text-orange-500"
91+
/>
92+
93+
<FeatureCard
94+
icon="mdi:handshake"
95+
title="Deal Association"
96+
description="View which deal each task belongs to and track deal performance"
97+
link-url="#deal-tracking"
98+
icon-color="text-purple-500"
99+
/>
100+
</CardGrid>
101+
102+
## 📱 Confidential iApp Management {#iapp-management}
103+
104+
The second screen provides comprehensive management and analytics for your
105+
deployed confidential iApps with detailed statistics and user insights.
106+
107+
<ImageViewer
108+
image-url="/assets/tooling-&-explorers/builder-dashboard/my-iapps-view.png"
109+
image-alt="My Confidential iApps Dashboard"
110+
link-url="https://builder.iex.ec/iapps"
111+
caption="🔗 Manage Your iApps"
112+
/>
113+
114+
### My Confidential iApps Overview
115+
116+
<div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-6 border-l-4 border-blue-700 mb-6">
117+
<h4 class="!mt-0 !mb-2">📱 iApp Portfolio Metrics</h4>
118+
<ul class="!mb-0">
119+
<li><strong>Deployed Applications</strong>: Complete list of all your confidential iApps currently deployed</li>
120+
<li><strong>Execution Statistics</strong>: See exactly how many times each iApp has been executed</li>
121+
<li><strong>Unique Users</strong>: Track total unique users who have run each application</li>
122+
<li><strong>Revenue Insights</strong>: Track earnings and profitability per application</li>
123+
</ul>
124+
</div>
125+
126+
### Application Statistics Dashboard
127+
128+
<CardGrid>
129+
<FeatureCard
130+
icon="mdi:apps"
131+
title="Deployed iApps"
132+
description="View all your confidential applications with deployment status, versions, and metadata"
133+
link-url="#deployed-iapps"
134+
icon-color="text-blue-500"
135+
/>
136+
137+
<FeatureCard
138+
icon="mdi:counter"
139+
title="Execution Count"
140+
description="Track how many times each iApp has been executed since deployment"
141+
link-url="#execution-count"
142+
icon-color="text-green-500"
143+
/>
144+
145+
<FeatureCard
146+
icon="mdi:account-group"
147+
title="Unique Users"
148+
description="Monitor total unique users who have interacted with each application"
149+
link-url="#unique-users"
150+
icon-color="text-orange-500"
151+
/>
152+
153+
<FeatureCard
154+
icon="mdi:trending-up"
155+
title="Usage Trends"
156+
description="Analyze usage patterns, peak times, and growth trends for each iApp"
157+
link-url="#usage-trends"
158+
icon-color="text-purple-500"
159+
/>
160+
</CardGrid>
161+
162+
::: tip 💡 Dev Tip
163+
164+
Use the **Builder Dashboard** to monitor your iExec applications and optimize
165+
your development workflow. The comprehensive analytics help you make data-driven
166+
decisions for better application performance.
167+
168+
:::
169+
170+
<script setup>
171+
import { Icon } from '@iconify/vue';
172+
import ImageViewer from '../../components/ImageViewer.vue';
173+
import FeatureCard from '../../components/FeatureCard.vue';
174+
import CardGrid from '../../components/CardGrid.vue';
175+
</script>

‎src/overview/tooling-and-explorers/iexec-explorer.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,37 @@ explore apps and protectedData—all in one powerful dashboard.
2222

2323
<CardGrid>
2424
<FeatureCard
25-
icon="💼"
25+
icon="mdi:briefcase"
2626
title="Deals & Tasks"
2727
description="Monitor deal orchestration and task execution with their asset relationships (app + dataset + workerpool) from initialization to result download, including pricing"
2828
link-url="#deals-tasks"
29+
icon-color="text-blue-500"
2930
/>
3031

3132
<FeatureCard
32-
icon="📱"
33+
icon="mdi:apps"
3334
title="iApps Listing"
3435
description="Explore the catalog of trusted execution environment (TEE) applications, including their use cases and ownership details"
3536
link-url="#iapps-listing"
37+
icon-color="text-green-500"
3638
/>
3739

3840
<FeatureCard
39-
icon="🗄️"
41+
icon="mdi:database"
4042
title="Protected Data Listing"
4143
description="Discover encrypted datasets with their asset types, including usage and ownership details"
4244
link-url="#protected-data-listing"
45+
icon-color="text-orange-500"
4346
/>
4447

45-
<FeatureCard
46-
icon="⚡"
48+
<FeatureCard
49+
icon="mdi:lightning-bolt"
4750
title="Workerpools"
4851
description="Explore the decentralized computing infrastructure, including usage and ownership details"
4952
link-url="#workerpools"
50-
/> </CardGrid>
53+
icon-color="text-purple-500"
54+
/>
55+
</CardGrid>
5156

5257
<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
5358
<h4 class="!mt-0 !mb-2">🏗️ Understanding iExec Architecture</h4>
@@ -106,7 +111,7 @@ Browse and analyze all tasks across the iExec network:
106111
### Task Execution Monitoring
107112

108113
<ImageViewer
109-
image-url="/assets/tooling-&-explorers/iexec-explorer/result-details.png"
114+
image-url="/assets/tooling-&-explorers/iexec-explorer/task-details-started.png"
110115
image-alt="Result Decryption"
111116
link-url="https://explorer.iex.ec/bellecour/tasks"
112117
caption="🔗 Explore Tasks"

‎src/use-iapp/how-to-pay/how-to-pay-for-web3mail.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ and **xRLC**, detailing the steps for each method.
2424
### Step 2: Use the Builder Dashboard
2525

2626
<a href="https://builder.iex.ec/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
27-
<img src="/assets/builder-dashboard.png" alt="Builder dashboard screenshot">
27+
<img src="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png" alt="Builder dashboard screenshot">
2828
</a>
2929

3030
The iExec Builder Dashboard is a comprehensive tool for managing vouchers and

‎src/use-iapp/how-to-pay/how-to-pay-for-web3telegram.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ This guide explains how to pay for Web3Telegram's computing power using
3131
### Step 2: Use the Builder Dashboard
3232

3333
<a href="https://builder.iex.ec/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
34-
<img src="/assets/builder-dashboard.png" alt="Builder dashboard screenshot">
34+
<img src="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png" alt="Builder dashboard screenshot">
3535
</a>
3636

3737
The iExec Builder Dashboard is a comprehensive tool for managing vouchers and

0 commit comments

Comments
 (0)