Skip to content

Commit c5d8617

Browse files
rafaelsilva29rafaelsilva29
committed
feat: new dasboard page
1 parent 353cd52 commit c5d8617

17 files changed

Lines changed: 394 additions & 685 deletions

File tree

‎deployments/docker-compose/backend/docker-compose.db.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ services:
1111
volumes:
1212
- ./postgres-data:/var/lib/postgresql
1313
ports:
14-
- "5432"
14+
- "5432:5432"
1515
env_file:
1616
- .env

‎deployments/docker-compose/backend/docker-compose.identity.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ services:
1414
depends_on:
1515
- identity-postgres
1616
ports:
17-
- "4000"
18-
- "4001"
17+
- "4003:4000"
18+
- "4004:4001"
1919
env_file:
2020
- .env

‎deployments/docker-compose/backend/docker-compose.vault.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ services:
99
container_name: identity-vault
1010
restart: always
1111
ports:
12-
- "8200"
12+
- "8200:8200"
1313
volumes:
1414
- ./vault-data/file:/vault/file/:rw
1515
environment:

‎frontend/src/assets/dashboard/video-thumbnail.png‎

571 KB
Loading

‎frontend/src/components/dashboard/content-dashboard.tsx‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
/**
2+
* Copyright 2025 AGNTCY Contributors (https://github.com/agntcy)
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import {Checkbox, Divider, Link, Typography} from '@open-ui-kit/core';
7+
import ScrollShadowWrapper from '@/components/ui/scroll-shadow-wrapper';
8+
import {PATHS} from '@/router/paths';
9+
import {docs} from '@/utils/docs';
10+
import {WelcomeName} from './welcome-name';
11+
import {RadioButtonUnchecked, CheckCircle} from '@mui/icons-material';
12+
import {useState} from 'react';
13+
import {PlayButton} from './play-button';
14+
import VideoThumbNail from '@/assets/dashboard/video-thumbnail.png';
15+
import {useAnalytics} from '@/hooks';
16+
import {useLocalStore} from '@/store';
17+
import {useShallow} from 'zustand/react/shallow';
18+
19+
export const ContentDashboard = () => {
20+
const [showVideo, setShowVideo] = useState(false);
21+
22+
const {analyticsTrack} = useAnalytics();
23+
24+
const {addAgent, setAddAgent, setIdp, setSetIdp, createBadge, setCreateBadge, createPolicy, setCreatePolicy} =
25+
useLocalStore(
26+
useShallow((state) => ({
27+
addAgent: state.addAgent,
28+
setAddAgent: state.setAddAgent,
29+
setIdp: state.setIdp,
30+
setSetIdp: state.setSetIdp,
31+
createBadge: state.createBadge,
32+
setCreateBadge: state.setCreateBadge,
33+
createPolicy: state.createPolicy,
34+
setCreatePolicy: state.setCreatePolicy
35+
}))
36+
);
37+
38+
return (
39+
<ScrollShadowWrapper>
40+
<div className="flex flex-col h-full gap-[16px] mb-12">
41+
<WelcomeName />
42+
<div className="dashboard-card mx-6 mb-6">
43+
<div className="dashboard-card-content flex flex-row items-start justify-center h-full pt-4 gap-4">
44+
<div className="hidden md:flex py-8 pb-12 space-y-4 max-w-[60%] flex-col items-center">
45+
<div className="w-full max-w-[700px] aspect-video bg-gray-100 rounded-lg overflow-hidden shadow-md mb-4 relative">
46+
{!showVideo ? (
47+
<>
48+
<div className="w-full h-full relative flex items-center justify-center">
49+
<img
50+
src={VideoThumbNail}
51+
alt="Video thumbnail"
52+
className="absolute inset-0 w-full h-full object-cover"
53+
/>
54+
<button
55+
onClick={() => setShowVideo(true)}
56+
className="relative group z-10 cursor-pointer"
57+
aria-label="Play video"
58+
>
59+
<div className="transition-transform group-hover:scale-105">
60+
<PlayButton />
61+
</div>
62+
</button>
63+
</div>
64+
</>
65+
) : (
66+
<iframe
67+
width="100%"
68+
height="100%"
69+
src="https://www.youtube.com/embed/CO3YwjRXyQo?autoplay=1"
70+
title="Identity Service Setup Walkthrough"
71+
frameBorder="0"
72+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
73+
allowFullScreen
74+
className="w-full h-full"
75+
/>
76+
)}
77+
</div>
78+
<div className="pt-4">
79+
<Typography variant="h5" textAlign="center">
80+
Watch our video walkthrough for easy setup
81+
</Typography>
82+
</div>
83+
<div className="text-center mx-auto">
84+
<Typography textAlign="center" variant="body1" maxWidth="70%" sx={{margin: '0 auto'}}>
85+
Secure your AI agents and MCP servers with trusted identities. Create, verify, and manage agent identities
86+
for secure communication and authentication.{' '}
87+
<Link
88+
href={docs()}
89+
openInNewTab
90+
fontStyle={{
91+
fontWeight: 400,
92+
fontSize: '16px',
93+
lineHeight: '24px',
94+
letterSpacing: '0.01em'
95+
}}
96+
>
97+
Learn more in our documentation.
98+
</Link>
99+
</Typography>
100+
</div>
101+
</div>
102+
<div className="hidden md:block">
103+
<Divider orientation="vertical" sx={{margin: '0 auto', height: '600px'}} />
104+
</div>
105+
<div className="w-full md:max-w-[40%] space-y-4 px-8 md:px-4 py-8">
106+
<Typography variant="h6" textAlign="left" marginBottom={'16px'}>
107+
Setup Checklist
108+
</Typography>
109+
<div className="text-left md:pr-6">
110+
<Typography textAlign="left" variant="body2" marginBottom={'16px'}>
111+
Begin setting up your Identity Service to start creating identities and TBAC policies.
112+
</Typography>
113+
<Typography textAlign="left" variant="body2">
114+
Pre-requisite: Ensure you have agentic services (agents and/or an MCP server) capable of consuming and
115+
using these identities within your application.{' '}
116+
</Typography>
117+
</div>
118+
<div className="space-y-3 pt-2">
119+
<div className="flex gap-2 items-start">
120+
<Checkbox
121+
icon={<RadioButtonUnchecked />}
122+
checkedIcon={<CheckCircle />}
123+
disableRipple
124+
disableFocusRipple
125+
disableTouchRipple
126+
checked={setIdp}
127+
sx={{cursor: 'default'}}
128+
/>
129+
<Link
130+
href={PATHS.settings.identityProvider.connection}
131+
fontStyle={{
132+
fontSize: '14px',
133+
color: '#3C4551'
134+
}}
135+
style={{
136+
color: '#3C4551'
137+
}}
138+
onClick={() => {
139+
analyticsTrack('CLICK_NAVIGATION_CONNECT_IDENTITY_PROVIDER');
140+
setSetIdp(true);
141+
}}
142+
>
143+
Configure Identity Provider
144+
</Link>
145+
</div>
146+
<div className="flex gap-2 items-start">
147+
<Checkbox
148+
icon={<RadioButtonUnchecked />}
149+
checkedIcon={<CheckCircle />}
150+
disableRipple
151+
disableFocusRipple
152+
disableTouchRipple
153+
checked={addAgent}
154+
sx={{cursor: 'default'}}
155+
/>
156+
<Link
157+
disabled={setIdp ? false : true}
158+
href={PATHS.agenticServices.add}
159+
fontStyle={{
160+
fontSize: '14px',
161+
color: '#3C4551'
162+
}}
163+
style={{
164+
color: '#3C4551'
165+
}}
166+
onClick={() => {
167+
analyticsTrack('CLICK_NAVIGATION_ADD_AGENTIC_SERVICE');
168+
setAddAgent(true);
169+
}}
170+
>
171+
Add Agentic Service
172+
</Link>
173+
</div>
174+
<div className="flex gap-2 items-start">
175+
<Checkbox
176+
icon={<RadioButtonUnchecked />}
177+
checkedIcon={<CheckCircle />}
178+
disableRipple
179+
disableFocusRipple
180+
disableTouchRipple
181+
checked={createBadge}
182+
sx={{cursor: 'default'}}
183+
/>
184+
<Link
185+
disabled={!(setIdp && addAgent)}
186+
href={PATHS.agenticServices.base}
187+
fontStyle={{
188+
fontSize: '14px',
189+
color: '#3C4551'
190+
}}
191+
style={{
192+
color: '#3C4551'
193+
}}
194+
onClick={() => {
195+
analyticsTrack('CLICK_NAVIGATION_CREATE_BADGE');
196+
setCreateBadge(true);
197+
}}
198+
>
199+
Create Badge
200+
</Link>
201+
</div>
202+
<div className="flex gap-2 items-start">
203+
<Checkbox
204+
icon={<RadioButtonUnchecked />}
205+
checkedIcon={<CheckCircle />}
206+
disableRipple
207+
disableFocusRipple
208+
disableTouchRipple
209+
checked={createPolicy}
210+
sx={{cursor: 'default'}}
211+
/>
212+
<div>
213+
<Link
214+
disabled={!(setIdp && addAgent && createBadge)}
215+
href={PATHS.policies.create}
216+
fontStyle={{
217+
fontSize: '14px',
218+
color: '#3C4551'
219+
}}
220+
style={{
221+
color: '#3C4551'
222+
}}
223+
onClick={() => {
224+
analyticsTrack('CLICK_NAVIGATION_ADD_POLICY');
225+
setCreatePolicy(true);
226+
}}
227+
>
228+
Create TBAC Policy
229+
</Link>
230+
<Typography variant="body2" fontSize={'12px'} marginTop={'4px'}>
231+
Note: To add TBAC policies, you must have at least two agentic services registered.
232+
</Typography>
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
</div>
239+
</div>
240+
</ScrollShadowWrapper>
241+
);
242+
};

‎frontend/src/components/dashboard/empty-dashboard.tsx‎

Lines changed: 0 additions & 108 deletions
This file was deleted.

‎frontend/src/components/dashboard/play-button.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Copyright 2025 AGNTCY Contributors (https://github.com/agntcy)
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
export const PlayButton = () => {
7+
return (
8+
<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<circle cx="39" cy="39" r="39" fill="#C5D3E8" />
10+
<path d="M28 23L58 39L28 55V23Z" fill="#1565C0" />
11+
</svg>
12+
);
13+
};

0 commit comments

Comments
 (0)