Skip to content

Commit c0b9ab5

Browse files
jpinsonneaujpinsonneau
authored
Merge pull request #604 from jpinsonneau/1814
NETOBSERV-1814 add cypress checks on fields
2 parents 0aa90c5 + f98acd1 commit c0b9ab5

File tree

10 files changed

+241
-116
lines changed

10 files changed

+241
-116
lines changed

‎config/sample-config.yaml‎

Lines changed: 149 additions & 101 deletions
Large diffs are not rendered by default.

‎mocks/loki/flow_records.json‎

Lines changed: 12 additions & 12 deletions
Large diffs are not rendered by default.

‎pkg/config/config.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ type Frontend struct {
141141
Deduper Deduper `yaml:"deduper" json:"deduper"`
142142
Fields []FieldConfig `yaml:"fields" json:"fields"`
143143
DataSources []string `yaml:"dataSources" json:"dataSources"`
144+
LokiMocks bool `yaml:"lokiMocks,omitempty" json:"lokiMocks,omitempty"`
144145
PromLabels []string `yaml:"promLabels" json:"promLabels"`
145146
MaxChunkAgeMs int `yaml:"maxChunkAgeMs,omitempty" json:"maxChunkAgeMs,omitempty"` // populated at query time
146147
}
@@ -216,6 +217,7 @@ func ReadFile(version, date, filename string) (*Config, error) {
216217

217218
if cfg.IsLokiEnabled() {
218219
cfg.Frontend.DataSources = append(cfg.Frontend.DataSources, string(constants.DataSourceLoki))
220+
cfg.Frontend.LokiMocks = cfg.Loki.UseMocks
219221
}
220222

221223
if cfg.IsPromEnabled() {

‎web/cypress/e2e/table/fields.spec.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/// <reference types="cypress" />
2+
import r from './../../../../mocks/loki/flow_records.json';
3+
4+
describe('netflow-table', () => {
5+
beforeEach(() => {
6+
// this test bench only work with mocks
7+
cy.intercept('GET', '/api/loki/flow/records?*', {
8+
statusCode: 200,
9+
body: r.data,
10+
});
11+
cy.openNetflowTrafficPage(true);
12+
13+
//move to table view
14+
cy.get('.tableTabButton').click();
15+
//clear default app filters
16+
cy.get('#clear-all-filters-button').click();
17+
});
18+
19+
it('display content correctly', () => {
20+
// select first row
21+
cy.get('#netflow-table-row-0').click()
22+
// check for side panel content
23+
24+
// Dates
25+
//cy.checkRecordField('StartTime', 'Start Time', ['Feb 15, 2024', '4:44:27.121 PM']);
26+
//cy.checkRecordField('EndTime', 'End Time', ['Feb 15, 2024', '4:44:27.121 PM']);
27+
28+
// Source accordion
29+
cy.get('[data-test-id="group-2"]').contains("Source");
30+
cy.checkRecordField('SrcK8S_Name', 'Name', ['N', 'ip-10-0-1-7.ec2.internal']);
31+
cy.checkRecordField('SrcK8S_Type', 'Kind', ['Node']);
32+
cy.checkRecordField('SrcAddr', 'IP', ['10.0.1.7']);
33+
cy.checkRecordField('SrcPort', 'Port', ['50104']);
34+
cy.checkRecordField('SrcMac', 'MAC', ['02:27:A1:A8:84:B9']);
35+
36+
// Destination accordion
37+
cy.get('[data-test-id="group-3"]').contains("Destination");
38+
cy.checkRecordField('DstAddr', 'IP', ['10.0.1.140']);
39+
cy.checkRecordField('DstPort', 'Port', ['https', '443']);
40+
cy.checkRecordField('DstMac', 'MAC', ['02:7B:32:68:BE:65']);
41+
42+
// others
43+
cy.checkRecordField('K8S_FlowLayer', 'Flow layer', ['infra']);
44+
45+
cy.get('[data-test-id="group-5"]').contains("L3 Layer");
46+
cy.checkRecordField('Proto', 'Protocol', ['ICMP']);
47+
cy.checkRecordField('Dscp', 'DSCP', ['Standard']);
48+
49+
cy.get('[data-test-id="group-6"]').contains("ICMP");
50+
cy.checkRecordField('IcmpType', 'Type', ['ICMP_DEST_UNREACH']);
51+
cy.checkRecordField('IcmpCode', 'Code', ['ICMP_NET_UNREACH']);
52+
53+
cy.checkRecordField('FlowDirection', 'Node Direction', ['Egress']);
54+
cy.checkRecordField('FlowDirInts', 'Interfaces and Directions', ['br-ex', 'test', 'Egress', 'Ingress']);
55+
56+
cy.checkRecordField('Bytes', 'Bytes', ['66 bytes sent']);
57+
cy.checkRecordField('Packets', 'Packets', ['1 packets sent']);
58+
});
59+
})

‎web/cypress/support/commands.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,15 @@ Cypress.Commands.add('changeMetricType', (name) => {
182182
cy.get('[data-layer-id="default"]').children().its('length').should('be.gte', 5);
183183
});
184184

185+
Cypress.Commands.add('checkRecordField', (field, name, values) => {
186+
cy.get(`[data-test-id="drawer-field-${field}"]`).contains(name);
187+
values.forEach(v => {
188+
cy.get(`[data-test-id="drawer-field-${field}"]`)
189+
.children('.record-field-content,.record-field-flex-container')
190+
.should('contain', v);
191+
});
192+
});
193+
185194
declare global {
186195
namespace Cypress {
187196
interface Chainable {
@@ -202,6 +211,7 @@ declare global {
202211
changeTimeRange(name: string, topology?: boolean): Chainable<Element>
203212
changeMetricFunction(name: string): Chainable<Element>
204213
changeMetricType(name: string): Chainable<Element>
214+
checkRecordField(field: string, name: string, values: string[])
205215
}
206216
}
207217
}

‎web/cypress/support/const.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const availablePanelsCount = 4;
1010
export const defaultPanelsCount = 2;
1111

1212
// table specific config
13-
export const availableColumnGroupCount = 29;
14-
export const availableColumnCount = 55;
13+
export const availableColumnGroupCount = 30;
14+
export const availableColumnCount = 56;
1515
export const defaultColumnGroupCount = 6;
1616
export const defaultColumnCount = 11;

‎web/src/components/tabs/netflow-table/netflow-table-row.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Size } from '../../dropdowns/table-display-dropdown';
88
import './netflow-table-row.css';
99

1010
export interface NetflowTableRowProps {
11+
rowNumber?: number;
1112
allowPktDrops: boolean;
1213
lastRender?: string;
1314
flow: Record;
@@ -23,6 +24,7 @@ export interface NetflowTableRowProps {
2324
}
2425

2526
export const NetflowTableRow: React.FC<NetflowTableRowProps> = ({
27+
rowNumber,
2628
allowPktDrops,
2729
lastRender,
2830
flow,
@@ -43,6 +45,7 @@ export const NetflowTableRow: React.FC<NetflowTableRowProps> = ({
4345
return (
4446
<CSSTransition in={highlight} appear={highlight} timeout={100} classNames="newflow">
4547
<Tr
48+
id={`netflow-table-row-${rowNumber || 0}`}
4649
data-last-render={lastRender || ''}
4750
data-test={`tr-${flow.key}`}
4851
isRowSelected={flow.key === selectedRecord?.key}

‎web/src/components/tabs/netflow-table/netflow-table.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ export const NetflowTable: React.FC<NetflowTableProps> = React.forwardRef(
243243

244244
return getSortedFlows().map((f, i) => (
245245
<NetflowTableRow
246+
rowNumber={i}
246247
key={f.key}
247248
allowPktDrops={props.allowPktDrops}
248249
flow={f}

‎web/src/model/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export type Config = {
3131
deduper: Deduper;
3232
fields: FieldConfig[];
3333
dataSources: string[];
34+
lokiMocks: boolean;
3435
promLabels: string[];
3536
maxChunkAgeMs?: number;
3637
};
@@ -57,6 +58,7 @@ export const defaultConfig: Config = {
5758
},
5859
fields: [],
5960
dataSources: ['loki', 'prom'],
61+
lokiMocks: false,
6062
promLabels: [],
6163
maxChunkAgeMs: undefined
6264
};

‎web/src/utils/icmp.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const getICMPType = (p: number, v: icmpAllTypesValues): ReadOnlyValue | u
189189
};
190190

191191
export const getICMPCode = (p: number, t?: icmpAllTypesValues, c?: icmpAllCodesValues): ReadOnlyValue | undefined => {
192-
if (!isValidICMPProto(p) || !t || !c) {
192+
if (!isValidICMPProto(p) || t === undefined || c === undefined) {
193193
return undefined;
194194
}
195195

0 commit comments

Comments
 (0)