Skip to content
This repository has been archived by the owner on Dec 6, 2023. It is now read-only.

Commit

Permalink
feat: Add source client in logs and filtering function for commands
Browse files Browse the repository at this point in the history
* Adding the ability to click the source lines and stack frame lines

* Add command filtering function
  • Loading branch information
rmevans9 authored Nov 4, 2019
1 parent b65cb9e commit dbec43a
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 31 deletions.
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ jobs:
# We know any changes that make it to master *must* have been approved
yarn chromatic --auto-accept-changes
fi
# - run:
# name: Run tests
# command: yarn ci:test
- run:
name: Run tests
command: yarn ci:test

build:
<<: *defaults
Expand Down
9 changes: 9 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@storybook/addon-links": "^5.2.5",
"@storybook/addons": "^5.2.5",
"@storybook/react": "^5.2.5",
"@types/jest": "^24.0.21",
"@types/react-tooltip": "^3.9.3",
"@types/styled-components": "^4.1.19",
"@typescript-eslint/eslint-plugin": "^2.5.0",
Expand All @@ -72,6 +73,7 @@
"semantic-release": "16.0.0-beta.24",
"storybook-chromatic": "^3.0.3",
"trash-cli": "^3.0.0",
"ts-jest": "^24.1.0",
"typescript": "^3.6.4"
},
"eslintConfig": {
Expand Down Expand Up @@ -104,5 +106,12 @@
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-unused-vars": 0
}
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node",
"testMatch": [
"**/*.test.ts"
]
}
}
46 changes: 33 additions & 13 deletions src/TimelineCommands/LogCommand/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ interface SourceLineContainerProps {
const SourceLineContainer = styled.div<SourceLineContainerProps>`
display: flex;
padding: 6px 0;
cursor: pointer;
color: ${props => (props.isSelected ? props.theme.tag : props.theme.foregroundDark)};
background-color: ${props => (props.isSelected ? props.theme.backgroundDarker : "transparent")};
border-left: ${props => (props.isSelected ? `1px solid ${props.theme.tag}` : undefined)};
Expand Down Expand Up @@ -100,6 +101,7 @@ const StackFrameContainer = styled.div<StackFrameContainerProps>`
word-break: break-all;
/* cursor: pointer; */
opacity: ${props => (props.isNodeModule ? 0.4 : 1)};
cursor: pointer;
color: ${props => (props.isSelected ? props.theme.tag : props.theme.foreground)};
background-color: ${props => (props.isSelected ? props.theme.backgroundDarker : "transparent")};
Expand Down Expand Up @@ -253,6 +255,7 @@ function useFileSource(stack, readFile) {
setSourceCode({
lines,
lineNumber,
fileName,
partialFilename,
})
} catch {}
Expand All @@ -265,8 +268,7 @@ function useFileSource(stack, readFile) {
return sourceCode
}

function renderStackFrame(stackFrame, idx) {
// TODO: Handle open in editor!!!!!!!!!!!!! (How?)
function renderStackFrame(stackFrame, idx, openInEditor) {
let fileName = stackFrame.fileName || ""
let functionName = stackFrame.functionName || ""
const lineNumber = stackFrame.lineNumber || 0
Expand All @@ -281,7 +283,14 @@ function renderStackFrame(stackFrame, idx) {
const isSelected = idx === 0

return (
<StackFrameContainer key={`stack-${idx}`} isNodeModule={isNodeModule} isSelected={isSelected}>
<StackFrameContainer
key={`stack-${idx}`}
isNodeModule={isNodeModule}
isSelected={isSelected}
onClick={() => {
openInEditor(fileName, lineNumber)
}}
>
<StackFrameFunction>{functionName || "(anonymous function)"}</StackFrameFunction>
<StackFrameFile>{justTheFile}</StackFrameFile>
<StackFrameLineNumber>{lineNumber}</StackFrameLineNumber>
Expand All @@ -295,13 +304,23 @@ const LogCommand: FunctionComponent<Props> = ({
setIsOpen,
copyToClipboard,
readFile,
sendCommand,
}) => {
const { payload, date, deltaTime, important } = command

const source = useFileSource(payload, readFile)
const openInEditor = (file, lineNumber) => {
if (file === "") return

console.log(source)
sendCommand({
type: "editor.open",
payload: {
file,
lineNumber,
},
})
}

const source = useFileSource(payload, readFile)
const toolbar = buildToolbar(payload, copyToClipboard)

return (
Expand All @@ -324,7 +343,12 @@ const LogCommand: FunctionComponent<Props> = ({
<SourceFilename>{source.partialFilename}</SourceFilename>
{source.lines.map(line => {
return (
<SourceLineContainer isSelected={line.isSelected}>
<SourceLineContainer
isSelected={line.isSelected}
onClick={() => {
openInEditor(source.fileName, source.lineNumber)
}}
>
<SourceLineNumber>{line.lineNumber}</SourceLineNumber>
<SourceLineCode>{line.source}</SourceLineCode>
</SourceLineContainer>
Expand All @@ -340,17 +364,13 @@ const LogCommand: FunctionComponent<Props> = ({
<StackTableHeaderFunction>File</StackTableHeaderFunction>
<StackTableHeaderLineNumber>Line</StackTableHeaderLineNumber>
</StackTableHeadRow>
{payload.stack.map(renderStackFrame)}
{payload.stack.map((stackFrame, idx) =>
renderStackFrame(stackFrame, idx, openInEditor)
)}
</StackTable>
</StackContainer>
</>
)}
{/* {payload.value && <ContentView value={payload.value} />}
{imageUrl && (
<ImageContainer>
<Image src={imageUrl} />
</ImageContainer>
)} */}
</TimelineCommand>
)
}
Expand Down
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import TreeView from "./TreeView"

// Utils
import repairSerialization from "./utils/repair-serialization"
import filterCommands from "./utils/filterCommands"

export {
theme,
Expand All @@ -25,4 +26,5 @@ export {
Timestamp,
TreeView,
repairSerialization,
filterCommands,
}
96 changes: 96 additions & 0 deletions src/utils/filterCommands/filterCommands.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import filterCommands from "./index"

const TEST_COMMANDS = [
{ type: "SEARCHTYPE" },
{ type: "ADUMMYOBJ", payload: { message: "SEARCHMESSAGE" } },
{ type: "ADUMMYOBJ", payload: { preview: "SEARCHPREVIEW" } },
{ type: "ADUMMYOBJ", payload: { name: "SEARCHNAME" } },
{ type: "ADUMMYOBJ", payload: { path: "SEARCHPATH" } },
{ type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } },
{ type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } },
{ type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } },
{ type: "log", payload: { debug: "LOGDEBUG" } },
{ type: "client.intro", payload: { connection: "SEARCHCONNECTION" } },
]

const TESTS = [
{ name: "type", search: "SEARCHTYPE", result: [{ type: "SEARCHTYPE" }] },
{
name: "payload.message",
search: "SEARCHMESSAGE",
result: [{ type: "ADUMMYOBJ", payload: { message: "SEARCHMESSAGE" } }],
},
{
name: "payload.preview",
search: "SEARCHPREVIEW",
result: [{ type: "ADUMMYOBJ", payload: { preview: "SEARCHPREVIEW" } }],
},
{
name: "payload.name",
search: "SEARCHNAME",
result: [{ type: "ADUMMYOBJ", payload: { name: "SEARCHNAME" } }],
},
{
name: "payload.path",
search: "SEARCHPATH",
result: [{ type: "ADUMMYOBJ", payload: { path: "SEARCHPATH" } }],
},
{
name: "payload.triggerType",
search: "SEARCHTRIGGERTYPE",
result: [{ type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } }],
},
{
name: "payload.description",
search: "SEARCHDESCRIPTION",
result: [{ type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } }],
},
{
name: "payload.request.url",
search: "SEARCHURL",
result: [{ type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } }],
},
{
name: "log => debug",
search: "debug",
result: [{ type: "log", payload: { debug: "LOGDEBUG" } }],
},
{
name: "log => warning",
search: "warning",
result: [{ type: "log", payload: { debug: "LOGDEBUG" } }],
},
{
name: "log => error",
search: "error",
result: [{ type: "log", payload: { debug: "LOGDEBUG" } }],
},
{
name: "clientIntro => connection",
search: "connection",
result: [{ type: "client.intro", payload: { connection: "SEARCHCONNECTION" } }],
},
{
name: "multiple results",
search: "ADUMMYOBJ",
result: [
{ type: "ADUMMYOBJ", payload: { message: "SEARCHMESSAGE" } },
{ type: "ADUMMYOBJ", payload: { preview: "SEARCHPREVIEW" } },
{ type: "ADUMMYOBJ", payload: { name: "SEARCHNAME" } },
{ type: "ADUMMYOBJ", payload: { path: "SEARCHPATH" } },
{ type: "ADUMMYOBJ", payload: { triggerType: "SEARCHTRIGGERTYPE" } },
{ type: "ADUMMYOBJ", payload: { description: "SEARCHDESCRIPTION" } },
{ type: "ADUMMYOBJ", payload: { request: { url: "SEARCHURL" } } },
],
},
]

describe("utils/filterCommands", () => {
TESTS.forEach(test => {
it(`should search in '${test.name}'`, () => {
const result = filterCommands(TEST_COMMANDS, test.search)

expect(result).toEqual(test.result)
})
})
})
47 changes: 47 additions & 0 deletions src/utils/filterCommands/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
function path(...searchPath) {
return obj => {
let scaledObj = obj

for (let i = 0; i < searchPath.length; i++) {
scaledObj = scaledObj[searchPath[i]]

if (typeof scaledObj === "undefined" || scaledObj === null) return null
}

return scaledObj
}
}

const COMMON_MATCHING_PATHS = [
path("type"),
path("payload", "message"),
path("payload", "preview"),
path("payload", "name"),
path("payload", "path"),
path("payload", "triggerType"),
path("payload", "description"),
path("payload", "request", "url"),
]

function filterCommands(commands: any[], search: string) {
const trimmedSearch = (search || "").trim()
const searchRegex = new RegExp(trimmedSearch.replace(/\s/, "."), "i")

const matching = (value: string) => value && typeof value === "string" && searchRegex.test(value)

return commands.filter(
command =>
COMMON_MATCHING_PATHS.filter(c => {
if (matching(c(command))) return true
if (
command.type === "log" &&
(matching("debug") || matching("warning") || matching("error"))
)
return true
if (command.type === "client.intro" && matching("connection")) return true
return false
}).length > 0
)
}

export default filterCommands
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"sourceMap": true,
"target": "es5",
"lib": ["es2015", "dom"],
"types": [],
"types": ["jest"],
},
"exclude": ["node_modules"],
"include": ["src"]
Expand Down
18 changes: 18 additions & 0 deletions wallaby.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = function(wallaby) {
return {
files: ["src/**/*.ts", "!src/**/*.test.ts"],

tests: ["src/**/*.test.ts"],

compilers: {
"**/*.ts": wallaby.compilers.babel(),
},

env: {
type: "node",
runner: "node",
},

testFramework: "jest",
}
}
Loading

0 comments on commit dbec43a

Please sign in to comment.