github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-22 18:36:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/multiarch_build

Browse Source
This commit is contained in:
M. Mert Yildiran 2022-01-17 16:25:01 +03:00
commit 796457d876
55 changed files with 714 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.github/workflows/pr_validation.yml vendored
View File

@ -44,3 +44,18 @@ jobs:
- name: Build Agent
run: make agent
build-ui:
name: Build UI
runs-on: ubuntu-latest
steps:
- name: Set up Node 14
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Check out code into the Go module directory
uses: actions/checkout@v2
- name: Build UI
run: make ui

12
README.md
View File

@ -1,5 +1,17 @@
![Mizu: The API Traffic Viewer for Kubernetes](assets/mizu-logo.svg)
<p align="center">
<a href="https://github.com/up9inc/mizu/releases/latest">
<img alt="GitHub Latest Release" src="https://img.shields.io/github/v/release/up9inc/mizu?logo=GitHub&style=flat-square">
</a>
<a href="https://github.com/up9inc/mizu/blob/main/LICENSE">
<img alt="GitHub License" src="https://img.shields.io/github/license/up9inc/mizu?logo=GitHub&style=flat-square">
</a>
<a href="https://join.slack.com/t/up9/shared_invite/zt-tfjnduli-QzlR8VV4Z1w3YnPIAJfhlQ">
<img alt="Slack" src="https://img.shields.io/badge/slack-join_chat-white.svg?logo=slack&style=social">
</a>
</p>
# The API Traffic Viewer for Kubernetes
A simple-yet-powerful API traffic viewer for Kubernetes enabling you to view all API communication between microservices to help your debug and troubleshoot regressions.

8
acceptanceTests/cypress.json
View File

@ -4,11 +4,17 @@
"viewportHeight": 1080,
"video": false,
"screenshotOnRunFailure": false,
"testFiles":
["tests/GuiPort.js",
"tests/MultipleNamespaces.js",
"tests/Redact.js",
"tests/NoRedact.js",
"tests/Regex.js"],
"env": {
"testUrl": "http://localhost:8899/"
"testUrl": "http://localhost:8899/",
"redactHeaderContent": "User-Header[REDACTED]",
"redactBodyContent": "{ \"User\": \"[REDACTED]\" }"
}
}

0
acceptanceTests/cypress/integration/page_objects/StatusBar.js → acceptanceTests/cypress/integration/testHelpers/StatusBarHelper.js
View File

9
acceptanceTests/cypress/integration/testHelpers/TrafficHelper.js Normal file
View File

@ -0,0 +1,9 @@
export function isValueExistsInElement(shouldInclude, content, domPathToContainer){
it(`should ${shouldInclude ? '' : 'not'} include '${content}'`, function () {
cy.get(domPathToContainer).then(htmlText => {
const allTextString = htmlText.text();
if (allTextString.includes(content) !== shouldInclude)
throw new Error(`One of the containers part contains ${content}`)
});
});
}

2
acceptanceTests/cypress/integration/tests/MultipleNamespaces.js
View File

@ -1,4 +1,4 @@
import {findLineAndCheck, getExpectedDetailsDict} from '../page_objects/StatusBar';
import {findLineAndCheck, getExpectedDetailsDict} from '../testHelpers/StatusBarHelper';
it('opening', function () {
cy.visit(Cypress.env('testUrl'));

8
acceptanceTests/cypress/integration/tests/NoRedact.js Normal file
View File

@ -0,0 +1,8 @@
import {isValueExistsInElement} from '../testHelpers/TrafficHelper';
it('Loading Mizu', function () {
cy.visit(Cypress.env('testUrl'));
})
isValueExistsInElement(false, Cypress.env('redactHeaderContent'), '#tbody-Headers');
isValueExistsInElement(false, Cypress.env('redactBodyContent'), '.hljs');

8
acceptanceTests/cypress/integration/tests/Redact.js Normal file
View File

@ -0,0 +1,8 @@
import {isValueExistsInElement} from '../testHelpers/TrafficHelper';
it('Loading Mizu', function () {
cy.visit(Cypress.env('testUrl'));
})
isValueExistsInElement(true, Cypress.env('redactHeaderContent'), '#tbody-Headers');
isValueExistsInElement(true, Cypress.env('redactBodyContent'), '.hljs');

2
acceptanceTests/cypress/integration/tests/Regex.js
View File

@ -1,4 +1,4 @@
import {getExpectedDetailsDict, checkLine} from '../page_objects/StatusBar';
import {getExpectedDetailsDict, checkLine} from '../testHelpers/StatusBarHelper';
it('opening', function () {

109
acceptanceTests/tap_test.go
View File

@ -3,7 +3,6 @@ package acceptanceTests
import (
"archive/zip"
"bytes"
"encoding/json"
"fmt"
"io/ioutil"
"net/http"
@ -378,59 +377,7 @@ func TestTapRedact(t *testing.T) {
}
}
redactCheckFunc := func() error {
timestamp := time.Now().UnixNano() / int64(time.Millisecond)
entries, err := getDBEntries(timestamp, defaultEntriesCount, 1*time.Second)
if err != nil {
return err
}
err = checkEntriesAtLeast(entries, 1)
if err != nil {
return err
}
firstEntry := entries[0]
entryUrl := fmt.Sprintf("%v/entries/%v", apiServerUrl, firstEntry["id"])
requestResult, requestErr := executeHttpGetRequest(entryUrl)
if requestErr != nil {
return fmt.Errorf("failed to get entry, err: %v", requestErr)
}
entry := requestResult.(map[string]interface{})["data"].(map[string]interface{})
request := entry["request"].(map[string]interface{})
headers := request["_headers"].([]interface{})
for _, headerInterface := range headers {
header := headerInterface.(map[string]interface{})
if header["name"].(string) != "User-Header" {
continue
}
userHeader := header["value"].(string)
if userHeader != "[REDACTED]" {
return fmt.Errorf("unexpected result - user agent is not redacted")
}
}
postData := request["postData"].(map[string]interface{})
textDataStr := postData["text"].(string)
var textData map[string]string
if parseErr := json.Unmarshal([]byte(textDataStr), &textData); parseErr != nil {
return fmt.Errorf("failed to parse text data, err: %v", parseErr)
}
if textData["User"] != "[REDACTED]" {
return fmt.Errorf("unexpected result - user in body is not redacted")
}
return nil
}
if err := retriesExecute(shortRetriesCount, redactCheckFunc); err != nil {
t.Errorf("%v", err)
return
}
runCypressTests(t, fmt.Sprintf("npx cypress run --spec \"cypress/integration/tests/Redact.js\""))
}
func TestTapNoRedact(t *testing.T) {
@ -482,59 +429,7 @@ func TestTapNoRedact(t *testing.T) {
}
}
redactCheckFunc := func() error {
timestamp := time.Now().UnixNano() / int64(time.Millisecond)
entries, err := getDBEntries(timestamp, defaultEntriesCount, 1*time.Second)
if err != nil {
return err
}
err = checkEntriesAtLeast(entries, 1)
if err != nil {
return err
}
firstEntry := entries[0]
entryUrl := fmt.Sprintf("%v/entries/%v", apiServerUrl, firstEntry["id"])
requestResult, requestErr := executeHttpGetRequest(entryUrl)
if requestErr != nil {
return fmt.Errorf("failed to get entry, err: %v", requestErr)
}
entry := requestResult.(map[string]interface{})["data"].(map[string]interface{})
request := entry["request"].(map[string]interface{})
headers := request["_headers"].([]interface{})
for _, headerInterface := range headers {
header := headerInterface.(map[string]interface{})
if header["name"].(string) != "User-Header" {
continue
}
userHeader := header["value"].(string)
if userHeader == "[REDACTED]" {
return fmt.Errorf("unexpected result - user agent is redacted")
}
}
postData := request["postData"].(map[string]interface{})
textDataStr := postData["text"].(string)
var textData map[string]string
if parseErr := json.Unmarshal([]byte(textDataStr), &textData); parseErr != nil {
return fmt.Errorf("failed to parse text data, err: %v", parseErr)
}
if textData["User"] == "[REDACTED]" {
return fmt.Errorf("unexpected result - user in body is redacted")
}
return nil
}
if err := retriesExecute(shortRetriesCount, redactCheckFunc); err != nil {
t.Errorf("%v", err)
return
}
runCypressTests(t, "npx cypress run --spec \"cypress/integration/tests/NoRedact.js\"")
}
func TestTapRegexMasking(t *testing.T) {

2
agent/main.go
View File

@ -128,7 +128,7 @@ func main() {
syncEntriesConfig := getSyncEntriesConfig()
if syncEntriesConfig != nil {
if err := up9.SyncEntries(syncEntriesConfig); err != nil {
panic(fmt.Sprintf("Error syncing entries, err: %v", err))
logger.Log.Error("Error syncing entries, err: %v", err)
}
}

3
cli/README.md.TEMPLATE
View File

@ -1,6 +1,7 @@
# Mizu release _SEM_VER_
Full changelog for stable release see in [docs](https://github.com/up9inc/mizu/blob/main/docs/CHANGELOG.md)
Download Mizu for your platform
## Download Mizu for your platform
**Mac** (Intel)
```

3
cli/cmd/installRunner.go
View File

@ -101,7 +101,8 @@ func watchApiServerPodReady(ctx context.Context, kubernetesProvider *kubernetes.
podWatchHelper := kubernetes.NewPodWatchHelper(kubernetesProvider, podExactRegex)
eventChan, errorChan := kubernetes.FilteredWatch(ctx, podWatchHelper, []string{config.Config.MizuResourcesNamespace}, podWatchHelper)
timeAfter := time.After(1 * time.Minute)
apiServerTimeoutSec := config.GetIntEnvConfig(config.ApiServerTimeoutSec, 120)
timeAfter := time.After(time.Duration(apiServerTimeoutSec) * time.Second)
for {
select {
case wEvent, ok := <-eventChan:

4
cli/cmd/tapRunner.go
View File

@ -306,7 +306,9 @@ func watchApiServerPod(ctx context.Context, kubernetesProvider *kubernetes.Provi
podWatchHelper := kubernetes.NewPodWatchHelper(kubernetesProvider, podExactRegex)
eventChan, errorChan := kubernetes.FilteredWatch(ctx, podWatchHelper, []string{config.Config.MizuResourcesNamespace}, podWatchHelper)
isPodReady := false
timeAfter := time.After(25 * time.Second)
apiServerTimeoutSec := config.GetIntEnvConfig(config.ApiServerTimeoutSec, 120)
timeAfter := time.After(time.Duration(apiServerTimeoutSec) * time.Second)
for {
select {
case wEvent, ok := <-eventChan:

1
cli/config/envConfig.go
View File

@ -7,6 +7,7 @@ import (
const (
ApiServerRetries = "API_SERVER_RETRIES"
ApiServerTimeoutSec = "API_SERVER_TIMEOUT_SEC"
)
func GetIntEnvConfig(key string, defaultValue int) int {

43
docs/CHANGELOG.md Normal file
View File

@ -0,0 +1,43 @@
# CHANGELOG
This document summarizes main and fixes changes published in stable (aka `main`) branch of this project.
Ongoing work and development releases are under `develop` branch.
## 0.22.0
### main features
* Service Mesh support -- mizu is now capable to tap mTLS traffic between pods connected by Istio service mesh
* Use `--service-mesh` option to enable this feature
* New installation option - have the same Mizu functionality as long living pods in your cluster, with password protection
* To install use `mizu install` command
* To access use `mizu view` or `kubectl -n mizu port-forward svc/mizu-api-server`
* To uninstall run `mizu clean`
* At first login
* Set admin password as prompted, use it to login to mizu later on.
* After login, user should select cluster namespaces to tap: by default all namespaces in the cluster are selected, user can select/unselect according to their needs. These settings are retained and can be modified at any time via Settings menu (cog icon on the top-right)
### improvements
* improved Mizu permissions/roles logic to support clusters with strict PodSecurityPolicy (PSP) -- see [PERMISSIONS](PERMISSIONS.md) doc for more details
### notable bug fixes
* mizu now works properly when API service is exposed via HTTPS url
* mizu now properly displays KAFKA message body
## 0.21.0
### main features
* New traffic search & stream exprience
* Rich query language with full-text search capabilities on headers & body
* Distinct live-streaming vs paging/browsing modes, all with filter applied
### improvements
* GUI - source and destination IP addresses & service names for each traffic item
* GUI - Mizu health - display warning sign in top bar when not all requested pods are successfully tapped
* GUI - pod tapping status reflected in the list (ok or problem)
* Mizu telemetry - report platform type
### fixes
* Request duration and body size properly shown in GUI (instead of -1)

25
tap/extensions/http/helpers.go
View File

@ -3,14 +3,15 @@ package main
import (
"encoding/json"
"fmt"
"strconv"
"github.com/up9inc/mizu/tap/api"
)
func mapSliceRebuildAsMap(mapSlice []interface{}) (newMap map[string]interface{}) {
newMap = make(map[string]interface{})
for _, header := range mapSlice {
h := header.(map[string]interface{})
for _, item := range mapSlice {
h := item.(map[string]interface{})
newMap[h["name"].(string)] = h["value"]
}
@ -19,8 +20,8 @@ func mapSliceRebuildAsMap(mapSlice []interface{}) (newMap map[string]interface{}
func representMapSliceAsTable(mapSlice []interface{}, selectorPrefix string) (representation string) {
var table []api.TableData
for _, header := range mapSlice {
h := header.(map[string]interface{})
for _, item := range mapSlice {
h := item.(map[string]interface{})
selector := fmt.Sprintf("%s[\"%s\"]", selectorPrefix, h["name"].(string))
table = append(table, api.TableData{
Name: h["name"].(string),
@ -33,3 +34,19 @@ func representMapSliceAsTable(mapSlice []interface{}, selectorPrefix string) (re
representation = string(obj)
return
}
func representSliceAsTable(slice []interface{}, selectorPrefix string) (representation string) {
var table []api.TableData
for i, item := range slice {
selector := fmt.Sprintf("%s[%d]", selectorPrefix, i)
table = append(table, api.TableData{
Name: strconv.Itoa(i),
Value: item.(interface{}),
Selector: selector,
})
}
obj, _ := json.Marshal(table)
representation = string(obj)
return
}

11
tap/extensions/http/main.go
View File

@ -9,6 +9,7 @@ import (
"log"
"net/http"
"net/url"
"strings"
"time"
"github.com/up9inc/mizu/tap/api"
@ -209,6 +210,7 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, resolvedSource string,
request["url"] = reqDetails["url"].(string)
reqDetails["targetUri"] = reqDetails["url"]
reqDetails["path"] = path
reqDetails["pathSegments"] = strings.Split(path, "/")[1:]
reqDetails["summary"] = path
// Rearrange the maps for the querying
@ -296,6 +298,15 @@ func representRequest(request map[string]interface{}) (repRequest []interface{})
Data: string(details),
})
pathSegments := request["pathSegments"].([]interface{})
if len(pathSegments) > 1 {
repRequest = append(repRequest, api.SectionData{
Type: api.TABLE,
Title: "Path Segments",
Data: representSliceAsTable(pathSegments, `request.pathSegments`),
})
}
repRequest = append(repRequest, api.SectionData{
Type: api.TABLE,
Title: "Headers",

2
tap/extensions/kafka/go.mod
View File

@ -3,6 +3,8 @@ module github.com/up9inc/mizu/tap/extensions/kafka
go 1.16
require (
github.com/fatih/camelcase v1.0.0
github.com/ohler55/ojg v1.12.12
github.com/segmentio/kafka-go v0.4.17
github.com/up9inc/mizu/tap/api v0.0.0
)

4
tap/extensions/kafka/go.sum
View File

@ -1,6 +1,8 @@
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/eapache/go-xerial-snappy v0.0.0-20180814174437-776d5712da21 h1:YEetp8/yCZMuEPMUDHG0CW/brkkEp8mzqk2+ODEitlw=
github.com/eapache/go-xerial-snappy v0.0.0-20180814174437-776d5712da21/go.mod h1:+020luEh2TKB4/GOp8oxxtq0Daoen/Cii55CzbTV6DU=
github.com/fatih/camelcase v1.0.0 h1:hxNvNX/xYBp0ovncs8WyWZrOrpBNub/JfaMvbURyft8=
github.com/fatih/camelcase v1.0.0/go.mod h1:yN2Sb0lFhZJUdVvtELVWefmrXpuZESvPmqwoZc+/fpc=
github.com/frankban/quicktest v1.11.3 h1:8sXhOn0uLys67V8EsXLc6eszDs8VXWxL3iRvebPhedY=
github.com/frankban/quicktest v1.11.3/go.mod h1:wRf/ReqHper53s+kmmSZizM8NamnL3IM0I9ntUbOk+k=
github.com/golang/snappy v0.0.1 h1:Qgr9rKW7uDUkrbSmQeiDsGa8SjGyCOGtuasMWwvp2P4=
@ -16,6 +18,8 @@ github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfn
github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
github.com/ohler55/ojg v1.12.12 h1:hepbQFn7GHAecTPmwS3j5dCiOLsOpzPLvhiqnlAVAoE=
github.com/ohler55/ojg v1.12.12/go.mod h1:LBbIVRAgoFbYBXQhRhuEpaJIqq+goSO63/FQ+nyJU88=
github.com/pierrec/lz4 v2.6.0+incompatible h1:Ix9yFKn1nSPBLFl/yZknTp8TU5G4Ps0JDmguYK6iH1A=
github.com/pierrec/lz4 v2.6.0+incompatible/go.mod h1:pdkljMzZIN41W+lC3N2tnIh5sFi+IEE17M5jbnwPHcY=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=

277
tap/extensions/kafka/helpers.go
View File

@ -3,8 +3,13 @@ package main
import (
"encoding/json"
"fmt"
"reflect"
"strconv"
"strings"
"github.com/fatih/camelcase"
"github.com/ohler55/ojg/jp"
"github.com/ohler55/ojg/oj"
"github.com/up9inc/mizu/tap/api"
)
@ -289,17 +294,12 @@ func representProduceRequest(data map[string]interface{}) []interface{} {
rep = representRequestHeader(data, rep)
payload := data["payload"].(map[string]interface{})
topicData := ""
_topicData := payload["topicData"]
if _topicData != nil {
x, _ := json.Marshal(_topicData.([]interface{}))
topicData = string(x)
}
topicData := payload["topicData"]
transactionalID := ""
if payload["transactionalID"] != nil {
transactionalID = payload["transactionalID"].(string)
}
repPayload, _ := json.Marshal([]api.TableData{
repTransactionDetails, _ := json.Marshal([]api.TableData{
{
Name: "Transactional ID",
Value: transactionalID,
@ -315,18 +315,73 @@ func representProduceRequest(data map[string]interface{}) []interface{} {
Value: fmt.Sprintf("%d", int(payload["timeout"].(float64))),
Selector: `request.payload.timeout`,
},
{
Name: "Topic Data",
Value: topicData,
Selector: `request.payload.topicData`,
},
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Data: string(repPayload),
Title: "Transaction Details",
Data: string(repTransactionDetails),
})
if topicData != nil {
for _, _topic := range topicData.([]interface{}) {
topic := _topic.(map[string]interface{})
topicName := topic["topic"].(string)
partitions := topic["partitions"].(map[string]interface{})
partitionsJson, err := json.Marshal(partitions)
if err != nil {
return rep
}
repPartitions, _ := json.Marshal([]api.TableData{
{
Name: "Length",
Value: partitions["length"],
Selector: `request.payload.transactionalID`,
},
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Partitions (topic: %s)", topicName),
Data: string(repPartitions),
})
obj, err := oj.ParseString(string(partitionsJson))
recordBatchPath, err := jp.ParseString(`partitionData.records.recordBatch`)
recordBatchresults := recordBatchPath.Get(obj)
if len(recordBatchresults) > 0 {
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Record Batch (topic: %s)", topicName),
Data: representMapAsTable(recordBatchresults[0].(map[string]interface{}), `request.payload.topicData.partitions.partitionData.records.recordBatch`, []string{"record"}),
})
}
recordsPath, err := jp.ParseString(`partitionData.records.recordBatch.record`)
recordsResults := recordsPath.Get(obj)
if len(recordsResults) > 0 {
records := recordsResults[0].([]interface{})
for i, _record := range records {
record := _record.(map[string]interface{})
value := record["value"]
delete(record, "value")
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Record [%d] Details (topic: %s)", i, topicName),
Data: representMapAsTable(record, fmt.Sprintf(`request.payload.topicData.partitions.partitionData.records.recordBatch.record[%d]`, i), []string{"value"}),
})
rep = append(rep, api.SectionData{
Type: api.BODY,
Title: fmt.Sprintf("Record [%d] Value", i),
Data: value.(string),
Selector: fmt.Sprintf(`request.payload.topicData.partitions.partitionData.records.recordBatch.record[%d].value`, i),
})
}
}
}
}
return rep
}
@ -336,21 +391,12 @@ func representProduceResponse(data map[string]interface{}) []interface{} {
rep = representResponseHeader(data, rep)
payload := data["payload"].(map[string]interface{})
responses := ""
if payload["responses"] != nil {
_responses, _ := json.Marshal(payload["responses"].([]interface{}))
responses = string(_responses)
}
responses := payload["responses"]
throttleTimeMs := ""
if payload["throttleTimeMs"] != nil {
throttleTimeMs = fmt.Sprintf("%d", int(payload["throttleTimeMs"].(float64)))
}
repPayload, _ := json.Marshal([]api.TableData{
{
Name: "Responses",
Value: string(responses),
Selector: `response.payload.responses`,
},
{
Name: "Throttle Time (ms)",
Value: throttleTimeMs,
@ -359,10 +405,31 @@ func representProduceResponse(data map[string]interface{}) []interface{} {
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Title: "Transaction Details",
Data: string(repPayload),
})
if responses != nil {
for i, _response := range responses.([]interface{}) {
response := _response.(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Response [%d]", i),
Data: representMapAsTable(response, fmt.Sprintf(`response.payload.responses[%d]`, i), []string{"partitionResponses"}),
})
for j, _partitionResponse := range response["partitionResponses"].([]interface{}) {
partitionResponse := _partitionResponse.(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Response [%d] Partition Response [%d]", i, j),
Data: representMapAsTable(partitionResponse, fmt.Sprintf(`response.payload.responses[%d].partitionResponses[%d]`, i, j), []string{}),
})
}
}
}
return rep
}
@ -372,11 +439,7 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
rep = representRequestHeader(data, rep)
payload := data["payload"].(map[string]interface{})
topics := ""
if payload["topics"] != nil {
_topics, _ := json.Marshal(payload["topics"].([]interface{}))
topics = string(_topics)
}
topics := payload["topics"]
replicaId := ""
if payload["replicaId"] != nil {
replicaId = fmt.Sprintf("%d", int(payload["replicaId"].(float64)))
@ -442,11 +505,6 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
Value: sessionEpoch,
Selector: `request.payload.sessionEpoch`,
},
{
Name: "Topics",
Value: topics,
Selector: `request.payload.topics`,
},
{
Name: "Forgotten Topics Data",
Value: forgottenTopicsData,
@ -460,10 +518,26 @@ func representFetchRequest(data map[string]interface{}) []interface{} {
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Title: "Transaction Details",
Data: string(repPayload),
})
if topics != nil {
for i, _topic := range topics.([]interface{}) {
topic := _topic.(map[string]interface{})
topicName := topic["topic"].(string)
for j, _partition := range topic["partitions"].([]interface{}) {
partition := _partition.(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Partition [%d] (topic: %s)", j, topicName),
Data: representMapAsTable(partition, fmt.Sprintf(`request.payload.topics[%d].partitions[%d]`, i, j), []string{}),
})
}
}
}
return rep
}
@ -473,11 +547,7 @@ func representFetchResponse(data map[string]interface{}) []interface{} {
rep = representResponseHeader(data, rep)
payload := data["payload"].(map[string]interface{})
responses := ""
if payload["responses"] != nil {
_responses, _ := json.Marshal(payload["responses"].([]interface{}))
responses = string(_responses)
}
responses := payload["responses"]
throttleTimeMs := ""
if payload["throttleTimeMs"] != nil {
throttleTimeMs = fmt.Sprintf("%d", int(payload["throttleTimeMs"].(float64)))
@ -506,18 +576,56 @@ func representFetchResponse(data map[string]interface{}) []interface{} {
Value: sessionId,
Selector: `response.payload.sessionId`,
},
{
Name: "Responses",
Value: responses,
Selector: `response.payload.responses`,
},
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Title: "Transaction Details",
Data: string(repPayload),
})
if responses != nil {
for i, _response := range responses.([]interface{}) {
response := _response.(map[string]interface{})
topicName := response["topic"].(string)
for j, _partitionResponse := range response["partitionResponses"].([]interface{}) {
partitionResponse := _partitionResponse.(map[string]interface{})
recordSet := partitionResponse["recordSet"].(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Response [%d] Partition Response [%d] (topic: %s)", i, j, topicName),
Data: representMapAsTable(partitionResponse, fmt.Sprintf(`response.payload.responses[%d].partitionResponses[%d]`, i, j), []string{"recordSet"}),
})
recordBatch := recordSet["recordBatch"].(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Response [%d] Partition Response [%d] Record Batch (topic: %s)", i, j, topicName),
Data: representMapAsTable(recordBatch, fmt.Sprintf(`response.payload.responses[%d].partitionResponses[%d].recordSet.recordBatch`, i, j), []string{"record"}),
})
for k, _record := range recordBatch["record"].([]interface{}) {
record := _record.(map[string]interface{})
value := record["value"]
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Response [%d] Partition Response [%d] Record [%d] (topic: %s)", i, j, k, topicName),
Data: representMapAsTable(record, fmt.Sprintf(`response.payload.responses[%d].partitionResponses[%d].recordSet.recordBatch.record[%d]`, i, j, k), []string{"value"}),
})
rep = append(rep, api.SectionData{
Type: api.BODY,
Title: fmt.Sprintf("Response [%d] Partition Response [%d] Record [%d] Value (topic: %s)", i, j, k, topicName),
Data: value.(string),
Selector: fmt.Sprintf(`response.payload.responses[%d].partitionResponses[%d].recordSet.recordBatch.record[%d].value`, i, j, k),
})
}
}
}
}
return rep
}
@ -591,17 +699,11 @@ func representCreateTopicsRequest(data map[string]interface{}) []interface{} {
rep = representRequestHeader(data, rep)
payload := data["payload"].(map[string]interface{})
topics, _ := json.Marshal(payload["topics"].([]interface{}))
validateOnly := ""
if payload["validateOnly"] != nil {
validateOnly = strconv.FormatBool(payload["validateOnly"].(bool))
}
repPayload, _ := json.Marshal([]api.TableData{
{
Name: "Topics",
Value: string(topics),
Selector: `request.payload.topics`,
},
{
Name: "Timeout (ms)",
Value: fmt.Sprintf("%d", int(payload["timeoutMs"].(float64))),
@ -615,10 +717,20 @@ func representCreateTopicsRequest(data map[string]interface{}) []interface{} {
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Title: "Transaction Details",
Data: string(repPayload),
})
for i, _topic := range payload["topics"].([]interface{}) {
topic := _topic.(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Topic [%d]", i),
Data: representMapAsTable(topic, fmt.Sprintf(`request.payload.topics[%d]`, i), []string{}),
})
}
return rep
}
@ -628,7 +740,6 @@ func representCreateTopicsResponse(data map[string]interface{}) []interface{} {
rep = representResponseHeader(data, rep)
payload := data["payload"].(map[string]interface{})
topics, _ := json.Marshal(payload["topics"].([]interface{}))
throttleTimeMs := ""
if payload["throttleTimeMs"] != nil {
throttleTimeMs = fmt.Sprintf("%d", int(payload["throttleTimeMs"].(float64)))
@ -639,18 +750,23 @@ func representCreateTopicsResponse(data map[string]interface{}) []interface{} {
Value: throttleTimeMs,
Selector: `response.payload.throttleTimeMs`,
},
{
Name: "Topics",
Value: string(topics),
Selector: `response.payload.topics`,
},
})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: "Payload",
Title: "Transaction Details",
Data: string(repPayload),
})
for i, _topic := range payload["topics"].([]interface{}) {
topic := _topic.(map[string]interface{})
rep = append(rep, api.SectionData{
Type: api.TABLE,
Title: fmt.Sprintf("Topic [%d]", i),
Data: representMapAsTable(topic, fmt.Sprintf(`response.payload.topics[%d]`, i), []string{}),
})
}
return rep
}
@ -727,3 +843,42 @@ func representDeleteTopicsResponse(data map[string]interface{}) []interface{} {
return rep
}
func contains(s []string, str string) bool {
for _, v := range s {
if v == str {
return true
}
}
return false
}
func representMapAsTable(mapData map[string]interface{}, selectorPrefix string, ignoreKeys []string) (representation string) {
var table []api.TableData
for key, value := range mapData {
if contains(ignoreKeys, key) {
continue
}
switch reflect.ValueOf(value).Kind() {
case reflect.Map:
fallthrough
case reflect.Slice:
x, err := json.Marshal(value)
value = string(x)
if err != nil {
continue
}
}
selector := fmt.Sprintf("%s[\"%s\"]", selectorPrefix, key)
table = append(table, api.TableData{
Name: strings.Join(camelcase.Split(strings.Title(key)), " "),
Value: value,
Selector: selector,
})
}
obj, _ := json.Marshal(table)
representation = string(obj)
return
}

12
tap/extensions/redis/helpers.go
View File

@ -42,11 +42,6 @@ func representGeneric(generic map[string]interface{}, selectorPrefix string) (re
Value: generic["key"].(string),
Selector: fmt.Sprintf("%skey", selectorPrefix),
},
{
Name: "Value",
Value: generic["value"].(string),
Selector: fmt.Sprintf("%svalue", selectorPrefix),
},
{
Name: "Keyword",
Value: generic["keyword"].(string),
@ -59,5 +54,12 @@ func representGeneric(generic map[string]interface{}, selectorPrefix string) (re
Data: string(details),
})
representation = append(representation, api.SectionData{
Type: api.BODY,
Title: "Value",
Data: generic["value"].(string),
Selector: fmt.Sprintf("%svalue", selectorPrefix),
})
return
}

13
ui/package-lock.json generated
View File

@ -7856,6 +7856,11 @@
"pify": "^4.0.1"
}
},
"hamt_plus": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
"integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
},
"handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -14229,6 +14234,14 @@
"picomatch": "^2.2.1"
}
},
"recoil": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/recoil/-/recoil-0.5.2.tgz",
"integrity": "sha512-Edibzpu3dbUMLy6QRg73WL8dvMl9Xqhp+kU+f2sJtXxsaXvAlxU/GcnDE8HXPkprXrhHF2e6SZozptNvjNF5fw==",
"requires": {
"hamt_plus": "1.0.2"
}
},
"recursive-readdir": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",

1
ui/package.json
View File

@ -31,6 +31,7 @@
"react-scrollable-feed-virtualized": "^1.4.9",
"react-syntax-highlighter": "^15.4.3",
"react-toastify": "^8.0.3",
"recoil": "^0.5.2",
"typescript": "^4.2.4",
"web-vitals": "^1.1.1",
"xml-formatter": "^2.6.0"

52
ui/src/EntApp.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {useCallback, useEffect, useState} from 'react';
import './App.sass';
import {TrafficPage} from "./components/TrafficPage";
import {TLSWarning} from "./components/TLSWarning/TLSWarning";
@ -9,43 +9,29 @@ import InstallPage from "./components/InstallPage";
import LoginPage from "./components/LoginPage";
import LoadingOverlay from "./components/LoadingOverlay";
import AuthPageBase from './components/AuthPageBase';
import entPageAtom, {Page} from "./recoil/entPage";
import {useRecoilState} from "recoil";
const api = Api.getInstance();
// TODO: move to state management
export enum Page {
Traffic,
Setup,
Login
}
// TODO: move to state management
export interface MizuContextModel {
page: Page;
setPage: (page: Page) => void;
}
// TODO: move to state management
export const MizuContext = React.createContext<MizuContextModel>(null);
const EntApp = () => {
const [isLoading, setIsLoading] = useState(true);
const [showTLSWarning, setShowTLSWarning] = useState(false);
const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false);
const [addressesWithTLS, setAddressesWithTLS] = useState(new Set<string>());
const [page, setPage] = useState(Page.Traffic); // TODO: move to state management
const [entPage, setEntPage] = useRecoilState(entPageAtom);
const [isFirstLogin, setIsFirstLogin] = useState(false);
const determinePage = async () => { // TODO: move to state management
const determinePage = useCallback(async () => { // TODO: move to state management
try {
const isInstallNeeded = await api.isInstallNeeded();
if (isInstallNeeded) {
setPage(Page.Setup);
setEntPage(Page.Setup);
} else {
const isAuthNeeded = await api.isAuthenticationNeeded();
if(isAuthNeeded) {
setPage(Page.Login);
setEntPage(Page.Login);
}
}
} catch (e) {
@ -54,11 +40,11 @@ const EntApp = () => {
} finally {
setIsLoading(false);
}
}
},[setEntPage]);
useEffect(() => {
determinePage();
}, []);
}, [determinePage]);
const onTLSDetected = (destAddress: string) => {
addressesWithTLS.add(destAddress);
@ -71,7 +57,7 @@ const EntApp = () => {
let pageComponent: any;
switch (page) { // TODO: move to state management / proper routing
switch (entPage) { // TODO: move to state management / proper routing
case Page.Traffic:
pageComponent = <TrafficPage onTLSDetected={onTLSDetected}/>;
break;
@ -91,16 +77,14 @@ const EntApp = () => {
return (
<div className="mizuApp">
<MizuContext.Provider value={{page, setPage}}>
{page === Page.Traffic && <EntHeader isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin}/>}
{pageComponent}
{page === Page.Traffic && <TLSWarning showTLSWarning={showTLSWarning}
setShowTLSWarning={setShowTLSWarning}
addressesWithTLS={addressesWithTLS}
setAddressesWithTLS={setAddressesWithTLS}
userDismissedTLSWarning={userDismissedTLSWarning}
setUserDismissedTLSWarning={setUserDismissedTLSWarning}/>}
</MizuContext.Provider>
{entPage === Page.Traffic && <EntHeader isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin}/>}
{pageComponent}
{entPage === Page.Traffic && <TLSWarning showTLSWarning={showTLSWarning}
setShowTLSWarning={setShowTLSWarning}
addressesWithTLS={addressesWithTLS}
setAddressesWithTLS={setAddressesWithTLS}
userDismissedTLSWarning={userDismissedTLSWarning}
setUserDismissedTLSWarning={setUserDismissedTLSWarning}/>}
</div>
);
}

32
ui/src/components/EntriesList.tsx
View File

@ -6,11 +6,12 @@ import {EntryItem} from "./EntryListItem/EntryListItem";
import down from "./assets/downImg.svg";
import spinner from './assets/spinner.svg';
import Api from "../helpers/api";
import {useRecoilState, useRecoilValue} from "recoil";
import entriesAtom from "../recoil/entries";
import wsConnectionAtom, {WsConnectionStatus} from "../recoil/wsConnection";
import queryAtom from "../recoil/query";
interface EntriesListProps {
entries: any[];
setEntries: any;
query: string;
listEntryREF: any;
onSnapBrokenEvent: () => void;
isSnappedToBottom: boolean;
@ -22,12 +23,8 @@ interface EntriesListProps {
startTime: number;
noMoreDataTop: boolean;
setNoMoreDataTop: (flag: boolean) => void;
focusedEntryId: string;
setFocusedEntryId: (id: string) => void;
updateQuery: any;
leftOffTop: number;
setLeftOffTop: (leftOffTop: number) => void;
isWebSocketConnectionClosed: boolean;
ws: any;
openWebSocket: (query: string, resetEntries: boolean) => void;
leftOffBottom: number;
@ -38,7 +35,13 @@ interface EntriesListProps {
const api = Api.getInstance();
export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, query, listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, focusedEntryId, setFocusedEntryId, updateQuery, leftOffTop, setLeftOffTop, isWebSocketConnectionClosed, ws, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef}) => {
export const EntriesList: React.FC<EntriesListProps> = ({listEntryREF, onSnapBrokenEvent, isSnappedToBottom, setIsSnappedToBottom, queriedCurrent, setQueriedCurrent, queriedTotal, setQueriedTotal, startTime, noMoreDataTop, setNoMoreDataTop, leftOffTop, setLeftOffTop, ws, openWebSocket, leftOffBottom, truncatedTimestamp, setTruncatedTimestamp, scrollableRef}) => {
const [entries, setEntries] = useRecoilState(entriesAtom);
const wsConnection = useRecoilValue(wsConnectionAtom);
const query = useRecoilValue(queryAtom);
const isWsConnectionClosed = wsConnection === WsConnectionStatus.Closed;
const [loadMoreTop, setLoadMoreTop] = useState(false);
const [isLoadingTop, setIsLoadingTop] = useState(false);
@ -95,9 +98,9 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
},[setLoadMoreTop, setIsLoadingTop, entries, setEntries, query, setNoMoreDataTop, leftOffTop, setLeftOffTop, queriedCurrent, setQueriedCurrent, setQueriedTotal, setTruncatedTimestamp, scrollableRef]);
useEffect(() => {
if(!isWebSocketConnectionClosed || !loadMoreTop || noMoreDataTop) return;
if(!isWsConnectionClosed || !loadMoreTop || noMoreDataTop) return;
getOldEntries();
}, [loadMoreTop, noMoreDataTop, getOldEntries, isWebSocketConnectionClosed]);
}, [loadMoreTop, noMoreDataTop, getOldEntries, isWsConnectionClosed]);
const scrollbarVisible = scrollableRef.current?.childWrapperRef.current.clientHeight > scrollableRef.current?.wrapperRef.current.clientHeight;
@ -113,10 +116,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
{memoizedEntries.map(entry => <EntryItem
key={`entry-${entry.id}`}
entry={entry}
focusedEntryId={focusedEntryId}
setFocusedEntryId={setFocusedEntryId}
style={{}}
updateQuery={updateQuery}
headingMode={false}
/>)}
</ScrollableFeedVirtualized>
@ -131,9 +131,9 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
</button>
<button type="button"
title="Snap to bottom"
className={`${styles.btnLive} ${isSnappedToBottom && !isWebSocketConnectionClosed ? styles.hideButton : styles.showButton}`}
className={`${styles.btnLive} ${isSnappedToBottom && !isWsConnectionClosed ? styles.hideButton : styles.showButton}`}
onClick={(_) => {
if (isWebSocketConnectionClosed) {
if (isWsConnectionClosed) {
if (query) {
openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
} else {
@ -148,7 +148,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, qu
</div>
<div className={styles.footer}>
<div>Displaying <b>{entries?.length}</b> results out of <b>{queriedTotal}</b> total</div>
<div>Displaying <b id="entries-length">{entries?.length}</b> results out of <b id="total-entries">{queriedTotal}</b> total</div>
{startTime !== 0 && <div>Started listening at <span style={{marginRight: 5, fontWeight: 600, fontSize: 13}}>{Moment(truncatedTimestamp ? truncatedTimestamp : startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}</span></div>}
</div>
</div>

66
ui/src/components/EntryDetailed.tsx
View File

@ -1,9 +1,13 @@
import React from "react";
import React, {useEffect, useState} from "react";
import EntryViewer from "./EntryDetailed/EntryViewer";
import {EntryItem} from "./EntryListItem/EntryListItem";
import {makeStyles} from "@material-ui/core";
import Protocol from "./UI/Protocol"
import Queryable from "./UI/Queryable";
import {toast} from "react-toastify";
import {useRecoilValue} from "recoil";
import focusedEntryIdAtom from "../recoil/focusedEntryId";
import Api from "../helpers/api";
const useStyles = makeStyles(() => ({
entryTitle: {
@ -27,23 +31,17 @@ const useStyles = makeStyles(() => ({
}
}));
interface EntryDetailedProps {
entryData: any
updateQuery: any
}
export const formatSize = (n: number) => n > 1000 ? `${Math.round(n / 1000)}KB` : `${n} B`;
const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updateQuery}) => {
const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime}) => {
const classes = useStyles();
const response = data.response;
return <div className={classes.entryTitle}>
<Protocol protocol={protocol} horizontal={true} updateQuery={updateQuery}/>
<Protocol protocol={protocol} horizontal={true}/>
<div style={{right: "30px", position: "absolute", display: "flex"}}>
{response && <Queryable
query={`response.bodySize == ${bodySize}`}
updateQuery={updateQuery}
style={{margin: "0 18px"}}
displayIconOnMouseOver={true}
>
@ -55,7 +53,6 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
</Queryable>}
{response && <Queryable
query={`elapsedTime >= ${elapsedTime}`}
updateQuery={updateQuery}
style={{marginRight: 18}}
displayIconOnMouseOver={true}
>
@ -69,30 +66,58 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
</div>;
};
const EntrySummary: React.FC<any> = ({entry, updateQuery}) => {
const EntrySummary: React.FC<any> = ({entry}) => {
return <EntryItem
key={`entry-${entry.id}`}
entry={entry}
focusedEntryId={null}
setFocusedEntryId={null}
style={{}}
updateQuery={updateQuery}
headingMode={true}
/>;
};
export const EntryDetailed: React.FC<EntryDetailedProps> = ({entryData, updateQuery}) => {
const api = Api.getInstance();
export const EntryDetailed = () => {
const focusedEntryId = useRecoilValue(focusedEntryIdAtom);
const [entryData, setEntryData] = useState(null);
useEffect(() => {
if (!focusedEntryId) return;
setEntryData(null);
(async () => {
try {
const entryData = await api.getEntry(focusedEntryId);
setEntryData(entryData);
} catch (error) {
if (error.response?.data?.type) {
toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
position: "bottom-right",
theme: "colored",
autoClose: error.response.data.autoClose,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
console.error(error);
}
})();
// eslint-disable-next-line
}, [focusedEntryId]);
return <>
<EntryTitle
{entryData && <EntryTitle
protocol={entryData.protocol}
data={entryData.data}
bodySize={entryData.bodySize}
elapsedTime={entryData.data.elapsedTime}
updateQuery={updateQuery}
/>
{entryData.data && <EntrySummary entry={entryData.data} updateQuery={updateQuery}/>}
/>}
{entryData && <EntrySummary entry={entryData.data}/>}
<>
{entryData.data && <EntryViewer
{entryData && <EntryViewer
representation={entryData.representation}
isRulesEnabled={entryData.isRulesEnabled}
rulesMatched={entryData.rulesMatched}
@ -102,7 +127,6 @@ export const EntryDetailed: React.FC<EntryDetailedProps> = ({entryData, updateQu
contractContent={entryData.data.contractContent}
elapsedTime={entryData.data.elapsedTime}
color={entryData.protocol.backgroundColor}
updateQuery={updateQuery}
/>}
</>
</>

46
ui/src/components/EntryDetailed/EntrySections.tsx
View File

@ -12,14 +12,13 @@ import {default as xmlBeautify} from "xml-formatter";
interface EntryViewLineProps {
label: string;
value: number | string;
updateQuery?: any;
selector?: string;
overrideQueryValue?: string;
displayIconOnMouseOver?: boolean;
useTooltip?: boolean;
}
const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery = null, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true}) => {
const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, selector = "", overrideQueryValue = "", displayIconOnMouseOver = true, useTooltip = true}) => {
let query: string;
if (!selector) {
query = "";
@ -34,7 +33,6 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery
<td className={`${styles.dataKey}`}>
<Queryable
query={query}
updateQuery={updateQuery}
style={{float: "right", height: "18px"}}
iconStyle={{marginRight: "20px"}}
flipped={true}
@ -63,10 +61,9 @@ interface EntrySectionCollapsibleTitleProps {
expanded: boolean,
setExpanded: any,
query?: string,
updateQuery?: any,
}
const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, expanded, setExpanded, query = "", updateQuery = null}) => {
const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, expanded, setExpanded, query = ""}) => {
return <div className={styles.title}>
<div
className={`${styles.button} ${expanded ? styles.expanded : ''}`}
@ -79,9 +76,8 @@ const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps>
</div>
<Queryable
query={query}
updateQuery={updateQuery}
useTooltip={updateQuery ? true : false}
displayIconOnMouseOver={updateQuery ? true : false}
useTooltip={!!query}
displayIconOnMouseOver={!!query}
>
<span>{title}</span>
</Queryable>
@ -92,32 +88,31 @@ interface EntrySectionContainerProps {
title: string,
color: string,
query?: string,
updateQuery?: any,
}
export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({title, color, children, query = "", updateQuery = null}) => {
export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({title, color, children, query = ""}) => {
const [expanded, setExpanded] = useState(true);
return <CollapsibleContainer
className={styles.collapsibleContainer}
expanded={expanded}
title={<EntrySectionCollapsibleTitle title={title} color={color} expanded={expanded} setExpanded={setExpanded} query={query} updateQuery={updateQuery}/>}
title={<EntrySectionCollapsibleTitle title={title} color={color} expanded={expanded} setExpanded={setExpanded} query={query}/>}
>
{children}
</CollapsibleContainer>
}
interface EntryBodySectionProps {
title: string,
content: any,
color: string,
updateQuery: any,
encoding?: string,
contentType?: string,
selector?: string,
}
export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
title,
color,
updateQuery,
content,
encoding,
contentType,
@ -167,10 +162,9 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
return <React.Fragment>
{content && content?.length > 0 && <EntrySectionContainer
title='Body'
title={title}
color={color}
query={`${selector} == r".*"`}
updateQuery={updateQuery}
>
<div style={{display: 'flex', alignItems: 'center', alignContent: 'center', margin: "5px 0"}}>
{supportsPrettying && <div style={{paddingTop: 3}}>
@ -201,21 +195,33 @@ interface EntrySectionProps {
title: string,
color: string,
arrayToIterate: any[],
updateQuery: any,
}
export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, arrayToIterate, updateQuery}) => {
export const EntryTableSection: React.FC<EntrySectionProps> = ({title, color, arrayToIterate}) => {
let arrayToIterateSorted: any[];
if (arrayToIterate) {
arrayToIterateSorted = arrayToIterate.sort((a, b) => {
if (a.name > b.name) {
return 1;
}
if (a.name < b.name) {
return -1;
}
return 0;
});
}
return <React.Fragment>
{
arrayToIterate && arrayToIterate.length > 0 ?
<EntrySectionContainer title={title} color={color}>
<table>
<tbody>
{arrayToIterate.map(({name, value, selector}, index) => <EntryViewLine
<tbody id={`tbody-${title}`}>
{arrayToIterateSorted.map(({name, value, selector}, index) => <EntryViewLine
key={index}
label={name}
value={value}
updateQuery={updateQuery}
selector={selector}
/>)}
</tbody>

22
ui/src/components/EntryDetailed/EntryViewer.tsx
View File

@ -8,7 +8,7 @@ enum SectionTypes {
SectionBody = "body",
}
const SectionsRepresentation: React.FC<any> = ({data, color, updateQuery}) => {
const SectionsRepresentation: React.FC<any> = ({data, color}) => {
const sections = []
if (data) {
@ -16,12 +16,12 @@ const SectionsRepresentation: React.FC<any> = ({data, color, updateQuery}) => {
switch (row.type) {
case SectionTypes.SectionTable:
sections.push(
<EntryTableSection key={i} title={row.title} color={color} arrayToIterate={JSON.parse(row.data)} updateQuery={updateQuery}/>
<EntryTableSection key={i} title={row.title} color={color} arrayToIterate={JSON.parse(row.data)}/>
)
break;
case SectionTypes.SectionBody:
sections.push(
<EntryBodySection key={i} color={color} content={row.data} updateQuery={updateQuery} encoding={row.encoding} contentType={row.mimeType} selector={row.selector}/>
<EntryBodySection key={i} title={row.title} color={color} content={row.data} encoding={row.encoding} contentType={row.mimeType} selector={row.selector}/>
)
break;
default:
@ -33,7 +33,7 @@ const SectionsRepresentation: React.FC<any> = ({data, color, updateQuery}) => {
return <>{sections}</>;
}
const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rulesMatched, contractStatus, requestReason, responseReason, contractContent, elapsedTime, color, updateQuery}) => {
const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rulesMatched, contractStatus, requestReason, responseReason, contractContent, elapsedTime, color}) => {
var TABS = [
{
tab: 'Request'
@ -48,9 +48,9 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
const {request, response} = JSON.parse(representation);
var responseTabIndex = 0;
var rulesTabIndex = 0;
var contractTabIndex = 0;
let responseTabIndex = 0;
let rulesTabIndex = 0;
let contractTabIndex = 0;
if (response) {
TABS.push(
@ -85,10 +85,10 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
<Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
</div>
{currentTab === TABS[0].tab && <React.Fragment>
<SectionsRepresentation data={request} color={color} updateQuery={updateQuery}/>
<SectionsRepresentation data={request} color={color}/>
</React.Fragment>}
{response && currentTab === TABS[responseTabIndex].tab && <React.Fragment>
<SectionsRepresentation data={response} color={color} updateQuery={updateQuery}/>
<SectionsRepresentation data={response} color={color}/>
</React.Fragment>}
{isRulesEnabled && currentTab === TABS[rulesTabIndex].tab && <React.Fragment>
<EntryTablePolicySection title={'Rule'} color={color} latency={elapsedTime} arrayToIterate={rulesMatched ? rulesMatched : []}/>
@ -110,10 +110,9 @@ interface Props {
contractContent: string;
color: string;
elapsedTime: number;
updateQuery: any;
}
const EntryViewer: React.FC<Props> = ({representation, isRulesEnabled, rulesMatched, contractStatus, requestReason, responseReason, contractContent, elapsedTime, color, updateQuery}) => {
const EntryViewer: React.FC<Props> = ({representation, isRulesEnabled, rulesMatched, contractStatus, requestReason, responseReason, contractContent, elapsedTime, color}) => {
return <AutoRepresentation
representation={representation}
isRulesEnabled={isRulesEnabled}
@ -124,7 +123,6 @@ const EntryViewer: React.FC<Props> = ({representation, isRulesEnabled, rulesMatc
contractContent={contractContent}
elapsedTime={elapsedTime}
color={color}
updateQuery={updateQuery}
/>
};

1
ui/src/components/EntryListItem/EntryListItem.module.sass
View File

@ -74,7 +74,6 @@
.separatorRight
display: flex
border-right: 1px solid $data-background-color
padding: 4px
padding-right: 12px
.separatorLeft

34
ui/src/components/EntryListItem/EntryListItem.tsx
View File

@ -12,6 +12,9 @@ import ingoingIconNeutral from "../assets/ingoing-traffic-neutral.svg"
import outgoingIconSuccess from "../assets/outgoing-traffic-success.svg"
import outgoingIconFailure from "../assets/outgoing-traffic-failure.svg"
import outgoingIconNeutral from "../assets/outgoing-traffic-neutral.svg"
import {useRecoilState} from "recoil";
import focusedEntryIdAtom from "../../recoil/focusedEntryId";
import queryAtom from "../../recoil/query";
interface TCPInterface {
ip: string
@ -42,15 +45,14 @@ interface Rules {
interface EntryProps {
entry: Entry;
focusedEntryId: string;
setFocusedEntryId: (id: string) => void;
style: object;
updateQuery: any;
headingMode: boolean;
}
export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocusedEntryId, style, updateQuery, headingMode}) => {
export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) => {
const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
const [queryState, setQuery] = useRecoilState(queryAtom);
const isSelected = focusedEntryId === entry.id.toString();
const classification = getClassification(entry.status)
@ -103,8 +105,8 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
}
}
var contractEnabled = true;
var contractText = "";
let contractEnabled = true;
let contractText = "";
switch (entry.contractStatus) {
case 0:
contractEnabled = false;
@ -123,8 +125,9 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
break;
}
const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
var endpointServiceContainer = "10px";
let endpointServiceContainer = "10px";
if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
return <>
@ -147,17 +150,15 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
{!headingMode ? <Protocol
protocol={entry.proto}
horizontal={false}
updateQuery={updateQuery}
/> : null}
{isStatusCodeEnabled && <div>
<StatusCode statusCode={entry.status} updateQuery={updateQuery}/>
<StatusCode statusCode={entry.status}/>
</div>}
<div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
<Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
<Summary method={entry.method} summary={entry.summary}/>
<div className={styles.resolvedName}>
<Queryable
query={`src.name == "${entry.src.name}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
style={{marginTop: "-4px", overflow: "visible"}}
@ -174,7 +175,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
<SwapHorizIcon style={{color: entry.proto.backgroundColor, marginTop: "-2px"}}></SwapHorizIcon>
<Queryable
query={`dst.name == "${entry.dst.name}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
style={{marginTop: "-4px"}}
iconStyle={{marginTop: "4px", marginLeft: "-2px"}}
@ -204,7 +204,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
<div className={styles.separatorRight}>
<Queryable
query={`src.ip == "${entry.src.ip}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginRight: "16px"}}
@ -219,7 +218,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
<span className={`${styles.tcpInfo}`} style={{marginTop: "18px"}}>{entry.src.port ? ":" : ""}</span>
<Queryable
query={`src.port == "${entry.src.port}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginTop: "28px"}}
@ -234,7 +232,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
{entry.isOutgoing ?
<Queryable
query={`outgoing == true`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginTop: "28px"}}
@ -248,7 +245,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
:
<Queryable
query={`outgoing == true`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginTop: "28px"}}
@ -258,14 +254,14 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
alt="Outgoing traffic"
title="Outgoing"
onClick={() => {
updateQuery(`outgoing == false`)
const query = `outgoing == false`;
setQuery(queryState ? `${queryState} and ${query}` : query);
}}
/>
</Queryable>
}
<Queryable
query={`dst.ip == "${entry.dst.ip}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={false}
iconStyle={{marginTop: "28px"}}
@ -280,7 +276,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
<span className={`${styles.tcpInfo}`} style={{marginTop: "18px"}}>:</span>
<Queryable
query={`dst.port == "${entry.dst.port}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={false}
>
@ -295,7 +290,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
<div className={styles.timestamp}>
<Queryable
query={`timestamp >= datetime("${Moment(+entry.timestamp)?.utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}")`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={false}
>

13
ui/src/components/Filters.tsx
View File

@ -7,20 +7,18 @@ import {SyntaxHighlighter} from "./UI/SyntaxHighlighter/index";
import filterUIExample1 from "./assets/filter-ui-example-1.png"
import filterUIExample2 from "./assets/filter-ui-example-2.png"
import variables from '../variables.module.scss';
import {useRecoilState} from "recoil";
import queryAtom from "../recoil/query";
interface FiltersProps {
query: string
setQuery: any
backgroundColor: string
ws: any
openWebSocket: (query: string, resetEntries: boolean) => void;
}
export const Filters: React.FC<FiltersProps> = ({query, setQuery, backgroundColor, ws, openWebSocket}) => {
export const Filters: React.FC<FiltersProps> = ({backgroundColor, ws, openWebSocket}) => {
return <div className={styles.container}>
<QueryForm
query={query}
setQuery={setQuery}
backgroundColor={backgroundColor}
ws={ws}
openWebSocket={openWebSocket}
@ -29,8 +27,6 @@ export const Filters: React.FC<FiltersProps> = ({query, setQuery, backgroundColo
};
interface QueryFormProps {
query: string
setQuery: any
backgroundColor: string
ws: any
openWebSocket: (query: string, resetEntries: boolean) => void;
@ -50,9 +46,10 @@ export const modalStyle = {
color: '#000',
};
export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, backgroundColor, ws, openWebSocket}) => {
export const QueryForm: React.FC<QueryFormProps> = ({backgroundColor, ws, openWebSocket}) => {
const formRef = useRef<HTMLFormElement>(null);
const [query, setQuery] = useRecoilState(queryAtom);
const [openModal, setOpenModal] = useState(false);

9
ui/src/components/Header/EntHeader.tsx
View File

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState} from "react";
import React, {useEffect, useState} from "react";
import logo from '../assets/MizuEntLogo.svg';
import './Header.sass';
import userImg from '../assets/user-circle.svg';
@ -9,7 +9,8 @@ import logoutIcon from '../assets/logout.png';
import {SettingsModal} from "../SettingsModal/SettingModal";
import Api from "../../helpers/api";
import {toast} from "react-toastify";
import {MizuContext, Page} from "../../EntApp";
import {useSetRecoilState} from "recoil";
import entPageAtom, {Page} from "../../recoil/entPage";
const api = Api.getInstance();
@ -49,12 +50,12 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
const ProfileButton = () => {
const {setPage} = useContext(MizuContext);
const setEntPage = useSetRecoilState(entPageAtom);
const logout = async (popupState) => {
try {
await api.logout();
setPage(Page.Login);
setEntPage(Page.Login);
} catch (e) {
toast.error("Something went wrong, please check the console");
console.error(e);

9
ui/src/components/InstallPage.tsx
View File

@ -1,11 +1,12 @@
import { Button } from "@material-ui/core";
import React, { useContext, useState } from "react";
import { MizuContext, Page } from "../EntApp";
import React, { useState } from "react";
import { adminUsername } from "../consts";
import Api, { FormValidationErrorType } from "../helpers/api";
import { toast } from 'react-toastify';
import LoadingOverlay from "./LoadingOverlay";
import { useCommonStyles } from "../helpers/commonStyle";
import {useSetRecoilState} from "recoil";
import entPageAtom, {Page} from "../recoil/entPage";
const api = Api.getInstance();
@ -20,7 +21,7 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
const [password, setPassword] = useState("");
const [passwordConfirm, setPasswordConfirm] = useState("");
const {setPage} = useContext(MizuContext);
const setEntPage = useSetRecoilState(entPageAtom);
const onFormSubmit = async () => {
if (password.length < 4) {
@ -35,7 +36,7 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
setIsLoading(true);
await api.register(adminUsername, password);
if (!await api.isAuthenticationNeeded()) {
setPage(Page.Traffic);
setEntPage(Page.Traffic);
onFirstLogin();
}
} catch (e) {

9
ui/src/components/LoginPage.tsx
View File

@ -1,10 +1,11 @@
import { Button } from "@material-ui/core";
import React, { useContext, useState } from "react";
import React, { useState } from "react";
import { toast } from "react-toastify";
import { MizuContext, Page } from "../EntApp";
import Api from "../helpers/api";
import { useCommonStyles } from "../helpers/commonStyle";
import LoadingOverlay from "./LoadingOverlay";
import entPageAtom, {Page} from "../recoil/entPage";
import {useSetRecoilState} from "recoil";
const api = Api.getInstance();
@ -15,7 +16,7 @@ const LoginPage: React.FC = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const {setPage} = useContext(MizuContext);
const setEntPage = useSetRecoilState(entPageAtom);
const onFormSubmit = async () => {
setIsLoading(true);
@ -23,7 +24,7 @@ const LoginPage: React.FC = () => {
try {
await api.login(username, password);
if (!await api.isAuthenticationNeeded()) {
setPage(Page.Traffic);
setEntPage(Page.Traffic);
} else {
toast.error("Invalid credentials");
}

95
ui/src/components/TrafficPage.tsx
View File

@ -12,6 +12,12 @@ import {StatusBar} from "./UI/StatusBar";
import Api, {MizuWebsocketURL} from "../helpers/api";
import { toast } from 'react-toastify';
import debounce from 'lodash/debounce';
import {useRecoilState, useRecoilValue} from "recoil";
import tappingStatusAtom from "../recoil/tappingStatus";
import entriesAtom from "../recoil/entries";
import focusedEntryIdAtom from "../recoil/focusedEntryId";
import websocketConnectionAtom, {WsConnectionStatus} from "../recoil/wsConnection";
import queryAtom from "../recoil/query";
const useLayoutStyles = makeStyles(() => ({
details: {
@ -33,11 +39,6 @@ const useLayoutStyles = makeStyles(() => ({
}
}));
enum ConnectionStatus {
Closed,
Connected,
}
interface TrafficPageProps {
onTLSDetected: (destAddress: string) => void;
setAnalyzeStatus?: (status: any) => void;
@ -48,21 +49,16 @@ const api = Api.getInstance();
export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnalyzeStatus}) => {
const classes = useLayoutStyles();
const [entries, setEntries] = useState([] as any);
const [focusedEntryId, setFocusedEntryId] = useState(null);
const [selectedEntryData, setSelectedEntryData] = useState(null);
const [connection, setConnection] = useState(ConnectionStatus.Closed);
const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
const [entries, setEntries] = useRecoilState(entriesAtom);
const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
const [wsConnection, setWsConnection] = useRecoilState(websocketConnectionAtom);
const query = useRecoilValue(queryAtom);
const [noMoreDataTop, setNoMoreDataTop] = useState(false);
const [tappingStatus, setTappingStatus] = useState(null);
const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
const [query, setQuery] = useState("");
const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
const [addition, updateQuery] = useState("");
const [queriedCurrent, setQueriedCurrent] = useState(0);
const [queriedTotal, setQueriedTotal] = useState(0);
@ -94,15 +90,6 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
handleQueryChange(query);
}, [query, handleQueryChange]);
useEffect(() => {
if (query) {
setQuery(`${query} and ${addition}`);
} else {
setQuery(addition);
}
// eslint-disable-next-line
}, [addition]);
const ws = useRef(null);
const listEntry = useRef(null);
@ -117,11 +104,11 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
}
ws.current = new WebSocket(MizuWebsocketURL);
ws.current.onopen = () => {
setConnection(ConnectionStatus.Connected);
setWsConnection(WsConnectionStatus.Connected);
ws.current.send(query);
}
ws.current.onclose = () => {
setConnection(ConnectionStatus.Closed);
setWsConnection(WsConnectionStatus.Closed);
}
ws.current.onerror = (event) => {
console.error("WebSocket error:", event);
@ -206,36 +193,9 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
// eslint-disable-next-line
}, []);
useEffect(() => {
if (!focusedEntryId) return;
setSelectedEntryData(null);
(async () => {
try {
const entryData = await api.getEntry(focusedEntryId, query);
setSelectedEntryData(entryData);
} catch (error) {
if (error.response?.data?.type) {
toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
position: "bottom-right",
theme: "colored",
autoClose: error.response.data.autoClose,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
console.error(error);
}
})();
// eslint-disable-next-line
}, [focusedEntryId]);
const toggleConnection = () => {
ws.current.close();
if (connection !== ConnectionStatus.Connected) {
if (wsConnection !== WsConnectionStatus.Connected) {
if (query) {
openWebSocket(`(${query}) and leftOff(-1)`, true);
} else {
@ -248,8 +208,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
const getConnectionStatusClass = (isContainer) => {
const container = isContainer ? "Container" : "";
switch (connection) {
case ConnectionStatus.Connected:
switch (wsConnection) {
case WsConnectionStatus.Connected:
return "greenIndicator" + container;
default:
return "redIndicator" + container;
@ -257,8 +217,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
}
const getConnectionTitle = () => {
switch (connection) {
case ConnectionStatus.Connected:
switch (wsConnection) {
case WsConnectionStatus.Connected:
return "streaming live traffic"
default:
return "streaming paused";
@ -267,7 +227,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
const onSnapBrokenEvent = () => {
setIsSnappedToBottom(false);
if (connection === ConnectionStatus.Connected) {
if (wsConnection === WsConnectionStatus.Connected) {
ws.current.close();
}
}
@ -275,9 +235,9 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
return (
<div className="TrafficPage">
<div className="TrafficPageHeader">
<img className="playPauseIcon" style={{visibility: connection === ConnectionStatus.Connected ? "visible" : "hidden"}} alt="pause"
<img className="playPauseIcon" style={{visibility: wsConnection === WsConnectionStatus.Connected ? "visible" : "hidden"}} alt="pause"
src={pauseIcon} onClick={toggleConnection}/>
<img className="playPauseIcon" style={{position: "absolute", visibility: connection === ConnectionStatus.Connected ? "hidden" : "visible"}} alt="play"
<img className="playPauseIcon" style={{position: "absolute", visibility: wsConnection === WsConnectionStatus.Connected ? "hidden" : "visible"}} alt="play"
src={playIcon} onClick={toggleConnection}/>
<div className="connectionText">
{getConnectionTitle()}
@ -289,17 +249,12 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
{<div className="TrafficPage-Container">
<div className="TrafficPage-ListContainer">
<Filters
query={query}
setQuery={setQuery}
backgroundColor={queryBackgroundColor}
ws={ws.current}
openWebSocket={openWebSocket}
/>
<div className={styles.container}>
<EntriesList
entries={entries}
setEntries={setEntries}
query={query}
listEntryREF={listEntry}
onSnapBrokenEvent={onSnapBrokenEvent}
isSnappedToBottom={isSnappedToBottom}
@ -311,12 +266,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
startTime={startTime}
noMoreDataTop={noMoreDataTop}
setNoMoreDataTop={setNoMoreDataTop}
focusedEntryId={focusedEntryId}
setFocusedEntryId={setFocusedEntryId}
updateQuery={updateQuery}
leftOffTop={leftOffTop}
setLeftOffTop={setLeftOffTop}
isWebSocketConnectionClosed={connection === ConnectionStatus.Closed}
ws={ws.current}
openWebSocket={openWebSocket}
leftOffBottom={leftOffBottom}
@ -327,10 +278,10 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
</div>
</div>
<div className={classes.details}>
{selectedEntryData && <EntryDetailed entryData={selectedEntryData} updateQuery={updateQuery}/>}
{focusedEntryId && <EntryDetailed/>}
</div>
</div>}
{tappingStatus && <StatusBar tappingStatus={tappingStatus}/>}
{tappingStatus && <StatusBar/>}
</div>
)
};

5
ui/src/components/UI/Protocol.tsx
View File

@ -18,14 +18,12 @@ export interface ProtocolInterface {
interface ProtocolProps {
protocol: ProtocolInterface
horizontal: boolean
updateQuery: any
}
const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery}) => {
const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
if (horizontal) {
return <Queryable
query={protocol.macro}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
>
<a target="_blank" rel="noopener noreferrer" href={protocol.referenceLink}>
@ -45,7 +43,6 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
} else {
return <Queryable
query={protocol.macro}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={false}
iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}

14
ui/src/components/UI/Queryable.tsx
View File

@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import './style/Queryable.sass';
import {useRecoilState} from "recoil";
import queryAtom from "../../recoil/query";
interface Props {
query: string,
updateQuery: any,
style?: object,
iconStyle?: object,
className?: string,
@ -14,9 +15,10 @@ interface Props {
flipped?: boolean,
}
const Queryable: React.FC<Props> = ({query, updateQuery, style, iconStyle, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => {
const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => {
const [showAddedNotification, setAdded] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
const [queryState, setQuery] = useRecoilState(queryAtom);
const onCopy = () => {
setAdded(true)
@ -25,13 +27,15 @@ const Queryable: React.FC<Props> = ({query, updateQuery, style, iconStyle, class
useEffect(() => {
let timer;
if (showAddedNotification) {
updateQuery(query);
setQuery(queryState ? `${queryState} and ${query}` : query);
timer = setTimeout(() => {
setAdded(false);
}, 1000);
}
return () => clearTimeout(timer);
}, [showAddedNotification, query, updateQuery]);
// eslint-disable-next-line
}, [showAddedNotification, query, setQuery]);
const addButton = query ? <CopyToClipboard text={query} onCopy={onCopy}>
<span
@ -39,7 +43,7 @@ const Queryable: React.FC<Props> = ({query, updateQuery, style, iconStyle, class
title={`Add "${query}" to the filter`}
style={iconStyle}
>
<AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
<AddCircleIcon fontSize="small" color="inherit"/>
{showAddedNotification && <span className={'Queryable-AddNotifier'}>Added</span>}
</span>
</CopyToClipboard> : null;

25
ui/src/components/UI/StatusBar.tsx
View File

@ -3,33 +3,18 @@ import React, {useState} from "react";
import warningIcon from '../assets/warning_icon.svg';
import failIcon from '../assets/failed.svg';
import successIcon from '../assets/success.svg';
export interface TappingStatusPod {
name: string;
namespace: string;
isTapped: boolean;
}
export interface TappingStatus {
pods: TappingStatusPod[];
}
export interface Props {
tappingStatus: TappingStatusPod[]
}
import {useRecoilValue} from "recoil";
import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
const pluralize = (noun: string, amount: number) => {
return `${noun}${amount !== 1 ? 's' : ''}`
}
export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
export const StatusBar = () => {
const tappingStatus = useRecoilValue(tappingStatusAtom);
const [expandedBar, setExpandedBar] = useState(false);
const uniqueNamespaces = Array.from(new Set(tappingStatus.map(pod => pod.namespace)));
const amountOfPods = tappingStatus.length;
const amountOfTappedPods = tappingStatus.filter(pod => pod.isTapped).length;
const amountOfUntappedPods = amountOfPods - amountOfTappedPods;
const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails);
return <div className={'statusBar' + (expandedBar ? ' expandedStatusBar' : "")} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
<div className="podsCount">

4
ui/src/components/UI/StatusCode.tsx
View File

@ -10,16 +10,14 @@ export enum StatusCodeClassification {
interface EntryProps {
statusCode: number
updateQuery: any
}
const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
const StatusCode: React.FC<EntryProps> = ({statusCode}) => {
const classification = getClassification(statusCode)
return <Queryable
query={`response.status == ${statusCode}`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginTop: "40px", paddingLeft: "10px"}}

5
ui/src/components/UI/Summary.tsx
View File

@ -6,16 +6,14 @@ import Queryable from "./Queryable";
interface SummaryProps {
method: string
summary: string
updateQuery: any
}
export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => {
export const Summary: React.FC<SummaryProps> = ({method, summary}) => {
return <div className={styles.container}>
{method && <Queryable
query={`method == "${method}"`}
className={`${miscStyles.protocol} ${miscStyles.method}`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
style={{whiteSpace: "nowrap"}}
>
@ -25,7 +23,6 @@ export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery})
</Queryable>}
{summary && <Queryable
query={`summary == "${summary}"`}
updateQuery={updateQuery}
displayIconOnMouseOver={true}
>
<div

31
ui/src/index.tsx
View File

@ -5,23 +5,26 @@ import App from './App';
import EntApp from "./EntApp";
import {ToastContainer} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import {RecoilRoot} from "recoil";
ReactDOM.render(
<React.StrictMode>
<>
{window["isEnt"] ? <EntApp/> : <App/>}
<ToastContainer
position="bottom-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</>
<RecoilRoot>
<>
{window["isEnt"] ? <EntApp/> : <App/>}
<ToastContainer
position="bottom-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</>
</RecoilRoot>
</React.StrictMode>,
document.getElementById('root')
);

8
ui/src/recoil/entPage/atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "recoil"
const entPageAtom = atom({
key: "entPageAtom",
default: 0
})
export default entPageAtom

11
ui/src/recoil/entPage/index.ts Normal file
View File

@ -0,0 +1,11 @@
import atom from "./atom";
enum Page {
Traffic,
Setup,
Login
}
export { Page };
export default atom;

8
ui/src/recoil/entries/atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "recoil";
const entriesAtom = atom({
key: "entriesAtom",
default: []
});
export default entriesAtom;

3
ui/src/recoil/entries/index.ts Normal file
View File

@ -0,0 +1,3 @@
import atom from "./atom";
export default atom

8
ui/src/recoil/focusedEntryId/atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "recoil";
const focusedEntryIdAtom = atom({
key: "focusedEntryIdAtom",
default: null
});
export default focusedEntryIdAtom;

3
ui/src/recoil/focusedEntryId/index.ts Normal file
View File

@ -0,0 +1,3 @@
import atom from "./atom";
export default atom

8
ui/src/recoil/query/atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "recoil";
const queryAtom = atom({
key: "queryAtom",
default: ""
});
export default queryAtom;

3
ui/src/recoil/query/index.ts Normal file
View File

@ -0,0 +1,3 @@
import atom from "./atom";
export default atom;

9
ui/src/recoil/tappingStatus/atom.ts Normal file
View File

@ -0,0 +1,9 @@
import { atom } from "recoil";
import {TappingStatusPod} from "./index";
const tappingStatusAtom = atom({
key: "tappingStatusAtom",
default: null as TappingStatusPod[]
});
export default tappingStatusAtom;

22
ui/src/recoil/tappingStatus/details.ts Normal file
View File

@ -0,0 +1,22 @@
import {selector} from "recoil";
import tappingStatusAtom from "./atom";
const tappingStatusDetails = selector({
key: 'tappingStatusDetails',
get: ({get}) => {
const tappingStatus = get(tappingStatusAtom);
const uniqueNamespaces = Array.from(new Set(tappingStatus.map(pod => pod.namespace)));
const amountOfPods = tappingStatus.length;
const amountOfTappedPods = tappingStatus.filter(pod => pod.isTapped).length;
const amountOfUntappedPods = amountOfPods - amountOfTappedPods;
return {
uniqueNamespaces,
amountOfPods,
amountOfTappedPods,
amountOfUntappedPods,
};
},
});
export default tappingStatusDetails;

17
ui/src/recoil/tappingStatus/index.ts Normal file
View File

@ -0,0 +1,17 @@
import atom from "./atom";
import tappingStatusDetails from './details';
interface TappingStatusPod {
name: string;
namespace: string;
isTapped: boolean;
}
interface TappingStatus {
pods: TappingStatusPod[];
}
export type {TappingStatus, TappingStatusPod};
export {tappingStatusDetails};
export default atom;

8
ui/src/recoil/wsConnection/atom.ts Normal file
View File

@ -0,0 +1,8 @@
import { atom } from "recoil";
const wsConnectionAtom = atom({
key: "wsConnectionAtom",
default: 0
});
export default wsConnectionAtom;

10
ui/src/recoil/wsConnection/index.ts Normal file
View File

@ -0,0 +1,10 @@
import atom from "./atom";
enum WsConnectionStatus {
Closed,
Connected,
}
export {WsConnectionStatus};
export default atom