Testing the activity tab

app/views/console/database/collection.phtml

@@ -265,7 +265,7 @@
                                 </td>
 
                                 <td data-title="Attributes:">
-                                    <span class="text-size-small" data-ls-bind="{{index.attributes}}"></span>
+                                    <span class="text-size-small" data-ls-bind="{{index|indexAttributes}}"></span>xxx1
                                 </td>
 
                                 <td data-title="">
@@ -337,6 +337,44 @@
 
                 <button class="new-index">Add Index</button>
             </li>
+            <li data-state="/console/database/collection/activity?id={{router.params.id}}&project={{router.params.project}}">
+                <h2>Activity <span class="badge" data-ls-bind="1"></span></h2>
+
+                <div
+                    data-service="account.getLogs"
+                    data-scope="console"
+                    data-name="securityLogs"
+                    data-event="load">
+
+                    <div class="box">
+                        <table class="vertical small">
+                            <thead>
+                                <tr>
+                                    <th width="140">Date</th>
+                                    <th width="120">User</th>
+                                    <th>Event</th>
+                                    <th width="90">Location</th>
+                                    <th width="90">IP</th>
+                                </tr>
+                            </thead>
+                            <tbody data-ls-loop="securityLogs.logs" data-ls-as="log">
+                                <tr>
+                                    <td data-title="Date: "><span data-ls-bind="{{log.time|dateTime}}"></span></td>
+                                    <td data-title="User: ">
+                                        <span data-ls-bind="{{log.userId}}"></span>
+                                    </td>
+                                    <td data-title="Event: "><span data-ls-bind="{{log.event}}"></span></td>
+                                    <td data-title="Location: ">
+                                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{log.countryCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs inline margin-end-small" />
+                                        <span data-ls-bind="{{log.geo.countryName}}"></span>
+                                    </td>
+                                    <td data-title="IP: "><span data-ls-bind="{{log.ip}}"></span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </li>
             <li data-state="/console/database/collection/settings?id={{router.params.id}}&project={{router.params.project}}">
                 <h2>Settings</h2>
 

public/dist/scripts/app-all.js

@@ -2308,7 +2308,8 @@ return $value;}).add("platformsLimit",function($value){return $value;}).add("lim
 return $value.join(", ").replace(/,\s([^,]+)$/,' and $1');}).add("runtimeName",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].name;}
 return'';}).add("runtimeLogo",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].logo;}
 return'';}).add("runtimeVersion",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].version;}
-return'';});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
+return'';}).add("indexAttributes",function($value){let output='';for(let i=0;i<$value.attributes.length;i++){output+=$value.attributes[i]+' ('+$value.orders[i]+'), '}
+return output.slice(0,-2);});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
 let abbr;if(number>=1e12){abbr="T";}else if(number>=1e9){abbr="B";}else if(number>=1e6){abbr="M";}else if(number>=1e3){abbr="K";}else{abbr="";}
 return annotate(number,maxPlaces,forcePlaces,abbr);}
 function annotate(number,maxPlaces,forcePlaces,abbr){let rounded=0;switch(abbr){case"T":rounded=number/1e12;break;case"B":rounded=number/1e9;break;case"M":rounded=number/1e6;break;case"K":rounded=number/1e3;break;case"":rounded=number;break;}
@@ -2459,12 +2460,12 @@ if(buttonSelector){let buttonElements=element.querySelectorAll(buttonSelector);b
 element.addEventListener('click',function(event){let targetA=findParent('a',event.target);let targetB=findParent('button',event.target);if(!targetA&&!targetB){return false;}
 if(targetA&&!targetA.href){return false;}
 if(targetB&&!targetB.classList.contains('link')){return false;}
-closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-phases",controller:function(element,window,document,expression,router){var tabs=document.createElement("ul");var container=document.createElement("div");var titles=Array.prototype.slice.call(element.querySelectorAll("li > h1"));var next=Array.prototype.slice.call(element.querySelectorAll("[data-next]"));var previous=Array.prototype.slice.call(element.querySelectorAll("[data-previous]"));var position=0;var init=false;if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h2"));}
+closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-phases",controller:function(element,window,document,expression,router,view){var tabs=document.createElement("ul");var container=document.createElement("div");var titles=Array.prototype.slice.call(element.querySelectorAll("li > h1"));var next=Array.prototype.slice.call(element.querySelectorAll("[data-next]"));var previous=Array.prototype.slice.call(element.querySelectorAll("[data-previous]"));var position=0;var init=false;if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h2"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h3"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h4"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h5"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h6"));}
 for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset["state"]||"");if(tabState&&tabState===(window.location.pathname+window.location.search).substring(0,tabState.length)){position=i;}}
 var setTab=function(index){var tabState=expression.parse(element.children[index].dataset["state"]||"");var url="";if(tabState!==""&&tabState!==window.location.pathname+window.location.search){var parser=document.createElement("a");parser.href=tabState;url=!init?parser.pathname+window.location.search:tabState;if(position!=index){window.history.pushState({},"",url);router.reset();}}
-element.children[position].classList.remove("selected");element.children[index].classList.add("selected");tabs.children[position].classList.remove("selected");tabs.children[index].classList.add("selected");position=index;document.dispatchEvent(new CustomEvent("tab-changed"));init=true;};tabs.classList.add("tabs");container.classList.add("container");container.classList.add("close");container.dataset["lsUiOpen"]="";container.dataset["buttonClass"]="icon icon-down-dir";titles.map(function(obj,i){var title=document.createElement("li");title.innerHTML=obj.innerHTML;title.className=obj.className;title.tabIndex=0;tabs.appendChild(title);title.addEventListener("click",function(){setTab(i);});title.addEventListener("keyup",function(){if(event.which===13){setTab(i);}});});next.map(function(obj){obj.addEventListener("click",function(){setTab(position+1);});});previous.map(function(obj){obj.addEventListener("click",function(){setTab(position-1);});});setTab(position);container.appendChild(tabs);element.parentNode.insertBefore(container,element);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-trigger",controller:function(element,document,expression){let trigger=expression.parse(element.dataset["lsUiTrigger"]||'').trim().split(',');let event=expression.parse(element.dataset["event"]||'click');let debug=element.getAttribute('data-debug')||false;for(let index=0;index<trigger.length;index++){let name=trigger[index];element.addEventListener(event,function(){if(debug){console.log('Debug: event triggered: '+name);}
+element.children[position].classList.remove("selected");element.children[index].classList.add("selected");tabs.children[position].classList.remove("selected");tabs.children[index].classList.add("selected");position=index;document.dispatchEvent(new CustomEvent("tab-changed"));init=true;};tabs.classList.add("tabs");container.classList.add("container");container.classList.add("close");container.dataset["lsUiOpen"]="";container.dataset["buttonClass"]="icon icon-down-dir";titles.map(function(obj,i){var title=document.createElement("li");title.innerHTML=obj.innerHTML;title.className=obj.className;title.tabIndex=0;tabs.appendChild(title);title.addEventListener("click",function(){setTab(i);});title.addEventListener("keyup",function(){if(event.which===13){setTab(i);}});view.render(title);});next.map(function(obj){obj.addEventListener("click",function(){setTab(position+1);});});previous.map(function(obj){obj.addEventListener("click",function(){setTab(position-1);});});setTab(position);container.appendChild(tabs);element.parentNode.insertBefore(container,element);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-trigger",controller:function(element,document,expression){let trigger=expression.parse(element.dataset["lsUiTrigger"]||'').trim().split(',');let event=expression.parse(element.dataset["event"]||'click');let debug=element.getAttribute('data-debug')||false;for(let index=0;index<trigger.length;index++){let name=trigger[index];element.addEventListener(event,function(){if(debug){console.log('Debug: event triggered: '+name);}
 document.dispatchEvent(new CustomEvent(name));});}}});})(window);

public/dist/scripts/app.js

@@ -292,7 +292,8 @@ return $value;}).add("platformsLimit",function($value){return $value;}).add("lim
 return $value.join(", ").replace(/,\s([^,]+)$/,' and $1');}).add("runtimeName",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].name;}
 return'';}).add("runtimeLogo",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].logo;}
 return'';}).add("runtimeVersion",function($value,env){if(env&&env.RUNTIMES&&env.RUNTIMES[$value]){return env.RUNTIMES[$value].version;}
-return'';});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
+return'';}).add("indexAttributes",function($value){let output='';for(let i=0;i<$value.attributes.length;i++){output+=$value.attributes[i]+' ('+$value.orders[i]+'), '}
+return output.slice(0,-2);});function abbreviate(number,maxPlaces,forcePlaces,forceLetter){number=Number(number);forceLetter=forceLetter||false;if(forceLetter!==false){return annotate(number,maxPlaces,forcePlaces,forceLetter);}
 let abbr;if(number>=1e12){abbr="T";}else if(number>=1e9){abbr="B";}else if(number>=1e6){abbr="M";}else if(number>=1e3){abbr="K";}else{abbr="";}
 return annotate(number,maxPlaces,forcePlaces,abbr);}
 function annotate(number,maxPlaces,forcePlaces,abbr){let rounded=0;switch(abbr){case"T":rounded=number/1e12;break;case"B":rounded=number/1e9;break;case"M":rounded=number/1e6;break;case"K":rounded=number/1e3;break;case"":rounded=number;break;}
@@ -443,12 +444,12 @@ if(buttonSelector){let buttonElements=element.querySelectorAll(buttonSelector);b
 element.addEventListener('click',function(event){let targetA=findParent('a',event.target);let targetB=findParent('button',event.target);if(!targetA&&!targetB){return false;}
 if(targetA&&!targetA.href){return false;}
 if(targetB&&!targetB.classList.contains('link')){return false;}
-closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-phases",controller:function(element,window,document,expression,router){var tabs=document.createElement("ul");var container=document.createElement("div");var titles=Array.prototype.slice.call(element.querySelectorAll("li > h1"));var next=Array.prototype.slice.call(element.querySelectorAll("[data-next]"));var previous=Array.prototype.slice.call(element.querySelectorAll("[data-previous]"));var position=0;var init=false;if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h2"));}
+closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-phases",controller:function(element,window,document,expression,router,view){var tabs=document.createElement("ul");var container=document.createElement("div");var titles=Array.prototype.slice.call(element.querySelectorAll("li > h1"));var next=Array.prototype.slice.call(element.querySelectorAll("[data-next]"));var previous=Array.prototype.slice.call(element.querySelectorAll("[data-previous]"));var position=0;var init=false;if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h2"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h3"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h4"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h5"));}
 if(titles.length===0){titles=Array.prototype.slice.call(element.querySelectorAll("li > h6"));}
 for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset["state"]||"");if(tabState&&tabState===(window.location.pathname+window.location.search).substring(0,tabState.length)){position=i;}}
 var setTab=function(index){var tabState=expression.parse(element.children[index].dataset["state"]||"");var url="";if(tabState!==""&&tabState!==window.location.pathname+window.location.search){var parser=document.createElement("a");parser.href=tabState;url=!init?parser.pathname+window.location.search:tabState;if(position!=index){window.history.pushState({},"",url);router.reset();}}
-element.children[position].classList.remove("selected");element.children[index].classList.add("selected");tabs.children[position].classList.remove("selected");tabs.children[index].classList.add("selected");position=index;document.dispatchEvent(new CustomEvent("tab-changed"));init=true;};tabs.classList.add("tabs");container.classList.add("container");container.classList.add("close");container.dataset["lsUiOpen"]="";container.dataset["buttonClass"]="icon icon-down-dir";titles.map(function(obj,i){var title=document.createElement("li");title.innerHTML=obj.innerHTML;title.className=obj.className;title.tabIndex=0;tabs.appendChild(title);title.addEventListener("click",function(){setTab(i);});title.addEventListener("keyup",function(){if(event.which===13){setTab(i);}});});next.map(function(obj){obj.addEventListener("click",function(){setTab(position+1);});});previous.map(function(obj){obj.addEventListener("click",function(){setTab(position-1);});});setTab(position);container.appendChild(tabs);element.parentNode.insertBefore(container,element);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-trigger",controller:function(element,document,expression){let trigger=expression.parse(element.dataset["lsUiTrigger"]||'').trim().split(',');let event=expression.parse(element.dataset["event"]||'click');let debug=element.getAttribute('data-debug')||false;for(let index=0;index<trigger.length;index++){let name=trigger[index];element.addEventListener(event,function(){if(debug){console.log('Debug: event triggered: '+name);}
+element.children[position].classList.remove("selected");element.children[index].classList.add("selected");tabs.children[position].classList.remove("selected");tabs.children[index].classList.add("selected");position=index;document.dispatchEvent(new CustomEvent("tab-changed"));init=true;};tabs.classList.add("tabs");container.classList.add("container");container.classList.add("close");container.dataset["lsUiOpen"]="";container.dataset["buttonClass"]="icon icon-down-dir";titles.map(function(obj,i){var title=document.createElement("li");title.innerHTML=obj.innerHTML;title.className=obj.className;title.tabIndex=0;tabs.appendChild(title);title.addEventListener("click",function(){setTab(i);});title.addEventListener("keyup",function(){if(event.which===13){setTab(i);}});view.render(title);});next.map(function(obj){obj.addEventListener("click",function(){setTab(position+1);});});previous.map(function(obj){obj.addEventListener("click",function(){setTab(position-1);});});setTab(position);container.appendChild(tabs);element.parentNode.insertBefore(container,element);}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-trigger",controller:function(element,document,expression){let trigger=expression.parse(element.dataset["lsUiTrigger"]||'').trim().split(',');let event=expression.parse(element.dataset["event"]||'click');let debug=element.getAttribute('data-debug')||false;for(let index=0;index<trigger.length;index++){let name=trigger[index];element.addEventListener(event,function(){if(debug){console.log('Debug: event triggered: '+name);}
 document.dispatchEvent(new CustomEvent(name));});}}});})(window);

public/scripts/filters.js

@@ -255,6 +255,14 @@ window.ls.filter
 
     return '';
   })
+  .add("indexAttributes", function($value) {
+    let output = '';
+
+    for(let i = 0; i < $value.attributes.length; i++) {
+      output += $value.attributes[i] + ' (' + $value.orders[i] + '), '
+    }
+    return output.slice(0, -2);
+  })
 ;
 
 function abbreviate(number, maxPlaces, forcePlaces, forceLetter) {

public/scripts/views/ui/phases.js

@@ -1,7 +1,7 @@
 (function(window) {
   window.ls.container.get("view").add({
     selector: "data-ui-phases",
-    controller: function(element, window, document, expression, router) {
+    controller: function(element, window, document, expression, router, view) {
       var tabs = document.createElement("ul");
       var container = document.createElement("div");
       var titles = Array.prototype.slice.call(
@@ -111,6 +111,8 @@
             setTab(i);
           }
         });
+
+        view.render(title);
       });
 
       next.map(function(obj) {

public/styles/comps/tabs.less

@@ -8,6 +8,10 @@
   li {
     display: none;
 
+    .badge {
+      display: none;
+    }
+
     li {
       display: block;
     }
@@ -45,10 +49,31 @@
     -ms-user-select: none;
     user-select: none;
 
+    li {
+      position: relative;
+    }
+
+    .badge {
+        background: #f02d65;
+        color: white;
+        display: inline-block;
+        border-radius: 15px;
+        width: 15px;
+        height: 15px;
+        margin: 10px;
+        line-height: 15px;
+        padding: 3px;
+        text-align: center;
+        font-weight: 600!important;
+        position: absolute;
+        top: -5px;
+        right: -35px;
+        font-size: 13px;
+    }
+
     .selected {
       font-weight: 400;
       color: var(--config-color-focus);
-      position: relative;
       opacity: 1;
 
       &:after {