Skip to content

Commit 28ac452

Browse files
marle3003marle3003
committed
add Demo Dashboard to website (WIP)
add mail config AllowUnknownSenders
1 parent e606a92 commit 28ac452

36 files changed

Lines changed: 2692 additions & 10 deletions

‎webui/.env.dashboard‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_WEBSITE=false

‎webui/e2e/dashboard-demo/dashboard.spec.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { test, expect } from '../models/fixture-dashboard'
2+
import { getCellByColumnName } from '../helpers/table'
3+
4+
test.use({ colorScheme: 'light' })
5+
// reset storage state
6+
test.use({ storageState: { cookies: [], origins: [] } });
7+
8+
test('Visit Dashboard Demo Overview', async ({ page }) => {
9+
await page.goto('/dashboard-demo');
10+
11+
await test.step('Verify app metrics', async () => {
12+
const main = page.locator('main')
13+
14+
await expect(main.locator('a[aria-current="page"]')).toHaveText('Overview');
15+
16+
await expect(main.getByLabel('Uptime Since')).not.toHaveText('-')
17+
await expect(main.getByLabel('Started at')).not.toHaveText('-')
18+
})
19+
20+
await test.step('Verify Swagger Petstore is in the HTTP table', async() => {
21+
const table = page.getByRole('table', { name: 'HTTP APIs' })
22+
await expect(table).toBeVisible()
23+
24+
const row = table.getByRole('row').filter({ hasText: 'Swagger Petstore' })
25+
await expect(row).toBeVisible()
26+
await expect(await getCellByColumnName(table, 'Requests / Errors', row)).toContainText('2 / 0')
27+
})
28+
29+
await test.step('Verify Kafka Order Service is in the Kafka Clusters table', async() => {
30+
const table = page.getByRole('table', { name: 'Kafka Clusters' })
31+
await expect(table).toBeVisible()
32+
33+
const row = table.getByRole('row').filter({ hasText: 'Kafka Order Service API' })
34+
await expect(row).toBeVisible()
35+
await expect(await getCellByColumnName(table, 'Messages', row)).toContainText('1')
36+
})
37+
38+
await test.step('Verify Mail Server is in the Mail table', async() => {
39+
const table = page.getByRole('table', { name: 'Mail Servers' })
40+
await expect(table).toBeVisible()
41+
42+
const row = table.getByRole('row').filter({ hasText: 'Mail Server' })
43+
await expect(row).toBeVisible()
44+
await expect(await getCellByColumnName(table, 'Messages', row)).toContainText('2')
45+
})
46+
47+
await test.step('Verify LDAP Testserver is in the LDAP table', async() => {
48+
const table = page.getByRole('table', { name: 'LDAP Servers' })
49+
await expect(table).toBeVisible()
50+
51+
const row = table.getByRole('row').filter({ hasText: 'HR Employee Directory' })
52+
await expect(row).toBeVisible()
53+
await expect(await getCellByColumnName(table, 'Requests', row)).toContainText('0' /*TODO fix error*/)
54+
})
55+
})

‎webui/e2e/dashboard-demo/kafka.spec.ts‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import { test, expect } from '../models/fixture-dashboard'
2+
import { getCellByColumnName } from '../helpers/table'
3+
4+
test.use({ colorScheme: 'light' })
5+
// reset storage state
6+
test.use({ storageState: { cookies: [], origins: [] } });
7+
8+
test('Visit Kafka Order Service', async ({ page }) => {
9+
10+
await page.goto('/dashboard-demo');
11+
await page.getByText('Kafka Order Service API').click();
12+
13+
await test.step('Verify service info', async () => {
14+
15+
await expect(page.getByLabel('Name')).toHaveText('Kafka Order Service API');
16+
await expect(page.getByLabel('Version')).toHaveText('1.0.0');
17+
await expect(page.getByLabel('Description')).toHaveText('An API to process customer orders and notify about order status updates using Kafka.')
18+
19+
});
20+
21+
await test.step('Verify Brokers', async () => {
22+
23+
await expect(page.getByRole('region', { name: 'Brokers' })).toBeVisible();
24+
const table = page.getByRole('table', { name: 'Brokers' });
25+
const rows = table.locator('tbody tr');
26+
await expect(rows).toHaveCount(1);
27+
await expect(await getCellByColumnName(table, 'Name', rows.nth(0))).toHaveText('development');
28+
await expect(await getCellByColumnName(table, 'Host', rows.nth(0))).toHaveText('localhost:9092');
29+
await expect(await getCellByColumnName(table, 'Description', rows.nth(0))).toHaveText('Local development Kafka broker.');
30+
31+
});
32+
33+
await test.step('Verify Topics', async () => {
34+
35+
await expect(page.getByRole('region', { name: 'Topics' })).toBeVisible();
36+
const table = page.getByRole('table', { name: 'Topics' });
37+
const rows = table.locator('tbody tr');
38+
await expect(rows).toHaveCount(1);
39+
await expect(await getCellByColumnName(table, 'Name', rows.nth(0))).toHaveText('order-topic');
40+
await expect(await getCellByColumnName(table, 'Description', rows.nth(0))).toHaveText('The Kafka topic for order events.');
41+
await expect(await getCellByColumnName(table, 'Last Message', rows.nth(0))).not.toHaveText('-');
42+
await expect(await getCellByColumnName(table, 'Messages', rows.nth(0))).toHaveText('1');
43+
44+
});
45+
46+
await test.step('Verify Groups', async () => {
47+
48+
await expect(page.getByRole('region', { name: 'Groups' })).toBeVisible();
49+
const table = page.getByRole('table', { name: 'Groups' });
50+
const rows = table.locator('tbody tr');
51+
await expect(rows).toHaveCount(1);
52+
await expect(await getCellByColumnName(table, 'Name', rows.nth(0))).toHaveText('order-status-group-100');
53+
await expect(await getCellByColumnName(table, 'State', rows.nth(0))).toHaveText('Stable');
54+
await expect(await getCellByColumnName(table, 'Protocol', rows.nth(0))).toHaveText('RoundRobinAssigner');
55+
await expect(await getCellByColumnName(table, 'Coordinator', rows.nth(0))).toHaveText('localhost:9092');
56+
await expect(await getCellByColumnName(table, 'Leader', rows.nth(0))).toHaveText(/^producer/);
57+
const members = await getCellByColumnName(table, 'Members', rows.nth(0))
58+
await expect(members).toHaveText(/^producer/);
59+
60+
await members.hover();
61+
const tooltip = page.getByRole('tooltip')
62+
await expect(tooltip).toBeVisible();
63+
await expect(tooltip.getByLabel('Address')).not.toBeEmpty();
64+
await expect(tooltip.getByLabel('Client Software')).toHaveText('-');
65+
await expect(tooltip.getByLabel('Last Heartbeat')).not.toBeEmpty();
66+
await expect(tooltip.getByLabel('Topics')).toHaveText('order-topic');
67+
68+
await rows.nth(0).getByRole('cell').nth(0).click();
69+
const dialog = page.getByRole('dialog', { name: 'Group Details' });
70+
await expect(dialog).toBeVisible();
71+
await expect(dialog.getByLabel('Name')).toHaveText('order-status-group-100');
72+
await expect(dialog.getByLabel('State')).toHaveText('Stable');
73+
await expect(dialog.getByLabel('Protocol')).toHaveText('RoundRobinAssigner');
74+
await expect(dialog.getByLabel('Coordinator')).toHaveText('localhost:9092');
75+
await expect(dialog.getByLabel('Leader')).toHaveText(/^producer/);
76+
77+
await dialog.getByRole('tab', { name: 'Topics' }).click();
78+
const topics = dialog.getByRole('table', { name: 'Topics' });
79+
await expect(await getCellByColumnName(topics, 'Topic')).toHaveText('order-topic');
80+
81+
await dialog.getByRole('tab', { name: 'Members' }).click();
82+
const membersPanel = dialog.getByRole('tabpanel', { name: 'Members' });
83+
await expect(membersPanel).toBeVisible();
84+
await expect(membersPanel.getByRole('tab', { name: /^producer/ })).toHaveAttribute('aria-selected', 'true');
85+
await expect(membersPanel.getByLabel('Address')).not.toBeEmpty();
86+
await expect(membersPanel.getByLabel('Client Software')).toHaveText('-');
87+
await expect(membersPanel.getByLabel('Heartbeat')).not.toBeEmpty();
88+
const memberPartitions = membersPanel.getByRole('table', { name: 'Member Partitions' })
89+
await expect(await getCellByColumnName(memberPartitions, 'Topic')).toHaveText('order-topic');
90+
await expect(await getCellByColumnName(memberPartitions, 'Partitions')).toHaveText('0');
91+
92+
await dialog.getByRole('button', { name: 'Close' }).click();
93+
94+
});
95+
96+
await test.step('Verify Configs', async () => {
97+
const table = page.getByRole('table', { name: 'Configs' });
98+
await expect(await getCellByColumnName(table, 'URL')).toContainText('/webui/scripts/dashboard-demo/demo-configs/asyncapi.yaml');
99+
await expect(await getCellByColumnName(table, 'Provider')).toHaveText('file');
100+
});
101+
102+
await test.step('Verify Recent Messages', async () => {
103+
104+
const region = page.getByRole('region', { name: 'Recent Messages' });
105+
await expect(region).toBeVisible();
106+
107+
const table = region.getByRole('table', { name: 'Recent Messages' });
108+
const rows = table.locator('tbody tr');
109+
await expect(rows).toHaveCount(1);
110+
await expect(await getCellByColumnName(table, 'Key', rows.nth(0))).toHaveText('a914817b-c5f0-433e-8280-1cd2fe44234e');
111+
await expect(await getCellByColumnName(table, 'Value', rows.nth(0))).toContainText('{"orderId":"a914817b-c5f0-433e-8280-1cd2fe44234e","productId":"2a');
112+
await expect(await getCellByColumnName(table, 'Topic', rows.nth(0))).toHaveText('order-topic');
113+
await expect(await getCellByColumnName(table, 'Time', rows.nth(0))).not.toBeEmpty();
114+
115+
})
116+
117+
await test.step('Visit Kafka Topic', async () => {
118+
119+
await page.getByRole('table', { name: 'Topics' }).getByText('order-topic').click();
120+
await expect(page.getByLabel('Topic', { exact: true })).toHaveText('order-topic');
121+
await expect(page.getByLabel('Cluster')).toHaveText('Kafka Order Service API');
122+
await expect(page.getByLabel('Cluster')).toHaveAttribute('href');
123+
await expect(page.getByLabel('Description')).toHaveText('The Kafka topic for order events.');
124+
125+
await expect(page.getByLabel('Type of API')).toHaveText('Kafka');
126+
127+
await test.step('Verify Message', async () => {
128+
129+
await page.getByRole('table', { name: 'Messages' }).locator('tbody tr').click();
130+
await expect(page.getByLabel('Kafka Key')).toHaveText('a914817b-c5f0-433e-8280-1cd2fe44234e');
131+
await expect(page.getByLabel('Kafka Topic')).toHaveText('order-topic');
132+
await expect(page.getByLabel('Kafka Topic')).toHaveAttribute('href', '/dashboard/kafka/service/Kafka%20Order%20Service%20API/topic/order-topic');
133+
await expect(page.getByLabel('Offset')).toHaveText('0');
134+
await expect(page.getByRole('region', { name: 'Meta' }).getByLabel('Content Type')).toHaveText('application/json');
135+
await expect(page.getByLabel('Key Type')).toHaveText('-');
136+
await expect(page.getByLabel('Key Type')).not.toBeEmpty();
137+
138+
const value = page.getByRole('region', { name: 'Value' });
139+
await expect(value.getByLabel('Content Type')).toHaveText('application/json');
140+
await expect(value.getByLabel('Lines of Code')).toHaveText('7 lines');
141+
await expect(value.getByLabel('Size of Code')).toHaveText('196 B');
142+
await expect(value.getByLabel('Size of Code')).toHaveText('196 B');
143+
await expect(value.getByLabel('Content', { exact: true })).toContainText('"orderId": "a914817b-c5f0-433e-8280-1cd2fe44234e",')
144+
145+
await page.goBack();
146+
147+
});
148+
149+
await test.step('Verify Paritions', async () => {
150+
151+
await page.getByRole('tab', { name: 'Partitions' }).click();
152+
const table = page.getByRole('table', { name: 'Partitions' });
153+
const rows = table.locator('tbody tr');
154+
await expect(rows).toHaveCount(1);
155+
await expect(await getCellByColumnName(table, 'ID')).toHaveText('0');
156+
await expect(await getCellByColumnName(table, 'Leader')).toHaveText('development (localhost:9092)');
157+
await expect(await getCellByColumnName(table, 'Start Offset')).toHaveText('0');
158+
await expect(await getCellByColumnName(table, 'Offset')).toHaveText('1');
159+
await expect(await getCellByColumnName(table, 'Segments')).toHaveText('1');
160+
161+
});
162+
163+
await test.step('Verify Groups', async () => {
164+
165+
await page.getByRole('tab', { name: 'Groups' }).click();
166+
const table = page.getByRole('table', { name: 'Groups' });
167+
const rows = table.locator('tbody tr');
168+
await expect(rows).toHaveCount(1);
169+
await expect(await getCellByColumnName(table, 'Name')).toHaveText('order-status-group-100');
170+
await expect(await getCellByColumnName(table, 'State')).toHaveText('Stable');
171+
await expect(await getCellByColumnName(table, 'Protocol')).toHaveText('RoundRobinAssigner');
172+
await expect(await getCellByColumnName(table, 'Coordinator')).toHaveText('localhost:9092');
173+
await expect(await getCellByColumnName(table, 'Leader')).toHaveText(/^producer/);
174+
await expect(await getCellByColumnName(table, 'Members')).toContainText(/^producer/);
175+
await expect(await getCellByColumnName(table, 'Lag')).toHaveText('0');
176+
177+
});
178+
179+
await test.step('Verify Configs', async () => {
180+
181+
await page.getByRole('tab', { name: 'Configs' }).click();
182+
const configs = page.getByRole('tabpanel', { name: 'Configs' });
183+
await expect(configs.getByLabel('Name')).toHaveText('OrderCreatedEvent');
184+
await expect(configs.getByLabel('Title')).toHaveText('Order Created Event');
185+
await expect(configs.getByLabel('Summary')).toHaveText('Notification that a new order has been created.');
186+
await expect(configs.getByLabel('Message Content Type', { exact: true })).toHaveText('application/json');
187+
const value = configs.getByRole('tabpanel', { name: 'Value'})
188+
await expect(value.getByLabel('Lines of Code').nth(0)).toHaveText('41 lines');
189+
await expect(value.getByLabel('Size of Code').nth(0)).toHaveText('826 B');
190+
await expect(value.getByRole('region', { name: 'Content' }).nth(0)).toContainText(`"type": "object",
191+
"properties": {`);
192+
193+
});
194+
195+
});
196+
});

‎webui/e2e/dashboard-demo/ldap.spec.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { test, expect } from '../models/fixture-dashboard'
2+
import { getCellByColumnName } from '../helpers/table'
3+
4+
test.use({ colorScheme: 'light' })
5+
// reset storage state
6+
test.use({ storageState: { cookies: [], origins: [] } });
7+
8+
test('Visit LDAP Testserver', async ({ page }) => {
9+
10+
await page.goto('/dashboard-demo');
11+
await page.getByRole('cell').getByText('HR Employee Directory').click();
12+
13+
await test.step('Verify service info', async () => {
14+
15+
await expect(page.getByLabel('Name')).toHaveText('HR Employee Directory');
16+
await expect(page.getByLabel('Version')).toHaveText('1.0.0');
17+
await expect(page.getByLabel('Contact')).not.toBeVisible();
18+
await expect(page.getByLabel('Type of API')).toHaveText('LDAP');
19+
await expect(page.getByLabel('Description')).toHaveText('LDAP server for internal employee contact information.');
20+
21+
});
22+
23+
await test.step('Verify Servers', async () => {
24+
25+
const region = page.getByRole('region', { name: 'Servers' });
26+
const table = region.getByRole('table', { name: 'Servers' });
27+
const rows = table.locator('tbody tr');
28+
await expect(rows).toHaveCount(1);
29+
30+
await expect(await getCellByColumnName(table, 'Address', rows.nth(0))).toHaveText(':8389');
31+
32+
});
33+
34+
await test.step('Verify Configs', async () => {
35+
36+
const table = page.getByRole('table', { name: 'Configs' });
37+
await expect(await getCellByColumnName(table, 'URL')).toContainText('/webui/scripts/dashboard-demo/demo-configs/ldap.yaml');
38+
await expect(await getCellByColumnName(table, 'Provider')).toHaveText('file');
39+
40+
});
41+
42+
await test.step('Verify Recent Requests', async () => {
43+
const table = page.getByRole('table', { name: 'Recent Requests' });
44+
let rows = table.locator('tbody tr');
45+
46+
await expect(await getCellByColumnName(table, 'Operation', rows.nth(0))).toHaveText('Modify');
47+
await expect(await getCellByColumnName(table, 'DN', rows.nth(0))).toHaveText('uid=bmiller,ou=people,dc=hr,dc=example,dc=com');
48+
await expect(await getCellByColumnName(table, 'Filter', rows.nth(0))).toBeEmpty();
49+
await expect(await getCellByColumnName(table, 'Status', rows.nth(0))).toHaveText('Success');
50+
await expect(await getCellByColumnName(table, 'Time', rows.nth(0))).not.toBeEmpty();
51+
await expect(await getCellByColumnName(table, 'Duration', rows.nth(0))).not.toBeEmpty();
52+
53+
await expect(await getCellByColumnName(table, 'Operation', rows.nth(1))).toHaveText('Search');
54+
await expect(await getCellByColumnName(table, 'DN', rows.nth(1))).toHaveText('dc=hr,dc=example,dc=com');
55+
await expect(await getCellByColumnName(table, 'Filter', rows.nth(1))).toHaveText('(&(objectCategory=user)(memberOf=cn=Sales,ou=departments,dc=hr,dc=example,dc=com))');
56+
await expect(await getCellByColumnName(table, 'Status', rows.nth(1))).toHaveText('Success');
57+
await expect(await getCellByColumnName(table, 'Time', rows.nth(1))).not.toBeEmpty();
58+
await expect(await getCellByColumnName(table, 'Duration', rows.nth(1))).not.toBeEmpty();
59+
60+
await expect(await getCellByColumnName(table, 'Operation', rows.nth(2))).toHaveText('Search');
61+
await expect(await getCellByColumnName(table, 'DN', rows.nth(2))).toHaveText('dc=hr,dc=example,dc=com');
62+
await expect(await getCellByColumnName(table, 'Filter', rows.nth(2))).toHaveText('(uid=ajohnson)');
63+
await expect(await getCellByColumnName(table, 'Status', rows.nth(2))).toHaveText('Success');
64+
await expect(await getCellByColumnName(table, 'Time', rows.nth(2))).not.toBeEmpty();
65+
await expect(await getCellByColumnName(table, 'Duration', rows.nth(2))).not.toBeEmpty();
66+
67+
});
68+
});

0 commit comments

Comments
 (0)