admin/Kae7in-perfview
1
0
Fork 0
mirror of https://github.com/Kae7in/perfview synced 2026-08-09 12:09:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Got initial stage of changing directories and opening a .etl.zip file working

Browse Source
This commit is contained in:
Kaelin Hooper
2016-06-29 15:00:59 -07:00
parent d564be4bdd
commit ade436f9b9
4 changed files with 127 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/HtmlJs/PerfDataService/Controllers/DataController.cs
+17 -4
View File
@@ -29,7 +29,7 @@ namespace PerfDataService.Controllers
// Dictionary containing entire hierarchy
Dictionary<string, object> tree = new Dictionary<string, object>();
tree.Add("status", "OK");
tree.Add("name", path.Split('/').Last());
tree.Add("text", path.Split(new Char[] {'/', '\\'}).Last());
tree.Add("path", path);
tree.Add("type", getTypeOfItem(path));
@@ -79,6 +79,17 @@ namespace PerfDataService.Controllers
// Get all children in the directory
IEnumerable<string> children = Directory.EnumerateFileSystemEntries(pathToItem);
if (pathToItem != "C:/" || pathToItem != "C:\\")
{
// Add '..' directory
Dictionary<string, object> upDir = new Dictionary<string, object>();
upDir.Add("text", ".."); // Name of item
upDir.Add("type", "dir"); // Type of item
upDir.Add("path", System.IO.Directory.GetParent(pathToItem).FullName); // Path to item
upDir.Add("hasChildren", false); // TODO: Create method to derive hasChildren property of child item
childrenContainer.Add(upDir);
}
// Package them into dictionary objects
foreach (string child in children)
{
@@ -87,13 +98,15 @@ namespace PerfDataService.Controllers
// This is a file type we want to return!
Dictionary<string, object> dir = new Dictionary<string, object>();
dir.Add("name", child.Split('\\').Last()); // Name of item
dir.Add("text", child.Split('\\').Last()); // Name of item
dir.Add("type", type); // Type of item
dir.Add("path", child); // Path to item
dir.Add("hasChildren", hasChildren(child)); // TODO: Create method to derive hasChildren property of child item
childrenContainer.Add(dir);
}
System.Diagnostics.Debug.WriteLine("\n\n\n" + children.ToString() + "\n\n\n");
return childrenContainer;
}
// IF REAL FILE (e.g. .etl.zip, .etl)
@@ -109,7 +122,7 @@ namespace PerfDataService.Controllers
Dictionary<string, object> child = new Dictionary<string, object>();
childrenContainer.Add(child);
child.Add("name", CPUStacks.Name);
child.Add("text", CPUStacks.Name);
child.Add("type", CPUStacks.GetType());
System.Diagnostics.Debug.WriteLine("type: " + CPUStacks.GetType());
@@ -145,7 +158,7 @@ namespace PerfDataService.Controllers
// Add more types as they are implemented
switch (fileExtension)
{
case "etl.zip":
case "zip":
return "file";
case "etl":
return "file";
src/HtmlJs/PerfDataService/Views/js/Delegate.js
+89 -27
View File
@@ -2,37 +2,99 @@ function Delegate() {
var self = this;
self.domain = "http://localhost:5000";
self.defaultDirectoryTreePath = "C:/Users/t-kahoop/Development/perfview/src/PerfView/bin/Debug";
self.treeDivID = "#treeContainer";
this.log = function log(status) {
$("#statusBar span").text(status);
}
self.log = function log(status) {
$("#statusBar span").text(status);
};
this.httpGet = function httpGet(url, callback) {
url = self.domain + url;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
self.log("GET " + url + " Complete");
callback(JSON.parse(xmlHttp.responseText));
} else {
self.log("GET " + url + " " + xmlHttp.status);
}
}
// PRIVATE
function httpGet(url, callback) {
url = self.domain + url;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
self.log("GET " + url + " Complete");
callback(JSON.parse(xmlHttp.responseText));
} else {
self.log("GET " + url + " " + xmlHttp.status);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
};
self.changeDirectoryTreePath = function changeDirectoryTreePath(path) {
httpGet("/api/data/open?path=" + path, function (response) {
console.log(response);
createJsTreeFromJSON(response);
delegate.log("Completed: Directory Tree Path Update");
});
};
// PRIVATE
function createJsTreeFromJSON(JSONTree) {
// In case there is a tree already loaded in the div, destroy it
$(self.treeDivID).jstree("destroy");
// Load the JSON data
$(self.treeDivID).jstree({
'core': {
'data': JSONTree.children
}
});
// Add JsTree event listeners (handles user interactions with the tree)
addJsTreeEventListeners();
};
// PRIVATE
function addJsTreeEventListeners() {
$(self.treeDivID).on('activate_node.jstree', function (event, node) {
self.changeDirectoryTreePath(node.node.original.path); // JSTree has a node within a node.. Weird.
});
// TODO: Use double click event to change directory
//$(self.treeDivID).on('dblclick.jstree', function (event, node) {
// var node = $(event.target).closest("li");
// var node_id = node[0].id
// var newPath = $(self.treeDivID).find(node_id);
// console.log(newPath);
// self.changeDirectoryTreePath(node.node.original.path);
//});
// TODO: Get dropdown arrows working
//$(self.treeDivID).on('load_node.jstree', function (event, data) {
// var treeNode = data.node;
// if (treeNode.type === NODE_TYPE_FOLDER) {
// domNode = $(self.treeDivID).jstree.get_node(treeNode.id, true);
// domNode.addClass('jstree-open').removeClass('jstree-leaf');
// }
//});
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
this.changeDirectoryTreePath = function changeDirectoryTreePath(path) {
self.httpGet("/api/data/open?path=" + path, function (response) {
console.log(response);
var items = response.children;
var htmlFromJSON = createTreeFromJSON(items);
$("#directoryTree").html(htmlFromJSON);
delegate.log("Completed: Directory Tree Path Update");
});
}
}
delegate = new Delegate();
/**********************************************************/
/**********************************************************/
/**************** USING THE DELEGATE BELOW ****************/
/**********************************************************/
/**********************************************************/
$(document).ready(function () {
delegate.changeDirectoryTreePath(delegate.defaultDirectoryTreePath);
});
$(document).ready(function () {
// TODO: Pull these from a cache file of the 10 most recently options the user has chosen
$("#recentDirectories").append("<option value=" + delegate.defaultDirectoryTreePath + "/>");
});
src/HtmlJs/PerfDataService/Views/static/home.css
+4 -2
View File
@@ -155,8 +155,10 @@ Tree View and Welcome View
}
/* Tree Hierarchy */
.wrapper #treeContainer ul li {
font-size: .9em;
.wrapper #treeContainer li {
overflow: hidden;
text-overflow: clip;
font-size: .75em;
}
/* Welcome View */
src/HtmlJs/PerfDataService/Views/static/index.html
+17 -38
View File
@@ -3,12 +3,15 @@
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<!-- basicContext Library -->
<!-- basicContext Theme -->
<link rel="stylesheet" href="../node_modules/basiccontext/dist/basicContext.min.css">
<!-- <link rel="stylesheet" href="node_modules/basiccontext/dist/themes/default.min.css"> -->
<link rel="stylesheet" href="../node_modules/basiccontext/dist/themes/bright.min.css">
<link rel="stylesheet" href="../node_modules/basiccontext/dist/addons/popin.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- jsTree Theme -->
<link rel="stylesheet" href="../node_modules/jstree/dist/themes/default/style.min.css" />
</head>
<body>
@@ -17,11 +20,8 @@
<div class="wrapper">
<div id="sideBarContainer">
<input id="dirSelect" list="directories" type="text" onchange="delegate.changeDirectoryTreePath(this.value)">
<datalist id="directories">
<option value="dir0"/>
<option value="dir1"/>
<option value="dir2"/>
<input id="dirSelect" list="recentDirectories" type="text" onchange="delegate.changeDirectoryTreePath(this.value)">
<datalist id="recentDirectories">
</datalist>
@@ -33,10 +33,9 @@
</div>
<div id="treeContainer">
<ul class="mktree" id="directoryTree">
</ul>
</div>
</div>
<div id="welcome">
@@ -160,40 +159,20 @@
<!-- MKTREE Library -->
<script type="text/javascript" src="../libraries/mktree/mktree.js"></script>
<link rel="stylesheet" href="../libraries/mktree/mktree.css" type="text/css">
<!--<script type="text/javascript" src="../libraries/mktree/mktree.js"></script>
<link rel="stylesheet" href="../libraries/mktree/mktree.css" type="text/css">-->
<!-- jsTree Library -->
<script src="../node_modules/jstree/dist/jstree.min.js"></script>
<!-- GET Tree View Hierarchy -->
<script>
<!--<script>
// GET all directories and items and append them to tree view
$(document).ready(function () {
delegate.changeDirectoryTreePath(delegate.defaultDirectoryTreePath);
});
// Recursively parse JSON tree
function createTreeFromJSON(items) {
var htmlToAppend = "";
for (var i = 0; i < items.length; ++i) {
var item = items[i];
if (item.type == "dir" && item.children) {
// It's a file
htmlToAppend += "<li>" + item.name
+ "<ul>\n"
+ createTreeFromJSON(item.children)
+ "\n</ul>\n" +
"</li>";
} else {
// It's an item
htmlToAppend += "<li>" + item.name + "</li>";
}
}
return htmlToAppend;
}
</script>
//$(document).ready(function () {
// delegate.changeDirectoryTreePath(delegate.defaultDirectoryTreePath);
//});
</script>-->