Skip to content

Commit

Permalink
Merge pull request #4690 from Countly/SER-868-update-version--view-to…
Browse files Browse the repository at this point in the history
…-new-UI

[SER-868] version history new UI
  • Loading branch information
coskunaydinoglu committed Nov 21, 2023
2 parents 7da5489 + e818c8d commit 37183ee
Show file tree
Hide file tree
Showing 9 changed files with 114 additions and 108 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,8 +196,9 @@ module.exports = function(grunt) {
'frontend/express/public/core/home/javascripts/countly.models.js',
'frontend/express/public/core/home/javascripts/countly.views.js',
'frontend/express/public/core/notes/javascripts/countly.views.js',
'frontend/express/public/core/version-history/javascripts/countly.views.js',
'frontend/express/public/core/onboarding/javascripts/countly.models.js',
'frontend/express/public/core/onboarding/javascripts/countly.views.js',
'frontend/express/public/core/onboarding/javascripts/countly.views.js'
],
dest: 'frontend/express/public/javascripts/min/countly.lib.concat.js'
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/* global countlyVue, app, countlyGlobal, countlyVersionHistoryManager, CV, jQuery*/
var VersionHistoryView = countlyVue.views.create({
template: CV.T('/core/version-history/templates/version-history.html'),
data: function() {
return {
tableData: {
db: [],
fs: [],
pkg: "",
mongo: ""
}
};
},
mounted: function() {
this.tableData = countlyVersionHistoryManager.getData(true) || this.tableData;
},
methods: {
getTable: function(dataObj) {
if (!Array.isArray(dataObj)) {
dataObj = [];
}
if (dataObj.length === 0) {
dataObj.push({"version": countlyGlobal.countlyVersion, "updated": new Date().toString()});
dataObj[dataObj.length - 1].version += " " + jQuery.i18n.map["version_history.current-version"];

}
else {
dataObj[dataObj.length - 1].version = this.tableData.pkg + " " + jQuery.i18n.map["version_history.current-version"];
dataObj[dataObj.length - 1].updated = new Date(dataObj[dataObj.length - 1].updated).toString();
}

return dataObj;
}
},
computed: {
dbTitle: function() {
return jQuery.i18n.map["version_history.page-title"] + " (DB)";
},
fsTitle: function() {
return jQuery.i18n.map["version_history.page-title"] + " (FS)";
},
packageVersion: function() {
return jQuery.i18n.map["version_history.package-version"] + ": " + this.tableData.pkg;
},
mongoVersion: function() {
return "MongDb version: " + this.tableData.mongo;
},
versionHistoryViewDbRows: function() {
return this.getTable(this.tableData.db);

},
versionHistoryViewFsRows: function() {
return this.getTable(this.tableData.fs);
}

}
});

app.route("/versions", 'versions', function() {
this.renderWhenReady(new CV.views.BackboneWrapper({
component: VersionHistoryView
}));
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.header{
display: flex;
flex-direction: column; /* Stack divs vertically */
gap: 20px; /* Add space between divs */
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div v-bind:class="[componentId]" class="version-history-view">
<cly-header>
<template v-slot:header-left>
<div class="header">
<div>{{ packageVersion }}</div>
<div>{{ mongoVersion }}</div>
</div>
</template>
</cly-header>
<cly-main>

<cly-section>
<cly-datatable-n :rows="versionHistoryViewDbRows" :resizable="true" >
<template v-slot:header-left="selectScope">
<p> {{ dbTitle }} </p>
</template>
<template v-slot="scope">
<el-table-column column-key="version" prop="version" sortable="custom" :label="i18n('version_history.version')"></el-table-column>
<el-table-column column-key="updated" prop="updated" sortable="custom" :label="i18n('version_history.upgraded')"></el-table-column>
</template>
</cly-datatable-n>
</cly-section>

<cly-section>
<cly-datatable-n :rows="versionHistoryViewFsRows" :resizable="true" >
<template v-slot:header-left="selectScope">
<p> {{ fsTitle }} </p>
</template>
<template v-slot="scope">
<el-table-column column-key="version" prop="version" sortable="custom" :label="i18n('version_history.version')"></el-table-column>
<el-table-column column-key="updated" prop="updated" sortable="custom" :label="i18n('version_history.upgraded')"></el-table-column>
</template>
</cly-datatable-n>
</cly-section>

</cly-main>
</div>

84 changes: 1 addition & 83 deletions frontend/express/public/javascripts/countly/countly.views.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global countlyView, countlyCommon, app, CountlyHelpers, countlyGlobal, Handlebars, countlyTaskManager, countlyVersionHistoryManager, DownloadView, VersionHistoryView, Backbone, jQuery, $*/
/* global countlyView, countlyCommon, app, CountlyHelpers, countlyGlobal, countlyTaskManager, countlyVersionHistoryManager, DownloadView, Backbone, jQuery, $*/

window.DashboardView = countlyView.extend({
renderCommon: function() {
Expand Down Expand Up @@ -58,83 +58,6 @@ window.DownloadView = countlyView.extend({
}
});

window.VersionHistoryView = countlyView.extend({
initialize: function() {
this.template = Handlebars.compile($("#version-history-template").html());
},
beforeRender: function() {
return $.when(countlyVersionHistoryManager.initialize()).then(function() {});
},
renderCommon: function(isRefresh) {

var tableData = countlyVersionHistoryManager.getData(true) || {fs: [], db: [], pkg: "", "mongo": ""};

//provide template data
this.templateData = {
"db-title": jQuery.i18n.map["version_history.page-title"] + " (DB)",
"fs-title": jQuery.i18n.map["version_history.page-title"] + " (FS)",
"package-version": jQuery.i18n.map["version_history.package-version"] + ": " + tableData.pkg,
"mongo-version": "MongDb version:" + tableData.mongo
};

/**
* Processes version history and returns a DataTable config
* @param {object} dataObj Version history array
* @returns {object} DataTable configuration
*/
function getTable(dataObj) {

if (!Array.isArray(dataObj)) {
dataObj = [];
}
if (dataObj.length === 0) {
dataObj.push({"version": countlyGlobal.countlyVersion, "updated": Date.now()});
}
else {
dataObj[dataObj.length - 1].version += (" " + jQuery.i18n.map["version_history.current-version"]);
}

return {
"aaData": dataObj,
"fnRowCallback": function(nRow, aData) {
$(nRow).attr("data-id", aData._id);
//$(nRow).attr("data-name", aData.report_name || aData.name || '-');
},
"aoColumns": [
{
"mData": function(row) {
return row.version;
},
"sType": "string",
"sTitle": jQuery.i18n.map["version_history.version"],
"bSortable": false,
"sClass": "break"
},
{
"mData": function(row) {
return new Date(row.updated);
},
"sType": "numeric",
"sTitle": jQuery.i18n.map["version_history.upgraded"],
"bSortable": true,
"sClass": "break"
}
]
};
}

if (!isRefresh) {
//set data
$(this.el).html(this.template(this.templateData));

this.dtableFs = $('#data-table-fs').dataTable($.extend({"searching": false, "paging": false}, $.fn.dataTable.defaults, getTable(tableData.fs)));
this.dtableFs.fnSort([ [1, 'desc'] ]);
this.dtableDb = $('#data-table-db').dataTable($.extend({"searching": false, "paging": false}, $.fn.dataTable.defaults, getTable(tableData.db)));
this.dtableDb.fnSort([ [1, 'desc'] ]);
}
}
});

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
//jqXHR.setRequestHeader('X-CSRFToken', csrf_token);
if (countlyGlobal.auth_token) {
Expand All @@ -151,7 +74,6 @@ $.ajaxPrefilter(function(options, originalOptions, jqXHR) {

//register views
app.DownloadView = new DownloadView();
app.VersionHistoryView = new VersionHistoryView();


// app.route("/analytics/events", "events", function() {
Expand All @@ -169,10 +91,6 @@ app.route('/exportedData/tableExport/:task_id', 'userExportTask', function(task_
this.renderWhenReady(this.DownloadView);
});

app.route('/versions', 'version_history', function() {
this.renderWhenReady(this.VersionHistoryView);
});

app.addAppSwitchCallback(function() {
$.when(countlyVersionHistoryManager.initialize()).then(function() {
var versionsData = countlyVersionHistoryManager.getData(true) || {fs: [], db: [], pkg: ""};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -567,6 +567,7 @@
return {
selectedMenuOptionLocal: null,
versionInfo: countlyGlobal.countlyTypeName,
countlySidebarVersionPath: '/dashboard#/' + countlyCommon.ACTIVE_APP_ID + '/versions',
showMainMenu: true,
redirectHomePage: '/dashboard#/' + countlyCommon.ACTIVE_APP_ID,
onOptionsMenu: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<analytics-menu ref="analytics" v-show="pseudoSelectedMenuOption === 'analytics'"></analytics-menu>
<management-menu ref="management" v-show="pseudoSelectedMenuOption === 'management'" @management-menu-ready="onManagementMenuReady"></management-menu>
<component :ref="item.name" v-for="item in components" :is="item.component" v-show="pseudoSelectedMenuOption === item.name" :key="item.name"></component>
<div class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version">{{versionInfo}}</div>
<a :href="countlySidebarVersionPath"><div class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version"> {{versionInfo}} </div></a>
</div>
</transition>
</div>
3 changes: 2 additions & 1 deletion frontend/express/public/stylesheets/styles/manifest.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,5 @@
@use "../../core/home/stylesheets/main" as home-main-style;
@use "../../core/app-management/stylesheets/main" as app-management-main-style;
@use "../../core/report-manager/stylesheets/main" as report-manager-main-style;
@use "../../core/onboarding/stylesheets/main" as onboarding-main-style;
@use "../../core/version-history/stylesheets/main" as version-history-main-style;
@use "../../core/onboarding/stylesheets/main" as onboarding-main-style;
23 changes: 1 addition & 22 deletions frontend/express/views/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -1601,28 +1601,6 @@ <h4><a href="#/analytics/events/key/{{encodeURIComponent this.name}}">{{this.nam
</div>
</script>


<script id="version-history-template" type="text/x-handlebars-template">
<div class="widget">
<div>{{ package-version }}</div>
<div>{{mongo-version}}</div>
<br>
<div class="widget-header">
<div class="title" style="margin-top:10px; margin-left:5px;">{{toUpperCase fs-title}}</div>
</div>
<div class="data-table table-template" data-help-localize="help.{{{chart-helper}}}">
<table id="data-table-fs" class="d-table help-zone-vb no-fix" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
</div>
<br>
<div class="widget-header">
<div class="title" style="margin-top:10px; margin-left:5px;">{{toUpperCase db-title}}</div>
</div>
<div class="data-table table-template" data-help-localize="help.{{{chart-helper}}}">
<table id="data-table-db" class="d-table help-zone-vb no-fix" cellpadding="0" cellspacing="0" data-help-localize="help.{{{table-helper}}}"></table>
</div>
</div>
</script>

<script id="graph-note-create" type="text/x-handlebars-template">
<div class="graph-note-create">
<div class="title"><span class="note-form-hearder" data-localize="notes.add-note-form-title"></span></div>
Expand Down Expand Up @@ -1873,6 +1851,7 @@ <h4><a href="#/analytics/events/key/{{encodeURIComponent this.name}}">{{this.nam
<script language="javascript" type="text/javascript" src="<%- cdn %>core/home/javascripts/countly.models.js?<%= countlyVersion %>"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>core/home/javascripts/countly.views.js?<%= countlyVersion %>"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>core/notes/javascripts/countly.views.js?<%= countlyVersion %>"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>core/version-history/javascripts/countly.views.js?<%= countlyVersion %>"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>core/onboarding/javascripts/countly.models.js?<%= countlyVersion %>"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>core/onboarding/javascripts/countly.views.js?<%= countlyVersion %>"></script>

Expand Down

0 comments on commit 37183ee

Please sign in to comment.