2018-12-04 19:53:10 +03:00
Ext . define ( 'PBS.MainView' , {
extend : 'Ext.container.Container' ,
xtype : 'mainview' ,
title : 'Proxmox Backup Server' ,
controller : {
xclass : 'Ext.app.ViewController' ,
routes : {
':path:subpath' : {
action : 'changePath' ,
before : 'beforeChangePath' ,
conditions : {
2020-05-20 17:08:11 +03:00
':path' : '(?:([%a-zA-Z0-9\\-\\_\\s,\.]+))' ,
2018-12-04 19:53:10 +03:00
':subpath' : '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?'
}
}
} ,
2019-12-18 21:21:59 +03:00
2018-12-04 19:53:10 +03:00
beforeChangePath : function ( path , subpath , action ) {
var me = this ;
2020-05-20 13:15:38 +03:00
let xtype = path ;
let datastore ;
let isDataStore = PBS . Utils . isDataStorePath ( path ) ;
if ( isDataStore ) {
xtype = 'pbsDataStorePanel' ;
datastore = PBS . Utils . getDataStoreFromPath ( path ) ;
}
if ( ! Ext . ClassManager . getByAlias ( ` widget. ${ xtype } ` ) ) {
console . warn ( ` xtype ${ xtype } not found ` ) ;
2019-01-22 13:48:00 +03:00
action . stop ( ) ;
return ;
}
var lastpanel = me . lookupReference ( 'contentpanel' ) . getLayout ( ) . getActiveItem ( ) ;
2020-05-20 13:15:38 +03:00
if ( lastpanel && lastpanel . xtype === xtype ) {
if ( isDataStore ) {
if ( datastore === lastpanel . datastore ) {
2019-12-20 14:46:09 +03:00
action . stop ( ) ;
return ;
}
} else {
// we have the right component already,
// we just need to select the correct tab
// default to the first
subpath = subpath || 0 ;
if ( lastpanel . getActiveTab ) {
// we assume lastpanel is a tabpanel
if ( lastpanel . getActiveTab ( ) . getItemId ( ) !== subpath ) {
// set the active tab
lastpanel . setActiveTab ( subpath ) ;
}
// else we are already there
2019-01-22 13:48:00 +03:00
}
2019-12-20 14:46:09 +03:00
action . stop ( ) ;
return ;
2019-01-22 13:48:00 +03:00
}
}
2018-12-04 19:53:10 +03:00
action . resume ( ) ;
} ,
2019-12-18 21:21:59 +03:00
2019-12-20 14:46:09 +03:00
changePath : function ( path , subpath ) {
2018-12-04 19:53:10 +03:00
var me = this ;
var contentpanel = me . lookupReference ( 'contentpanel' ) ;
var lastpanel = contentpanel . getLayout ( ) . getActiveItem ( ) ;
2019-12-20 14:46:09 +03:00
var obj ;
2020-05-20 13:15:38 +03:00
if ( PBS . Utils . isDataStorePath ( path ) ) {
let datastore = PBS . Utils . getDataStoreFromPath ( path ) ;
obj = contentpanel . add ( {
xtype : 'pbsDataStorePanel' ,
2020-06-25 11:45:48 +03:00
nodename : 'localhost' ,
2020-05-20 13:15:38 +03:00
datastore ,
} ) ;
2019-12-20 14:46:09 +03:00
} else {
2020-06-25 11:45:48 +03:00
obj = contentpanel . add ( {
xtype : path ,
nodename : 'localhost' ,
border : false
} ) ;
2019-12-20 14:46:09 +03:00
}
2019-01-22 13:48:00 +03:00
var treelist = me . lookupReference ( 'navtree' ) ;
treelist . suspendEvents ( ) ;
2019-12-20 14:46:09 +03:00
if ( subpath === undefined ) {
treelist . select ( path ) ;
} else {
treelist . select ( path + ':' + subpath ) ;
}
2019-01-22 13:48:00 +03:00
treelist . resumeEvents ( ) ;
if ( Ext . isFunction ( obj . setActiveTab ) ) {
obj . setActiveTab ( subpath || 0 ) ;
obj . addListener ( 'tabchange' , function ( tabpanel , newc , oldc ) {
var newpath = path ;
// only add the subpath part for the
// non-default tabs
if ( tabpanel . items . findIndex ( 'id' , newc . id ) !== 0 ) {
newpath += ":" + newc . getItemId ( ) ;
}
me . redirectTo ( newpath ) ;
} ) ;
}
contentpanel . setActiveItem ( obj ) ;
if ( lastpanel ) {
contentpanel . remove ( lastpanel , { destroy : true } ) ;
}
} ,
2019-01-30 17:14:20 +03:00
logout : function ( ) {
PBS . app . logout ( ) ;
} ,
2019-01-22 13:48:00 +03:00
navigate : function ( treelist , item ) {
this . redirectTo ( item . get ( 'path' ) ) ;
2018-12-04 19:53:10 +03:00
} ,
2019-01-30 17:14:20 +03:00
control : {
'button[reference=logoutButton]' : {
click : 'logout'
}
} ,
2018-12-04 19:53:10 +03:00
init : function ( view ) {
var me = this ;
2019-12-17 15:00:17 +03:00
me . lookupReference ( 'usernameinfo' ) . update ( { username : Proxmox . UserName } ) ;
2019-12-17 16:44:25 +03:00
2019-12-17 16:45:13 +03:00
// show login on requestexception
// fixme: what about other errors
Ext . Ajax . on ( 'requestexception' , function ( conn , response , options ) {
if ( response . status == 401 ) { // auth failure
me . logout ( ) ;
}
} ) ;
2019-12-17 16:44:25 +03:00
// get ticket periodically
Ext . TaskManager . start ( {
run : function ( ) {
var ticket = Proxmox . Utils . authOK ( ) ;
if ( ! ticket || ! Proxmox . UserName ) {
return ;
}
Ext . Ajax . request ( {
params : {
username : Proxmox . UserName ,
password : ticket
} ,
url : '/api2/json/access/ticket' ,
method : 'POST' ,
failure : function ( ) {
me . logout ( ) ;
} ,
success : function ( response , opts ) {
var obj = Ext . decode ( response . responseText ) ;
2019-12-17 17:42:59 +03:00
PBS . Utils . updateLoginData ( obj . data ) ;
2019-12-17 16:44:25 +03:00
}
} ) ;
} ,
interval : 15 * 60 * 1000
} ) ;
2019-12-18 21:19:30 +03:00
// select treeitem and load page from url fragment, if set
let token = Ext . util . History . getToken ( ) || 'pbsDashboard' ;
this . redirectTo ( token , true ) ;
2018-12-04 19:53:10 +03:00
}
} ,
plugins : 'viewport' ,
layout : { type : 'border' } ,
items : [
{
region : 'north' ,
xtype : 'container' ,
layout : {
type : 'hbox' ,
align : 'middle'
} ,
margin : '2 5 2 5' ,
height : 38 ,
items : [
{
2020-05-18 15:18:37 +03:00
xtype : 'proxmoxlogo' ,
prefix : '' ,
2018-12-04 19:53:10 +03:00
} ,
{
2018-12-04 19:58:40 +03:00
xtype : 'versioninfo'
2018-12-04 19:53:10 +03:00
} ,
2020-07-03 13:48:49 +03:00
{
padding : 5 ,
html : '<a href="https://bugzilla.proxmox.com" target="_blank">BETA</a>' ,
baseCls : 'x-plain' ,
} ,
2018-12-04 19:53:10 +03:00
{
2020-07-03 13:48:50 +03:00
flex : 1 ,
baseCls : 'x-plain' ,
2018-12-04 19:53:10 +03:00
} ,
{
baseCls : 'x-plain' ,
reference : 'usernameinfo' ,
padding : '0 5' ,
tpl : Ext . String . format ( gettext ( "You are logged in as {0}" ) , "'{username}'" )
} ,
2019-12-16 20:16:06 +03:00
{
xtype : 'button' ,
baseCls : 'x-btn' ,
cls : 'x-btn-default-toolbar-small proxmox-inline-button' ,
iconCls : 'fa fa-book x-btn-icon-el-default-toolbar-small ' ,
text : gettext ( 'Documentation' ) ,
href : '/docs/index.html' ,
margin : '0 5 0 0' ,
} ,
2018-12-04 19:53:10 +03:00
{
reference : 'logoutButton' ,
xtype : 'button' ,
iconCls : 'fa fa-sign-out' ,
text : gettext ( 'Logout' )
}
]
} ,
{
xtype : 'panel' ,
scrollable : 'y' ,
border : false ,
region : 'west' ,
layout : {
type : 'vbox' ,
align : 'stretch'
} ,
2019-01-22 13:48:00 +03:00
items : [ {
xtype : 'navigationtree' ,
minWidth : 180 ,
reference : 'navtree' ,
// we have to define it here until extjs 6.2
// because of a bug where a viewcontroller does not detect
// the selectionchange event of a treelist
listeners : {
selectionchange : 'navigate'
}
} , {
xtype : 'box' ,
cls : 'x-treelist-nav' ,
flex : 1
} ]
2018-12-04 19:53:10 +03:00
} ,
{
xtype : 'panel' ,
layout : { type : 'card' } ,
region : 'center' ,
border : false ,
reference : 'contentpanel'
}
]
} ) ;