Merge pull request #162 from razee-io/hist_dropdown

Hist dropdown
razee-io · Nov 13, 2019 · e339177 · e339177
2 parents a137a62 + 5308620
commit e339177
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 10 deletions.
diff --git a/imports/ui/components/cluster/resources/component.html b/imports/ui/components/cluster/resources/component.html
@@ -58,7 +58,7 @@
     </td>
     <td>{{> commitLink }}</td>
     <td>
-      {{> history_dropdown _lastUpdated=(lastUpdated resource) }}
+      {{> history_dropdown _lastUpdated=(lastUpdated resource) resource=resource histChangeObjs=(histChangeObjs resource) }}
     </td>
 
   </tr>

diff --git a/imports/ui/components/cluster/resources/index.js b/imports/ui/components/cluster/resources/index.js
@@ -23,6 +23,7 @@ import { Resources } from '/imports/api/resource/resources.js';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
+import _ from 'lodash';
 
 Template.deployments.helpers({
     resources() {
@@ -49,5 +50,31 @@ Template.deploymenttemplate.helpers({
         return {
             selfLink: resource.selfLink,
         };
-    }
+    },
+    lastUpdated(resource){
+        var commitShaHistObjs = _.get(resource, 'searchableDataHist.razeeCommitSha', []);
+        var lastUpdated = _.get(commitShaHistObjs, '[0].timestamp');
+        return lastUpdated;
+    },
+    histChangeObjs(resource){
+        var commitShaHistObjs = _.get(resource, 'searchableDataHist.razeeCommitSha', []);
+        var histChangeObjs = _.map(commitShaHistObjs, (commitShaHistObj, idx)=>{
+            var fromCommit = _.get(commitShaHistObjs, `[${idx - 1}].val`, null);
+            var toCommit = _.get(commitShaHistObj, 'val', null);
+            var timestamp = _.get(commitShaHistObj, 'timestamp', null);
+            if(fromCommit && fromCommit.match(/^[0-9a-f]{32,40}$/i)){
+                fromCommit = fromCommit.slice(0,8);
+            }
+            if(toCommit && toCommit.match(/^[0-9a-f]{32,40}$/i)){
+                toCommit = toCommit.slice(0,8);
+            }
+            return {
+                fromCommit,
+                toCommit,
+                timestamp,
+            };
+        });
+        histChangeObjs = _.sortBy(histChangeObjs, 'timestamp').reverse();
+        return histChangeObjs;
+    },
 });
diff --git a/imports/ui/components/commitLink/component.html b/imports/ui/components/commitLink/component.html
@@ -16,6 +16,10 @@
 
 <template name="commitLink">
     {{#if gitData}}
-        <a href="{{gitData.link}}" target="_blank">{{gitData.text}} <i class="fa fa-external-link"></i></a> 
+        <a href="{{gitData.link}}" target="_blank">{{gitData.text}}
+            {{#unless hideIcon}}
+                <span class="fa fa-external-link"></span>
+            {{/unless}}
+        </a>
     {{/if}}
 </template>
diff --git a/imports/ui/components/commitLink/index.js b/imports/ui/components/commitLink/index.js
@@ -29,7 +29,6 @@ Template.commitLink.helpers({
             for (const key in resourceData) {
                 if(key === 'annotations_razee_io_commit_sha' || key === 'annotations["razee_io_commit_sha"]') {
                     commitSHA = resourceData[key];
-                    trimmedSHA = Blaze._globalHelpers.trimCommit(commitSHA);
                 }
                 if(key === 'annotations_razee_io_git_repo' || key === 'annotations["razee_io_git_repo"]') {
                     gitRepo = resourceData[key];
@@ -38,6 +37,12 @@ Template.commitLink.helpers({
                     otherRepo = resourceData[key];
                 }
             }
+            if(this.commitSha){
+                commitSHA = this.commitSha;
+            }
+            if(commitSHA){
+                trimmedSHA = Blaze._globalHelpers.trimCommit(commitSHA);
+            }
             // razee.io/git-repo
             if(gitRepo) {
                 return {

diff --git a/imports/ui/components/historyDropdown/component.html b/imports/ui/components/historyDropdown/component.html
@@ -15,7 +15,24 @@
 -->
 
 <template name="history_dropdown">
-  <div class="dropdown">
-      {{moment (_lastUpdated)}}
-  </div>
+    <div class="dropdown">
+        <a href="#" id="dropdownHistoryButton" data-toggle="dropdown" data-boundary="window">
+            {{moment (_lastUpdated)}}
+        </a>
+
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownHistoryButton">
+            {{#each histChangeObj in histChangeObjs}}
+                <h6 class="dropdown-header">
+                    <a href="{{pathFor 'cluster.resource' clusterId=resource.cluster_id query=resourcePathQueryObj }}#hist={{histChangeObj.timestamp}}">
+                        {{or (histChangeObj.fromCommit) '--------'}}
+                        ➟
+                        {{or (histChangeObj.toCommit) '--------'}}
+                    </a>
+                    <span class="text-muted" data-toggle="tooltip" data-placement="top" title="{{localeDate (timestampToDateObj histChangeObj.timestamp)}}">
+                        {{moment histChangeObj.timestamp}}
+                    </span>
+                </h6>
+            {{/each}}
+        </div>
+    </div>
 </template>
diff --git a/imports/ui/components/historyDropdown/index.js b/imports/ui/components/historyDropdown/index.js
@@ -51,4 +51,10 @@ Template.history_dropdown.helpers({
             }
         }
     },
+    resourcePathQueryObj(){
+        return { selfLink: this.resource.selfLink };
+    },
+    timestampToDateObj(timestamp){
+        return new Date(timestamp);
+    },
 });
diff --git a/imports/ui/pages/cluster/page.html b/imports/ui/pages/cluster/page.html
@@ -16,7 +16,7 @@
 
 <template name="cluster">
   <div class="accordion mb-2">
-    <div class="card border-bottom">
+    <div class="card border-bottom" style="overflow:visible !important;">
       <div id="{{getClusterName cluster}}" class="card-header">
         <div class="d-flex w-100 justify-content-between">
           <h4 class="text-muted m-0">

diff --git a/imports/ui/pages/resources/resourcesSingle.jsx b/imports/ui/pages/resources/resourcesSingle.jsx
@@ -1,5 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { withTracker } from 'meteor/react-meteor-data';
 import _ from 'lodash';
 import { Resources } from '../../../api/resource/resources';
@@ -67,16 +68,43 @@ export class ResourceHistDiff extends React.Component{
 
 export class ResourceYamlDisplay extends React.Component{
     componentWillMount(){
+        var updateTime = _.get(window.location.hash.match(/hist=([0-9]+)/), '[1]', null);
+        if(updateTime){
+            updateTime = parseInt(updateTime);
+        }
+
         this.renderDropdown = this.renderDropdown.bind(this);
         this.switchToUpdateTime = this.switchToUpdateTime.bind(this);
+        this.jumpToHistIfRequired = this.jumpToHistIfRequired.bind(this);
 
         this.setState({
             loading: true,
         });
-        this.switchToUpdateTime(null);
+        this.switchToUpdateTime(updateTime);
+    }
+
+    jumpToHistIfRequired(){
+        if(window.location.hash.match(/hist=([0-9]+)/)){
+            ReactDOM.findDOMNode(this).scrollIntoView();
+        }
+    }
+
+    componentDidMount(){
+        this.jumpToHistIfRequired();
     }
 
     switchToUpdateTime(timestamp){
+        var findClosestYamlUpdateTimestamp = (timestamp)=>{
+            if(!timestamp){
+                return null;
+            }
+            var sortedResourceYamlHistItems = _.sortBy(this.props.resourceYamlHistItems, (resourceYamlHistItem)=>{
+                return Math.abs(timestamp - resourceYamlHistItem.updated);
+            });
+            return _.get(sortedResourceYamlHistItems, `0.updated`, null);
+        };
+        timestamp = findClosestYamlUpdateTimestamp(timestamp) || timestamp;
+        timestamp = timestamp - 0;
         this.setState({
             updatedTime: timestamp,
             loading: true,
@@ -140,7 +168,7 @@ export class ResourceYamlDisplay extends React.Component{
             newYamlObj = JSON.parse(newYamlStr);
         });
         return (
-            <div className="card mt-0">
+            <div className="card mt-0" id="hist">
                 <h4 className="card-header text-muted d-flex align-items-center">
                     <div className="mr-3">
                         Resource