Browse Source

HUE-8298 [kafka] Add UI prototype to configure Flume channel with source and sink

Romain Rigaux 7 years ago
parent
commit
8468783149
1 changed files with 78 additions and 3 deletions
  1. 78 3
      desktop/libs/indexer/src/indexer/templates/topics.mako

+ 78 - 3
desktop/libs/indexer/src/indexer/templates/topics.mako

@@ -238,12 +238,22 @@ ${ assist.assistPanel() }
 
 
 <script type="text/html" id="list-index">
+  <!-- ko if: channelSourceType() -->
+    Used to populate <span data-bind="text: channelSinkType"></span> <span data-bind="text: channelSinkPath"></span>
+    from <span data-bind="text: channelSourceType"></span> <span data-bind="text: channelSourcePath"></span>
+    via <a href="" data-bind="click: function() { huePubSub.publish('toggle.jobs.panel'); }">jobs <i class="fa fa-external-link"></i></a>
+  <!-- /ko -->
+  <br/>
+  <br/>
+
   <ul class="nav nav-tabs nav-tabs-border">
     <li class="active"><a href="#index-overview" data-toggle="tab" data-bind="click: function(){ $root.tab('index-overview'); }">${_('Overview')}</a></li>
     <li><a href="#index-columns" data-toggle="tab" data-bind="click: function(){ $root.tab('index-columns'); }">${_('Partitions')} (<span data-bind="text: fields().length"></span>)</a></li>
-    <li><a href="#index-sample" data-toggle="tab" data-bind="click: function(){ $root.tab('index-sample'); }">${_('Sample')} (<span data-bind="text: sample().length"></span>)</a></li>
-    <li><a href="#index-sample" data-toggle="tab" data-bind="click: function(){ $root.tab('index-sample'); }">
-      ${_('Permissions')} (2)</a>
+    <li>
+      <a href="#index-channel" data-toggle="tab" data-bind="click: function(){ $root.tab('index-channel'); }">${_('Channel')} (<span data-bind="text: channelSourceType() ? 1 : 0"></span>)</a>
+    </li>
+    <li>
+      <a href="#index-sample" data-toggle="tab" data-bind="click: function(){ $root.tab('index-sample'); }">${_('Permissions')} (2)</a>
     </li>
   </ul>
 
@@ -287,7 +297,54 @@ ${ assist.assistPanel() }
             <i class="fa fa-long-arrow-right"></i> action=<span>WRITE</span>
           </div>
         </div>
+      </div>
     </div>
+
+    <div class="tab-pane margin-top-10" id="index-channel">
+      <h4>${ _('Source') }</h4>
+      <div class="row-fluid">
+        <div>
+          <label class="control-label"><div>${ _('Type') }</div>
+            <select class="input-medium" data-bind="selectize: channelSourceTypes, value: channelSourceType, optionsText: 'name', optionsValue: 'value'"></select>
+          </label>
+          <!-- ko if: ['directory', 'exec', 'syslogs'].indexOf(channelSourceType()) != -1 -->
+          <label class="control-label"><div>${ _('Hosts') }</div>
+            <select class="input-xxlarge" data-bind="selectize: channelSourceHosts, selectedOptions: channelSourceSelectedHosts" multiple="true"></select>
+          </label>
+          <!-- /ko -->
+          <!-- ko if: channelSourceType() == 'directory' -->
+          <label class="control-label"><div>${ _('Path') }</div>
+            <input type="text" class="input-xxlarge" data-bind="value: channelSourcePath" placeholder="${ _('The path to watch and consume') }">
+          </label>
+          <!-- /ko -->
+
+          <!-- ko if: channelSourceType() -->
+          <input data-bind="click: function() { channelSourceType(null); }" class="btn" value="${ _('Clear') }"/>
+          <!-- /ko -->
+        </div>
+      </div>
+
+      <br><br>
+
+      <h4>${ _('Sink') }</h4>
+      <div class="row-fluid">
+        <div>
+          <label class="control-label"><div>${ _('Type') }</div>
+            <select class="input-medium" data-bind="selectize: channelSinkTypes, value: channelSinkType, optionsText: 'name', optionsValue: 'value'"></select>
+          </label>
+          <!-- ko if: channelSinkType() == 'solr' -->
+          <label class="control-label"><div>${ _('Collection') }</div>
+            <select class="input-xxlarge" data-bind="selectize: ['logIndex', 'apacheLogs'], value: channelSinkPath"></select>
+          </label>
+          <!-- /ko -->
+
+          <!-- ko if: channelSinkType() -->
+          <input data-bind="click: function() { channelSourceType(null); }" class="btn" value="${ _('Clear') }"/>
+          <!-- /ko -->
+        </div>
+      </div>
+    </div>
+
   </div>
 </script>
 
@@ -497,6 +554,24 @@ ${ assist.assistPanel() }
         $.totalStorage(userPrefix + '_kafka_topics_' + self.name() + '_kafkaFieldTypes', newValue)
       });
 
+      self.channelSourceTypes = ko.observableArray([
+        {'name': '${ _("Directory or File") }', 'value': 'directory'},
+        {'name': '${ _("Program") }', 'value': 'exec'},
+        {'name': '${ _("Syslogs") }', 'value': 'syslogs'},
+        {'name': '${ _("HTTP") }', 'value': 'http'}
+      ]);
+      self.channelSourceType = ko.observable();
+      self.channelSourceHosts = ko.observableArray(['host1.com', 'host2.com', 'host3.com', 'host4.com']);
+      self.channelSourceSelectedHosts = ko.observableArray([]);
+      self.channelSourcePath = ko.observable('/var/log/hue/access.log');
+
+      self.channelSinkTypes = ko.observableArray([
+        {'name': '${ _("This topic") }', 'value': 'kafka'},
+        {'name': '${ _("Solr") }', 'value': 'solr'}
+      ]);
+      self.channelSinkType = ko.observable();
+      self.channelSinkPath = ko.observable();
+
       self.sample = ko.observableArray();
       self.samplePreview = ko.pureComputed(function () {
         return self.sample().slice(0, 5)