I have a requirement to display all the logs with a tag (say TelemetryLogs) to a group, so that I can see all the network calls flow in a single view.
The requirement is to see the Network Calls in a grouped view - say a table with key-name , key-type and log-object.
The immediate suggestion that we gave to business is that we would log to console with a prefix and allow them to filter using a filter-expression.
Eg: console.log(``Telemetry %s %s %o``, "name", "type", { someobject: 'someval' })
But they want the group to appear as a sub-group under one-of the categories in chrome (pic below). Apparently, they plan to roll out similar groups and dont want to remember a list of expression, to filter out what they want.
I then realized stackoverflow is the right place to check if this is possible, if not possible, what other grouped display options would help us achieve a similar expectation.
Note: Background of the use-case is that during our pair-programming, sometimes we end up business analyst sitting next to us. One of them realized if they had a consolidated-running-view of the telemetry data during development, it would help him/her catch early issues...
there is no way to create sub groups in the console current API standard that appear in the developer tools panel - there are group related functions that can group multiple log statements under one statement but thats not what you want, anyway here are two options that came to my mind
structure you log messages in a way that they can be easily filtered using the built in filter for logs maybe something of the following nature (groupId - logType - message) (Anyway it is always better to have a structure for logs)
The developer tools are part of the page, and they can have custom extended functionalities, you can create an extension that adds subgroups to that panel, along with the functionality you need, or you can add a tab of your own to filter that logs (its easier that what it looks)
Anyway one important thing to note, is that if logs are important to you then they should be sent to an external service that ensures no data is lost, and enables advanced load and extract functionalities on the logs. And anyway logs on the client side in the console are only useful for development, so is it worth it ?
Related
We have a business application that has a number of policy rules for which OPA seems well suited for. As a simple example: "an order can by modified from status 'X' to 'Y' iif the user is in role 'R'".
We'd ideally like to evaluate some of these rules both on the front and back end. In the FE (on the browser in an Angular app in our case) in order to provide a good user experience (make the field editable or not depending on the evaluation of the rule), and, of course, in the back end as well. Ideally, these rules would be in sync.
I see that "OPA is able to compile Rego policies into executable Wasm modules that can be evaluated with different inputs and external data." (link) There is also a JavaScript SDK so it seems like this could be a viable option.
I have not been able to find questions along these lines or references of anybody doing something similar and I am wondering if this is a good approach or if there may be better alternatives to the issue at hand.
There seems to be something fundamental here i'm missing and I'd like to get it cleared up so sorry if this seems low level.
As an example, I would like to grab the shipping information from a specific tracked package on UPS's website (i.e. Shipment status, expected date info like that). So, I look at their URL format and insert my tracking number where applicable. In the network section of my browsers development tools I see an initial request that returns a bunch of HTML, however, this HTML looks vastly different than what I'm seeing on my end as a user as well as what is shown in inspect element.
Essentially what I'm asking is, why would this returned HTML be different? and what would be the best way of getting the "correct" html when i'm technically getting back the same HTML my browser is using initially when I load up the website myself? In this case I'm using XMLHttpRequest.
image that shows what's visible to the user and what's returned
Here you can see how different the two are, not just due to CSS. In this case the returned html is missing all tracking and shipping info.
Any additional resources would be helpful :)
I am working on a WYSIWIG animation editor for designing sliders / ad banners that includes a lot of dependencies, which also means a lot of extra bloated code that isn't ever used. I am hoping to run a report on the code that helps me identify the important things. I have a couple cool starts that will search through javascript for all functions and return each function by parts:
https://regex101.com/r/sXrHLI/1
Then some PHP that will sort it by size:
Sort preg_match_all by named group size
The thought is that by identifying large functions that aren't being used, we can remove them. My next step is to identify the function tree of what functions are invoked on document load, and then which are loaded and invoked on actions such as clicks / mouseovers and so on.
While I have this handy function that tells me all functions loaded in the DOM, it isn't enough:
var functionArray;
$(document).ready(function(){
var objs = [];
for (var obj in window){
if(window.hasOwnProperty(obj) && typeof window[obj] === 'function') objs.push(obj);
};
console.log(obj));
});
I am looking for a solution that I can use to script in PHP / shell to emulate page load - now here is where my knowledge of terminology fails me, am I looking for "Call Stack", do I need a timeline, interpreter, framework, engine or a parser?
I next need to emulate a click / hover event on all elements, or all elements that match something like this regex:
(?|\$\(['"](\.\w*)["']|getElementsByClassName\('(\w*)'\))
(?|\$\(['"](\#\w*)["']|getElementsById\('(\w*)'\))
to find any events that trigger functions so I can make a master list of functions that need to be in the final code.
I was watching a talk from a Google Developer and I thought of your post. The following link has more intel on Dev Tools Coverage Profiler, but the following is the high level.
Google dev tools ships out a neat feature for generating reports on used and unused JS and CSS code -- which is right along the essence of what you were searching to do (just a slightly different medium -- it'd be a bit harder to automate, but it otherwise contains, I believe, exactly what you were looking for).
Open Dev tools and then open up the ellipse in the bottom left corner (see image) and then click the record button [see image 1]. Go through the steps you want to capture. You'll get an interactive screen to which you can go through all the code and see what was used (green) and what was not used (red) [see image 2]
Image 1 - Ellipse drop down to get to coverage tool
Image 2 - Full screenshot of the interactive report for this StackOverflow page while editing this post.
I'd suggest you to take a look at this tool:
Istanbul
With it you can do the following:
create an instrumented version of your code
deploy it on the server and run the manual test (coverage information is collected in one of the global variables inside the browser)
copy coverage information into a file (its an lcov data as far as I remember)
generate code coverage report with it
If you feel like going further, you can actually use something like jvm-cucumber with selenium to automate UI tests. You will need to dump the coverage data every time you reload the page, however. Then you will have to combine coverage from different runs and use this combined lcov data to generate the overall report.
The whole process is a bit heavy, but it is way better then starting to reinvent it.
Even more, you can combine this data with unit test coverage information to produce joint reports.
As a step further, you may want to setup sonar server so that you store multiple versions of the coverage reports and compare differences between tests.
Moving on from the usual image processing script: I'm thinking of writing a Photoshop time tracking script that will log the filename, directory & time a file is created saved and closed. This is relatively easy with the Scripts Events manager.
The clever bit is writing a second script to parse this information so I clearly see what project I was working on on what day and for how long. The first part can be identified by files saved in certain directories. What's the best way forward to process the various time codes (created, saved & closed) to help me easily see the time tracked on a project?
Is this a trivial thing to do or am I opening a metaphorical can of worms here? Are there any standardised algorithms that may be of use to me?
If I understand correctly.. what you want is Logging..
A logging configuration will mainly consists of four parts.
Loggers
Handlers
Filters
Formatters
In short, a logger is mechanism for writing logs.. Each message that is written to a log is called a log record. A log record can contain metadata, and other informations to describes the event that is being logged. Theres also log level stuff which isnt important here..
After a log record has been recorded it is sent to a handler.
Handler : The handler is the engine that determines what happens to each message in a logger. It describes a particular logging behavior, such as writing a message to the screen, to a file etc.
Filters :
Self-explanatory. You can create filters to only view a specific criteria.
Formatters :
Same as the name says.. Formatting records in more readable way , List, Table , Graph.
Thats just a basic overview of the logging system.
As for your case, you mention that you can already use the exsisting tool to log the events. All you need to do is make a handler, that will interpret those logs and save in a file which can be parsed by the script engine.. csv, json
Something like :
projects : [ { "name" : "foo", " creation": "date",
"events" : [ {"action":"file-created", "timestamp":"date", " file":"sample"}]
},
"name":" bar".....
You need to tailor it to your needs.. Depending on your data and what you wanna do with it you need represent in the best way you can think of.
Then all thats is left to show the desired data in a way you want.. Thats a lot of scripting :0
I'm quite new to SharePoint (about 1 week into it actually) and I'm attempting to mirror certain functionality that my company has with other products. Currently I'm working on how to duplicate the tasking environment in Box.com. Essentially it's just an email link that goes to a webpage where users can view an image and comments related to that image side by side.
I can dynamically load the image based on url parameters using just Javascript so that part is not a problem. As far as the comments part goes I've been trying to use a Noteboard WebPart, and then my desire is to have the "Url for Note" property to change dependent on the same URL parameter. I've looked over the Javascript Object Model and Class Library on MSDN but the hierarchy seems to stop at WebPart so I'm not finding anything that will allow me to update the Url for Note property.
I've read comments saying that there's a lot of exploration involved with this so I've tried the following:
-loading the javascript files into VisualStudio to use intellisense for looking up functions and properties in the SP.js files.
-console.log() on: WebPartDefinitionCollection, WebPartDefinition, WebPart, and methods .get_objectData(), get_properties() on all the previous
-embedding script in the "Builder" on the Url for Note property (where it says "click to use Builder" - I'm still not sure what more this offers than just a bigger textbox to put in the URL path)
I'm certain I've missed something obvious here but am gaining information very slowly now that I've exhausted the usual suspects. I very much appreciate any more resources or information anyone has and am willing to accept that I may be approaching this incorrectly if someone has accomplished this before.
Normally I'd keep going through whatever info I could find but I'm currently on a trial period and start school back up again soon so I won't have as much time with it. Apologies if this seems impatient, I'm just not sure where else to look at the moment.
Did you check out the API libraries like SPServices or SharepointPlus? They could help you doing what you want...
For example with SharepointPlus you could:
Create a Sharepoint List with a "Note" column and whatever you need to record
When the user goes to the page with the image you just show a TEXTAREA input with a SAVE button
When the user hits the SAVE button it will save the Note to the related list using $SP().list("Your list").add()
And you can easily retrieve the information (to show them to the user if he goes back to the page) with $SP().list("Your list").get()
If I understood your problem, that way it may be easier for you to deal with a customized page :-)