git.sur5r.net Git - bacula/bacula/blob - gui/baculum/protected/API/Pages/Panel/APIHome.page

   1 <%@ MasterClass="Application.API.Layouts.Main" Theme="Baculum-v1"%>
   2 <com:TContent ID="Main">
   3         <com:TClientScript ScriptUrl=<%~ ../../JavaScript/misc.js %> />
   4         <h3 style="clear: left">Welcome on the Baculum API default page <input type="button" class="bbutton" onclick="window.location.href='<%=$this->getService()->constructUrl('Panel.APIInstallWizard')%>'" value="<%[ Go to configuration wizard ]%>" style="float: right" /></h3>
   5         <div id="tabs">
   6                 <ul>
   7                         <li><a href="#tab1">Baculum API Client</a></li>
   8                         <li><a href="#tab2"><%[ List HTTP Basic users ]%></a></li>
   9                         <li><a href="#tab3"><%[ List OAuth2 clients ]%></a></li>
  10                 </ul>
  11                 <div id="tab1">
  12                         <p>Here you can try one from API commands</p>
  13                         <div>
  14                                 <com:TJuiProgressbar ID="Progress" Options.Max="3" Options.Value="false" Width="700px" CssClass="center" Style="float: left">
  15                                         <span id="progress_label">Starting...</span>
  16                                 </com:TJuiProgressbar>
  17                                 <img id="api_refresh" src="<%=$this->getPage()->getTheme()->getBaseUrl()%>/icon_refresh.png" alt="<%[ Refresh token ]%>" title="<%[ Refresh token ]%>" onclick="oAPIHome.init_oauth2_client();" />
  18                         </div>
  19                         <div style="clear: left; margin-top: 60px;">
  20                                 <select id="section" class="api_select">
  21                                         <option value="none"><%[ Please select API endpoint ]%></option>
  22                                         <option value="storages">storages</option>
  23                                         <option value="clients">clients</option>
  24                                         <option value="volumes">volumes</option>
  25                                         <option value="jobs">jobs</option>
  26                                         <option value="joblog">joblog</option>
  27                                         <option value="bvfs">bvfs</option>
  28                                 </select>
  29                                 <input id="api_command" name="command" onkeydown="if (event.keyCode == 13) { oAPIHome.send_request(); }" /> <input class="api_button" type="button" name="apply" value="Send request" onclick="oAPIHome.send_request();" />
  30                         </div>
  31                         <div id="api_output">
  32                                 <pre id="api_result"></pre>
  33                         </div>
  34                 </div>
  35                 <div id="tab2">
  36                         <input type="button" class="bbutton" onclick="$('#<%=$this->NewBasicClient->ClientID%>new_auth_client').slideToggle();" value="<%[ New HTTP Basic user ]%>" />
  37                         <com:Application.Common.Portlets.NewAuthClient ID="NewBasicClient" AuthType="basic" OnCallback="loadBasicUsers" />
  38                         <com:TActiveDataGrid
  39                                 ID="BasicClientList"
  40                                 AutoGenerateColumns="false"
  41                                 CellPadding="2"
  42                                 AlternatingItemStyle.BackColor="#4e4e50"
  43                                 CssClass="tab-grid"
  44                         >
  45                                 <com:TBoundColumn
  46                                         ID="BasicUsernameColumn"
  47                                         HeaderText="Username"
  48                                         DataField="username"
  49                                 />
  50                                 <com:TTemplateColumn
  51                                         ID="BasicDeleteColumn"
  52                                         HeaderText="Delete"
  53                                         ItemStyle.HorizontalAlign="Center"
  54                                 >
  55                                 <prop:ItemTemplate>
  56                                         <com:TActiveLinkButton
  57                                                 Text="Delete"
  58                                                 OnCommand="SourceTemplateControl.deleteBasicItem"
  59                                                 CommandParameter="<%=$this->getParent()->Data['username']%>"
  60                                                 Attributes.onclick="if(!confirm('<%[ Are you sure? ]%>')) return false;"
  61                                         />
  62                                 </prop:ItemTemplate>
  63                                 </com:TTemplateColumn>
  64                         </com:TActiveDataGrid>
  65                 </div>
  66                 <div id="tab3">
  67                         <input type="button" class="bbutton" onclick="$('#<%=$this->NewOAuth2Client->ClientID%>new_auth_client').slideToggle();" value="<%[ New OAuth2 client ]%>" />
  68                         <com:Application.Common.Portlets.NewAuthClient ID="NewOAuth2Client" AuthType="oauth2" OnCallback="loadOAuth2Users" />
  69                         <com:TActiveDataGrid
  70                                 ID="OAuth2ClientList"
  71                                 AutoGenerateColumns="false"
  72                                 CellPadding="2"
  73                                 AlternatingItemStyle.BackColor="#4e4e50"
  74                                 CssClass="tab-grid"
  75                         >
  76                                 <com:TBoundColumn
  77                                         ID="ClientIDColumn"
  78                                         HeaderText="Client ID"
  79                                         DataField="client_id"
  80                                 />
  81                                 <com:TBoundColumn
  82                                         HeaderText="Redirect URI"
  83                                         DataField="redirect_uri"
  84                                 />
  85                                 <com:TBoundColumn
  86                                         HeaderText="Scopes"
  87                                         DataField="scope"
  88                                 />
  89                                 <com:TBoundColumn
  90                                         HeaderText="Bconsole Path"
  91                                         DataField="bconsole_cfg_path"
  92                                 />
  93                                 <com:TTemplateColumn
  94                                         ID="OAuth2DeleteColumn"
  95                                         HeaderText="Delete"
  96                                         ItemStyle.HorizontalAlign="Center"
  97                                 >
  98                                 <prop:ItemTemplate>
  99                                         <com:TActiveLinkButton
 100                                                 Text="Delete"
 101                                                 OnCommand="SourceTemplateControl.deleteOAuth2Item"
 102                                                 CommandParameter="<%=$this->getParent()->Data['client_id']%>"
 103                                                 Attributes.onclick="if(!confirm('<%[ Are you sure? ]%>')) return false;"
 104                                                 Visible="<%=($this->getParent()->Data['client_id'] != $this->getPage()->main_client_id)%>"
 105                                         />
 106                                 </prop:ItemTemplate>
 107                                 </com:TTemplateColumn>
 108                         </com:TActiveDataGrid>
 109                 </div>
 110         </div>
 111         <com:TClientScript>
 112                 var oAPIHome = {
 113                         ids: {
 114                                 section: 'section',
 115                                 command: 'api_command',
 116                                 result: 'api_result',
 117                                 progress_bar: '<%=$this->Progress->ClientID%>',
 118                                 progress_label: 'progress_label',
 119                                 refresh_token: 'api_refresh'
 120                         },
 121                         default_commands: {
 122                                 storages: '/api/storages/',
 123                                 clients: '/api/clients/limit/5/',
 124                                 volumes: '/api/volumes/limit/4/',
 125                                 jobs: '/api/jobs/limit/10/',
 126                                 joblog: '/api/joblog/1/',
 127                                 bvfs: '/api/bvfs/lsdirs/limit/8/'
 128                         },
 129                         token: null,
 130                         baculum_auth: JSON.parse('<%=$this->auth_params%>'),
 131                         init: function() {
 132                                 this.set_events();
 133                                 if (typeof(this.baculum_auth) == 'object') {
 134                                         if (this.baculum_auth.auth_type == 'oauth2') {
 135                                                 this.init_oauth2_client();
 136                                         } else if (this.baculum_auth.auth_type == 'basic') {
 137                                                 this.init_basic();
 138                                         }
 139                                 }
 140                                 this.init_tabs();
 141                         },
 142                         set_progress: function(value, text) {
 143                                 $('#' + this.ids.progress_bar).progressbar('value', value);
 144                                 $('#' + this.ids.progress_label).text(text);
 145                         },
 146                         init_tabs: function() {
 147                                 $('#tabs').tabs({active: 0});
 148                         },
 149                         init_basic: function() {
 150                                 this.set_progress(3, 'Basic auth ready...');
 151                                 document.getElementById(this.ids.refresh_token).style.display = 'none';
 152                         },
 153                         init_oauth2_client: function() {
 154                                 this.set_progress(1, 'Sending auth code request...');
 155                                 var authorization_uri = document.location.origin + '/api/auth';
 156                                 var auth_params = {
 157                                         response_type: 'code',
 158                                         client_id: this.baculum_auth.client_id,
 159                                         redirect_uri: this.baculum_auth.redirect_uri,
 160                                         scope: this.baculum_auth.scope.join(' ')
 161                                 };
 162                                 var uri = authorization_uri + '?' + $.param(auth_params);
 163                                 var xhr = new XMLHttpRequest();
 164                                 xhr.open('GET', uri, true);
 165                                 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 166                                 xhr.onreadystatechange = function() {
 167                                         if (xhr.readyState == 4 && xhr.status == 200) {
 168                                                 var code_regex = /code=([\w]+)$/;
 169                                                 result = xhr.responseURL.match(code_regex);
 170                                                 if (result) {
 171                                                         this.send_token_request(result[1])
 172                                                 }
 173                                         }
 174                                 }.bind(this);
 175                                 xhr.send();
 176                         },
 177                         send_token_request: function(code) {
 178                                 this.set_progress(2, 'Sending token request...');
 179                                 var uri = document.location.origin + '/api/token';
 180                                 var auth_params = {
 181                                         grant_type: 'authorization_code',
 182                                         code: code,
 183                                         client_id: this.baculum_auth.client_id,
 184                                         client_secret: this.baculum_auth.client_secret,
 185                                         redirect_uri: this.baculum_auth.redirect_uri
 186                                 };
 187                                 var request = $.ajax({
 188                                         url: uri,
 189                                         type: 'POST',
 190                                         data: auth_params,
 191                                         dataType: 'json'
 192                                 });
 193                                 request.done(function(data) {
 194                                         if (typeof(data) == 'object' && data.hasOwnProperty('access_token')) {
 195                                                 this.token = data.access_token;
 196                                                 this.set_progress(3, 'Access token: ' + this.token);
 197                                         }
 198                                 }.bind(this));
 199                         },
 200                         set_events: function() {
 201                                 document.getElementById(this.ids.section).addEventListener('change', function(e) {
 202                                         var el = e.srcElement || e.target;
 203                                         this.set_default_command(el.value);
 204                                 }.bind(this));
 205                         },
 206                         set_default_command: function(section) {
 207                                 if (this.default_commands.hasOwnProperty(section)) {
 208                                         document.getElementById(this.ids.command).value = this.default_commands[section];
 209                                 }
 210                         },
 211                         send_request: function() {
 212                                 var url = document.getElementById(this.ids.command).value;
 213                                 var headers = {};
 214                                 if (this.baculum_auth.auth_type == 'oauth2' && this.token) {
 215                                         headers = {'Authorization': 'Bearer ' + this.token};
 216                                 } else if (this.baculum_auth.auth_type == 'basic') {
 217                                         headers = {'Authorization': 'Basic ' + btoa(this.baculum_auth.login + ":" + this.baculum_auth.password)};
 218                                 }
 219                                 var request = $.ajax({
 220                                         url: url,
 221                                         type: 'GET',
 222                                         dataType: 'json',
 223                                         headers: headers
 224                                 });
 225                                 request.done(function(data) {
 226                                         this.show_result(data);
 227                                 }.bind(this));
 228                         },
 229                         show_result: function(data) {
 230                                 document.getElementById(this.ids.result).textContent = JSON.stringify(data, null, 2);
 231                         }
 232                 };
 233                 $(function() {
 234                         oAPIHome.init();
 235                 })
 236         </com:TClientScript>
 237 </com:TContent>