-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Created basic UI * Binded UI with kube-api * Fixed match and filter mismatch * Added tooltips * Seperated passing and failling tests * Added a badge to show status
- Loading branch information
Showing
9 changed files
with
181 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* eslint-disable react/prop-types */ | ||
| import * as React from 'react'; | ||
| import { Grid } from '@material-ui/core'; | ||
| import YAML from 'json-to-pretty-yaml'; | ||
|
|
||
| const TestStatus = ({ | ||
| type, tests, status, | ||
| }) => ( | ||
| <> | ||
| <div style={{ margin: '10px' }}> | ||
| {`Tested ${type}`} | ||
| </div> | ||
| <Grid container style={{ marginLeft: '30px' }}> | ||
| <Grid item xs={12}> | ||
| <div> | ||
| {tests?.map((match, index) => ( | ||
| <div style={{ display: 'table' }}> | ||
| { | ||
| status[index] | ||
| ? <div className="badge-wrapper"><span className="badge badge-pass">Pass</span></div> | ||
| : <div className="badge-wrapper"><span className="badge badge-fail">Fail</span></div> | ||
| } | ||
| <pre style={{ display: 'inline-block', color: status[index] ? 'green' : 'red' }}> | ||
| { YAML.stringify(match) } | ||
| </pre> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </Grid> | ||
| </Grid> | ||
| </> | ||
| ); | ||
|
|
||
| export default TestStatus; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,67 @@ | ||
| import * as React from 'react'; | ||
| import Container from '@material-ui/core/Container'; | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { | ||
| Container, Grid, Paper, | ||
| } from '@material-ui/core'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { getFlow, getFlowTest } from '../utils/flowtests/flowDetails'; | ||
| import TestStatus from '../components/TestStatus'; | ||
|
|
||
| export default function DetailView() { | ||
| const { uuid } = useParams(); | ||
| const { namespace, name } = useParams(); | ||
| const [flowTest, setFlowTest] = useState(undefined); | ||
| const [flow, setFlow] = useState(undefined); | ||
|
|
||
| useEffect(async () => { | ||
| if (flowTest?.spec?.referenceFlow) { | ||
| setFlow(await getFlow( | ||
| flowTest.spec.referenceFlow.namespace, | ||
| flowTest.spec.referenceFlow.kind, | ||
| flowTest.spec.referenceFlow.name, | ||
| )); | ||
| } | ||
| }, [flowTest]); | ||
|
|
||
| useEffect(async () => { | ||
| setFlowTest(await getFlowTest(namespace, name)); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Container style={{ width: '95%', maxWidth: '100%' }}> | ||
| <h1> | ||
| {`Detail View for flowtest ${uuid}`} | ||
| </h1> | ||
| <h1>{name}</h1> | ||
| <h3>Details</h3> | ||
| <Paper> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={12} xl={6}> | ||
| <div style={{ margin: '10px' }}> | ||
| Status: | ||
| {` ${flowTest?.status?.status}`} | ||
| </div> | ||
| <div style={{ margin: '10px' }}>Reference Flow</div> | ||
| <div style={{ marginLeft: '30px' }}> | ||
| <div>{`Kind: ${flowTest?.spec.referenceFlow.kind}`}</div> | ||
| <div>{`Namespace: ${flowTest?.spec.referenceFlow.namespace}`}</div> | ||
| <div>{`Name: ${flowTest?.spec.referenceFlow.name}`}</div> | ||
| </div> | ||
| <div style={{ margin: '10px' }}>Reference Pod</div> | ||
| <div style={{ marginLeft: '30px' }}> | ||
| <div>{`Namespace: ${flowTest?.spec.referencePod.namespace}`}</div> | ||
| <div>{`Name: ${flowTest?.spec.referencePod.name}`}</div> | ||
| </div> | ||
| <div style={{ margin: '10px' }}>Testing Logs</div> | ||
| <div style={{ marginLeft: '30px' }}> | ||
| {flowTest?.spec?.sentMessages?.map((message) => ( | ||
| <pre> | ||
| { message } | ||
| </pre> | ||
| ))} | ||
| </div> | ||
| </Grid> | ||
| <Grid item xs={12} xl={6}> | ||
| <TestStatus type="Matches" tests={flow?.spec?.match} status={flowTest?.status?.matchStatus} /> | ||
| <TestStatus type="Filters" tests={flow?.spec?.filters} status={flowTest?.status?.filterStatus} /> | ||
| </Grid> | ||
| </Grid> | ||
| </Paper> | ||
| </Container> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /* eslint-disable no-param-reassign */ | ||
| import axios from 'axios'; | ||
| import snackbarUtils from '../../libs/snackbarUtils'; | ||
|
|
||
| export const getFlow = async (namespace, kind, name) => { | ||
| try { | ||
| const res = await axios.get(`k8s/apis/logging.banzaicloud.io/v1beta1/namespaces/${namespace}/${kind.toLowerCase()}s/${name}`); | ||
| return res.data; | ||
| } catch (error) { | ||
| snackbarUtils.error(`[HTTP error]: ${error.message}`); | ||
| snackbarUtils.warning(`Failed to fetch ${kind} ${namespace}.${name}`); | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| export const getFlowTest = async (namespace, name) => { | ||
| try { | ||
| const res = await axios.get(`k8s/apis/loggingplumber.isala.me/v1alpha1/namespaces/${namespace}/flowtests/${name}`); | ||
| return res.data; | ||
| } catch (error) { | ||
| snackbarUtils.error(`[HTTP error]: ${error.message}`); | ||
| snackbarUtils.warning(`Failed to fetch flowtest ${namespace}.${name}`); | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| export const cleanFlowTest = (flowTest) => { | ||
| delete flowTest?.metadata.generation; | ||
| delete flowTest?.metadata.managedFields; | ||
| return flowTest; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters