mirror of
https://github.com/datahub-project/datahub.git
synced 2025-07-27 03:19:51 +00:00
392 lines
12 KiB
JavaScript
392 lines
12 KiB
JavaScript
![]() |
(function ($) {
|
||
|
$(document).ready(function() {
|
||
|
var token = $("#csrfToken").val();
|
||
|
|
||
|
$("#settingsbtn").click(function(){
|
||
|
var url ='/api/v1/user/me'
|
||
|
$
|
||
|
.get
|
||
|
( url
|
||
|
, function(data) {
|
||
|
var settings = data.user.userSetting || {}
|
||
|
for(var key in settings) {
|
||
|
$("form[name='settingsForm'] [name='" + key + "']").val(settings[key])
|
||
|
}
|
||
|
}
|
||
|
).fail(function(){
|
||
|
console.error("Could not pull data")
|
||
|
})
|
||
|
$("#settingsModal").modal('show')
|
||
|
});
|
||
|
|
||
|
$("#submitSettingsForm").on('click', function(){
|
||
|
var settings = {}
|
||
|
$("form[name='settingsForm']").serializeArray().map(function(item){
|
||
|
var name = item.name.replace(/([A-Z])/g, function($1){ return "_" + $1.toLowerCase(); })
|
||
|
settings[name] = item.value
|
||
|
})
|
||
|
var token = $("#csrfToken").val().replace('/', '')
|
||
|
var url = "/api/v1/usersettings/me"
|
||
|
settings.csrfToken = token
|
||
|
$.ajax({
|
||
|
url: url,
|
||
|
method: 'POST',
|
||
|
headers: {
|
||
|
'Csrf-Token': token
|
||
|
},
|
||
|
dataType: 'json',
|
||
|
data: settings
|
||
|
}).done(function(data, txt, xhr){
|
||
|
$("#settingsModal").modal('hide')
|
||
|
location.reload()
|
||
|
}).fail(function(xhr, txt, err){
|
||
|
console.log('Error: Could not update settings.')
|
||
|
})
|
||
|
})
|
||
|
|
||
|
var currentTab = 'Datasets';
|
||
|
|
||
|
var width = $(window).width()*0.99;
|
||
|
var height = ($(window).height() * 0.99) - 82;
|
||
|
|
||
|
$('#mainSplitter').height(height);
|
||
|
|
||
|
$("#mainSplitter").splitter({
|
||
|
type: "v",
|
||
|
minLeft: 100,
|
||
|
sizeLeft: 250,
|
||
|
minRight: 100,
|
||
|
dock: "left",
|
||
|
dockSpeed: 200,
|
||
|
dockKey: 'Z',
|
||
|
accessKey: 'I'
|
||
|
});
|
||
|
|
||
|
var splitterResize = false;
|
||
|
var skipResize = false;
|
||
|
|
||
|
$('#listviewbtn').click(function(){
|
||
|
$('#listviewbtn').removeClass('btn-primary');
|
||
|
$('#listviewbtn').removeClass('btn-default');
|
||
|
$('#treeviewbtn').removeClass('btn-primary');
|
||
|
$('#treeviewbtn').removeClass('btn-default');
|
||
|
$('#listviewbtn').addClass('btn-primary');
|
||
|
$('#treeviewbtn').addClass('btn-default');
|
||
|
$('#tree1').hide();
|
||
|
$('#tree2').hide();
|
||
|
$('#tree3').hide();
|
||
|
$('#datasetlist').show();
|
||
|
$('#metriclist').show();
|
||
|
$('#flowlist').show();
|
||
|
});
|
||
|
|
||
|
$('#treeviewbtn').click(function(){
|
||
|
$('#listviewbtn').removeClass('btn-primary');
|
||
|
$('#listviewbtn').removeClass('btn-default');
|
||
|
$('#treeviewbtn').removeClass('btn-primary');
|
||
|
$('#treeviewbtn').removeClass('btn-default');
|
||
|
$('#listviewbtn').addClass('btn-default');
|
||
|
$('#treeviewbtn').addClass('btn-primary');
|
||
|
$('#datasetlist').hide();
|
||
|
$('#metriclist').hide();
|
||
|
$('#flowlist').hide();
|
||
|
$('#tree1').show();
|
||
|
$('#tree2').show();
|
||
|
$('#tree3').show();
|
||
|
});
|
||
|
|
||
|
$(window).resize(function() {
|
||
|
if (skipResize)
|
||
|
return;
|
||
|
if (splitterResize)
|
||
|
clearTimeout(splitterResize);
|
||
|
skipResize = true;
|
||
|
splitterResize = setTimeout(function() {
|
||
|
var height = ($(window).height() * 0.99) - 82;
|
||
|
var width = $(window).width()*0.99;
|
||
|
$("#mainSplitter").css("height", height, "width", width).trigger("resize");
|
||
|
skipResize = false;
|
||
|
}, 500);
|
||
|
});
|
||
|
|
||
|
var markedRendererOverride = new marked.Renderer()
|
||
|
markedRendererOverride.link = function(href, title, text) {
|
||
|
return "<a href='" + href + "' title='" + (title || text) + "' target='_blank'>" + text + "</a>";
|
||
|
}
|
||
|
|
||
|
marked.setOptions({
|
||
|
gfm: true,
|
||
|
tables: true,
|
||
|
renderer: markedRendererOverride
|
||
|
})
|
||
|
});
|
||
|
|
||
|
})(jQuery)
|
||
|
|
||
|
var convertQueryStringToObject = function() {
|
||
|
var queryString = {}
|
||
|
var uri = window.location.hash || window.location.search
|
||
|
uri.replace(
|
||
|
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
|
||
|
function($0, $1, $2, $3) {
|
||
|
queryString[$1] = $3
|
||
|
}
|
||
|
)
|
||
|
return queryString;
|
||
|
}
|
||
|
|
||
|
function resetCategoryActiveFlag(category)
|
||
|
{
|
||
|
$('#categoryDatasets').removeClass('active');
|
||
|
$('#categoryComments').removeClass('active');
|
||
|
$('#categoryMetrics').removeClass('active');
|
||
|
$('#categoryFlows').removeClass('active');
|
||
|
$('#categoryJobs').removeClass('active');
|
||
|
if (category.toLowerCase() == 'datasets')
|
||
|
{
|
||
|
$('#categoryDatasets').addClass('active');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'comments')
|
||
|
{
|
||
|
$('#categoryComments').addClass('active');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'metrics')
|
||
|
{
|
||
|
$('#categoryMetrics').addClass('active');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'flows')
|
||
|
{
|
||
|
$('#categoryFlows').addClass('active');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'jobs')
|
||
|
{
|
||
|
$('#categoryJobs').addClass('active');
|
||
|
}
|
||
|
currentCategory = category;
|
||
|
}
|
||
|
|
||
|
function updateSearchCategories(category)
|
||
|
{
|
||
|
if (category.toLowerCase() == 'all')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-list');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'datasets')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-database');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'comments')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-comment');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'metrics')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-plus-square-o');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'flows')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-random');
|
||
|
}
|
||
|
else if (category.toLowerCase() == 'jobs')
|
||
|
{
|
||
|
$('#categoryIcon').removeClass('fa fa-list');
|
||
|
$('#categoryIcon').removeClass('fa fa-database');
|
||
|
$('#categoryIcon').removeClass('fa fa-comment');
|
||
|
$('#categoryIcon').removeClass('fa fa-random');
|
||
|
$('#categoryIcon').removeClass('fa fa-plus-square-o');
|
||
|
$('#categoryIcon').removeClass('fa fa-file-o');
|
||
|
$('#categoryIcon').addClass('fa fa-file-o');
|
||
|
}
|
||
|
resetCategoryActiveFlag(category);
|
||
|
}
|
||
|
|
||
|
String.prototype.toProperCase = function(){
|
||
|
return this.replace(/\w\S*/g, function(txt){
|
||
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
|
||
|
})
|
||
|
}
|
||
|
|
||
|
function renderDatasetListView(nodes, name)
|
||
|
{
|
||
|
var folderTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-folder"></i> $NODE_NAME</a>';
|
||
|
var datasetTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-database"></i> $NODE_NAME</a>';
|
||
|
var activeTemplate = '<a href="$URL" class="active list-group-item"><i class="fa fa-database"></i> $NODE_NAME</a>';
|
||
|
var obj = $('#datasetlist');
|
||
|
if (!obj)
|
||
|
return;
|
||
|
obj.empty();
|
||
|
var activeObj;
|
||
|
for(var i = 0; i < nodes.length; i++)
|
||
|
{
|
||
|
if (nodes[i].datasetId && nodes[i].datasetId > 0)
|
||
|
{
|
||
|
if (name && name == nodes[i].nodeName)
|
||
|
{
|
||
|
|
||
|
obj.append(activeTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(datasetTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(folderTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
|
||
|
}
|
||
|
if (activeObj)
|
||
|
{
|
||
|
var scrollToActiveNode = function() {
|
||
|
$("#tabSplitter").scrollTo(activeObj, 800)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function renderFlowListView(nodes, flowId)
|
||
|
{
|
||
|
var folderTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-folder"></i> $NODE_NAME</a>';
|
||
|
var flowTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-random"></i> $NODE_NAME</a>';
|
||
|
var activeTemplate = '<a href="$URL" class="active list-group-item"><i class="fa fa-random"></i> $NODE_NAME</a>';
|
||
|
var obj = $('#flowlist');
|
||
|
if (!obj)
|
||
|
return;
|
||
|
obj.empty();
|
||
|
var activeObj;
|
||
|
for(var i = 0; i < nodes.length; i++)
|
||
|
{
|
||
|
if (nodes[i].flowId && nodes[i].flowId > 0)
|
||
|
{
|
||
|
if (flowId == nodes[i].flowId)
|
||
|
{
|
||
|
activeObj = obj.append(activeTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(flowTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(folderTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
|
||
|
}
|
||
|
if (activeObj)
|
||
|
{
|
||
|
var scrollToActiveNode = function() {
|
||
|
$("#tabSplitter").scrollTo(activeObj, 800)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function renderMetricListView(nodes, metricId)
|
||
|
{
|
||
|
var folderTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-folder"></i>$NODE_NAME</a>';
|
||
|
var metricTemplate = '<a href="$URL" class="list-group-item"><i class="fa fa-plus-square-o"></i>$NODE_NAME</a>';
|
||
|
var activeTemplate = '<a href="$URL" class="active list-group-item"><i class="fa fa-plus-square-o"></i>$NODE_NAME</a>';
|
||
|
var obj = $('#metriclist');
|
||
|
if (!obj)
|
||
|
return;
|
||
|
obj.empty();
|
||
|
var activeObj;
|
||
|
for(var i = 0; i < nodes.length; i++)
|
||
|
{
|
||
|
if (nodes[i].metricId && nodes[i].metricId > 0)
|
||
|
{
|
||
|
if (metricId == nodes[i].metricId)
|
||
|
{
|
||
|
activeObj = obj.append(activeTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(metricTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
obj.append(folderTemplate.replace('$NODE_NAME', nodes[i].nodeName).replace("$URL", nodes[i].nodeUrl));
|
||
|
}
|
||
|
|
||
|
}
|
||
|
if (activeObj)
|
||
|
{
|
||
|
var scrollToActiveNode = function() {
|
||
|
$("#tabSplitter").scrollTo(activeObj, 800)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function filterListView(category, filter)
|
||
|
{
|
||
|
var obj = $('#flowlist');
|
||
|
if (category == 'Datasets')
|
||
|
{
|
||
|
obj = $('#datasetlist');
|
||
|
}
|
||
|
else if (category == 'Metrics')
|
||
|
{
|
||
|
obj = $('#metriclist');
|
||
|
}
|
||
|
|
||
|
if (!obj || !obj.children() || obj.children().length == 0)
|
||
|
{
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var items = obj.children();
|
||
|
|
||
|
for(var i = 0; i < items.length; i++)
|
||
|
{
|
||
|
if (!filter)
|
||
|
{
|
||
|
$(items[i]).show();
|
||
|
}
|
||
|
else if (items[i].text && items[i].text.toLowerCase().includes(filter.toLowerCase()))
|
||
|
{
|
||
|
$(items[i]).show();
|
||
|
}
|
||
|
else
|
||
|
{
|
||
|
$(items[i]).hide();
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function initializeColumnTreeGrid()
|
||
|
{
|
||
|
$('#json-table').treegrid();
|
||
|
}
|
||
|
|