Skip to content

Commit

Permalink
webserver: add implementation for uploading tnf config file and add a…
Browse files Browse the repository at this point in the history 
…ll the fields (redhat-best-practices-for-k8s#1644)

* test test

* Update webserver.go

* Update index.js

* Update webserver.go
  • Loading branch information
@aabughosh @sebrandon1
aabughosh authored and sebrandon1 committed Nov 21, 2023
1 parent 0e973a1 commit c60022c
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 38 deletions.
137 changes: 124 additions & 13 deletions cnf-certification-test/webserver/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -9,6 +10,9 @@
sizes="any"
href="https://ux.redhat.com/assets/logo-red-hat.svg">
<link rel="stylesheet" href="https://ux.redhat.com/assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<script type="importmap">
{
"imports": {
Expand Down Expand Up @@ -61,7 +65,11 @@
align-items: center;
gap: var(--rh-space-xl, 24px);
}

.labeltest {
display: inline-block;
vertical-align: middle;
margin-right: 10px; /* Add some margin for spacing */
}
h1, h2, h3, h4 {
font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
}
Expand Down Expand Up @@ -90,8 +98,29 @@
fieldset {
display: grid;
flex: 1 1 100%;
margin-bottom: 20px; /* Add space between fieldsets */
padding: 10px;
}

.form-container {
height: 1200px; /* Set the desired height */
overflow: auto; /* Add scrollbar when content overflows */
border: 1px solid #ccc; /* Optional: add a border for visibility */
flex: 1 1 100%;
}

.add{
margin-left: auto;
cursor: pointer;
font-weight: var(--rh-font-weight-heading-bold, 500);
}

.remove{
margin-left: auto;
cursor: pointer;
font-weight: var(--rh-font-weight-heading-bold, 500);
}

label {
display: block;
font-weight: var(--rh-font-weight-heading-bold, 700);
Expand All @@ -115,6 +144,7 @@
await Promise.all(['rh-button','pf-text-input'].map(x => customElements.whenDefined(x)));
document.body.style.removeProperty('--main-opacity');
</script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml/dist/js-yaml.min.js"></script>

<script type="module">
// import design system element definitions,
Expand All @@ -141,8 +171,9 @@
await import('./logs.js')
});
</script>

<script inline src="index.js"></script>
</head>

<body style="--main-opacity:0;">
<header>
<img alt="Red Hat"
Expand All @@ -153,7 +184,6 @@

<main>
<h1>CNF Certification Test</h1>

<form id="form">
<!-- see https://ux.redhat.com/patterns/form/ for design guidelines-->

Expand All @@ -165,37 +195,118 @@ <h1>CNF Certification Test</h1>
required
type="file"></input>
</fieldset>

<fieldset>
<h9 class="labeltest" for="tnfFile">Upload TNF Configuration File:</h9>
<input type="file" id="tnfFile" >
<div class="form-container">
<fieldset id="TNF-Configuration">
<legend>TNF Configuration</legend>

<label for="targetNameSpaces">Target Namespaces</label>
<pf-text-input id="targetNameSpaces"
name="targetNameSpaces"></pf-text-input>

<span class="fa add" id="targetNameSpacesadd"> Add NameSpace </span>
<span class="fa remove" id="targetNameSpacesremove">Remove NameSpace</span>
<br>
<label for="podsUnderTestLabels">podsUnderTestLabels:</label>
<pf-text-input id="podsUnderTestLabels"
name="podsUnderTestLabels"
placeholder="test-network-function.com/generic: target"></pf-text-input>
<span class="fa add" id="podsUnderTestLabelsadd"> Add podsUnderTestLabels </span><br>
<span class="fa remove" id="podsUnderTestLabelsremove"> Remove podsUnderTestLabels </span>

<br>
<label for="operatorsUnderTestLabels">operatorsUnderTestLabels:</label>
<span class="fa add" id="operatorsUnderTestLabelsadd"> Add operatorsUnderTestLabels </span><br>
<span class="fa remove" id="operatorsUnderTestLabelsremove"> Remove operatorsUnderTestLabels </span>

<label for="targetCrdFilters">targetCrdFilters:</label>
<span class="fa add" id="targetCrdFiltersadd"> Add targetCrdFilters </span><br>
<span class="fa remove" id="targetCrdFiltersremove"> Remove targetCrdFilters </span>

<label for="managedDeployments">managedDeployments:</label>
<span class="fa add" id="managedDeploymentsadd"> Add managedDeployments </span><br>
<span class="fa remove" id="managedDeploymentsremove"> Remove managedDeployments </span>


<label for="managedStatefulsets">managedStatefulsets:</label>
<span class="fa add" id="managedStatefulsetsadd"> Add managedStatefulsets </span><br>
<span class="fa remove" id="managedStatefulsetsremove"> Remove managedStatefulsets </span>

<label for="acceptedKernelTaints">acceptedKernelTaints:</label>
<span class="fa add" id="acceptedKernelTaintsadd"> Add acceptedKernelTaints </span><br>
<span class="fa remove" id="acceptedKernelTaintsremove"> Remove acceptedKernelTaints </span>

<label for="skipHelmChartList">skipHelmChartList:</label>
<span class="fa add" id="skipHelmChartListadd"> Add skipHelmChartList </span><br>
<span class="fa remove" id="skipHelmChartListremove"> Remove skipHelmChartList </span>


<label for="skipScalingTestDeployments">skipScalingTestDeployments:</label>
<span class="fa add" id="skipScalingTestDeploymentsadd"> Add skipScalingTestDeployments </span><br>
<span class="fa remove" id="skipScalingTestDeploymentsremove"> Remove skipScalingTestDeployments </span>

<label for="skipScalingTestStatefulsets">skipScalingTestStatefulsets:</label>
<span class="fa add" id="skipScalingTestStatefulsetsadd"> Add skipScalingTestStatefulsets </span><br>
<span class="fa remove" id="skipScalingTestStatefulsetsremove"> Remove skipScalingTestStatefulsets </span>

<label for="servicesignorelist">servicesignorelist:</label>
<span class="fa add" id="servicesignorelistadd"> Add servicesignorelist </span><br>
<span class="fa remove" id="servicesignorelistremove"> Remove servicesignorelist </span>

<label for="executedBy">executedBy:</label>
<pf-text-input id="executedBy"
name="executedBy"></pf-text-input>
<label for="PartnerName">PartnerName:</label>
<pf-text-input id="PartnerName"
name="PartnerName"></pf-text-input>
<label for="CollectorAppEndPoint">CollectorAppEndPoint:</label>
<pf-text-input id="CollectorAppEndPoint"
name="CollectorAppEndPoint"></pf-text-input>
<label for="CollectorAppPassword">CollectorAppPassword:</label>
<pf-text-input id="CollectorAppPassword"
name="CollectorAppPassword"></pf-text-input>

<label for="ValidProtocolNames">ValidProtocolNames:</label>
<span class="fa add" id="ValidProtocolNamesadd"> Add ValidProtocolNames </span><br>
<span class="fa remove" id="ValidProtocolNamesremove"> Remove ValidProtocolNames </span>

<label for="DebugDaemonSetNamespace">DebugDaemonSetNamespace:</label>
<pf-text-input id="DebugDaemonSetNamespace"
name="DebugDaemonSetNamespace"></pf-text-input>

</fieldset>
</div>

<fieldset>
<legend>Select a Test</legend>
<label>
<input type="checkbox"
value="lifecycle"
name="selectedOptions"> Lifecycle
<input type="checkbox"
value="manageability"
name="selectedOptions">Manageability
</label>
<label>
<input type="checkbox"
value="certification"
value="affiliated-certification"
name="selectedOptions"> Certification
<input type="checkbox"
value="operator"
name="selectedOptions"> Operator
</label>
<label>
<input type="checkbox"
value="access-control"
name="selectedOptions"> Access Control
<input type="checkbox"
value="platform-alteration"
name="selectedOptions"> Platform Alteration
</label>
<label>
<input type="checkbox"
value="networking"
name="selectedOptions"> Networking
<input type="checkbox"
value="performance"
name="selectedOptions"> Performance

</label>

</fieldset>

<rh-button type="submit" name="submit">Run Certification Test</rh-button>
Expand Down
33 changes: 29 additions & 4 deletions cnf-certification-test/webserver/submit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,40 @@
export async function submit(form) {
form.elements.submit.disabled = true;
const formdata = new FormData(form);
// Iterate over form elements and add those with non-empty values to FormData
Array.from(form.elements).forEach(element => {
if ( element.hasAttribute('value') && element.type!="checkbox") {
console.log(element)
console.log(element.value)
console.log((element.id.match(/[a-zA-Z]/g) || []).join(''))
formdata.append((element.id.match(/[a-zA-Z]/g) || []).join(''), element.value);
}
});
console.log(JSON.stringify(Object.fromEntries(formdata)))
for (const el of form.elements) if (el instanceof HTMLFieldSetElement) el.disabled = true

console.log(Array.from(formdata.entries()));

// Collect data from form fields
const fields = Array.from(formdata.entries()).reduce((acc, [key, val]) => ({ ...acc,
[key]: key in acc ? [acc[key], val] : val
}), {});
const fields = Array.from(formdata.entries()).reduce((acc, [key, val]) => {
console.log(acc[key]);
console.log(val);

if (acc[key] === undefined) {
// If the key is not in the accumulator, set it to the value or an array with the value
acc[key] = [val];
} else if (Array.isArray(acc[key])) {
// If the key is already an array, push the new value to the array
acc[key].push(val);
} else {
// If the key is a single value, convert it to an array with both values
acc[key] = [acc[key], val];
}
return acc;
}, {});

delete fields.submit;
console.log(fields);
console.log(formdata)
formdata.append("jsonData", JSON.stringify(fields));

// Send an HTTP request to the server to run the function
Expand Down
59 changes: 38 additions & 21 deletions cnf-certification-test/webserver/webserver.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import (
"github.com/test-network-function/cnf-certification-test/pkg/certsuite"
"github.com/test-network-function/cnf-certification-test/pkg/configuration"
"github.com/test-network-function/cnf-certification-test/pkg/provider"
"gopkg.in/yaml.v2"
yaml "gopkg.in/yaml.v2"
)

type webServerContextKey string
Expand All @@ -46,6 +46,10 @@ var logs []byte

//go:embed toast.js
var toast []byte

//go:embed index.js
var index []byte

var Buf *bytes.Buffer

var upgrader = websocket.Upgrader{
Expand Down Expand Up @@ -83,31 +87,32 @@ func logStreamHandler(w http.ResponseWriter, r *http.Request) {
}

type RequestedData struct {
SelectedOptions interface{} `json:"selectedOptions"`
SelectedOptions []string `json:"selectedOptions"`
TargetNameSpaces []string `json:"targetNameSpaces"`
PodsUnderTestLabels []string `json:"podsUnderTestLabels"`
OperatorsUnderTestLabels []string `json:"operatorsUnderTestLabels"`
ManagedDeployments []string `json:"managedDeployments"`
ManagedStatefulsets []string `json:"managedStatefulsets"`
SkipScalingTestDeploymentsnamespace []string `json:"skipScalingTestDeploymentsnamespace"`
SkipScalingTestDeploymentsname []string `json:"skipScalingTestDeploymentsname"`
SkipScalingTestStatefulsetsnamespace []string `json:"skipScalingTestStatefulsetsnamespace"`
SkipScalingTestStatefulsetsname []string `json:"skipScalingTestStatefulsetsname"`
TargetCrdFiltersnameSuffix []string `json:"targetCrdFiltersnameSuffix"`
TargetCrdFiltersscalable []string `json:"targetCrdFiltersscalable"`
AcceptedKernelTaints []string `json:"acceptedKernelTaints"`
SkipHelmChartList []string `json:"skipHelmChartList"`
Servicesignorelist []string `json:"servicesignorelist"`
ValidProtocolNames []string `json:"ValidProtocolNames"`
DebugDaemonSetNamespace []string `json:"DebugDaemonSetNamespace"`
CollectorAppEndPoint []string `json:"CollectorAppEndPoint"`
ExecutedBy []string `json:"executedBy"`
CollectorAppPassword []string `json:"CollectorAppPassword"`
PartnerName []string `json:"PartnerName"`
}
type ResponseData struct {
Message string `json:"message"`
}

func FlattenData(data interface{}, result []string) []string {
switch v := data.(type) {
case string:
result = append(result, v)
case []interface{}:
for _, item := range v {
result = FlattenData(item, result)
}
case map[string]interface{}:
for key, item := range v {
if key == "selectedOptions" {
result = FlattenData(item, result)
}
result = FlattenData(item, result)
}
}
return result
}

func installReqHandlers() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
// Set the content type to "text/html".
Expand Down Expand Up @@ -152,6 +157,18 @@ func installReqHandlers() {
return
}
})

http.HandleFunc("/index.js", func(w http.ResponseWriter, r *http.Request) {
// Set the content type to "application/javascript".
w.Header().Set("Content-Type", "application/javascript")
// Write the embedded JavaScript content to the response.
_, err := w.Write(index)
if err != nil {
http.Error(w, "Failed to write response", http.StatusInternalServerError)
return
}
})

// Serve the static HTML file
http.HandleFunc("/logstream", logStreamHandler)
}
Expand Down

0 comments on commit c60022c

Please sign in to comment.