mirror of
https://github.com/fluent/fluentd-ui.git
synced 2026-05-04 18:36:13 +02:00
Move treeview.js under app/javascript/packs
Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto
parent
59dd00aa1c
commit
d27c2488d6
@ -1,97 +0,0 @@
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
$(function(){
|
||||
if($('#treeview').length === 0) return;
|
||||
|
||||
new Vue({
|
||||
el: "#treeview",
|
||||
paramAttributes: ["initialPath"],
|
||||
data: {
|
||||
preview: "",
|
||||
path: "",
|
||||
paths: []
|
||||
},
|
||||
|
||||
compiled: function(){
|
||||
this.path = this.initialPath;
|
||||
this.fetchTree();
|
||||
this.$watch("path", this.fetchTree);
|
||||
this.$watch("path", this.fetchPreview);
|
||||
},
|
||||
|
||||
computed: {
|
||||
selected: function(){
|
||||
var self = this;
|
||||
return _.find(this.paths, function(path){
|
||||
return self.path == path.path;
|
||||
});
|
||||
},
|
||||
selectedIsDir: function() {
|
||||
if(!this.selected) return true;
|
||||
return this.selected.is_dir;
|
||||
},
|
||||
currentDirs: function() {
|
||||
if(this.path === "/") {
|
||||
return ["/"];
|
||||
}
|
||||
|
||||
var path = this.path;
|
||||
if(this.selected && !this.selected.is_dir) {
|
||||
path = path.replace(/\/[^/]+$/, "");
|
||||
}
|
||||
var root = "/";
|
||||
var dirs = [];
|
||||
path.split("/").forEach(function(dir) {
|
||||
dirs.push(root + dir);
|
||||
if(dir) {
|
||||
root = root + dir + "/";
|
||||
}
|
||||
});
|
||||
return dirs;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
isAncestor: function(target) {
|
||||
return this.path.indexOf(target) === 0;
|
||||
},
|
||||
basename: function(path) {
|
||||
if (path === "/") return "/";
|
||||
return path.match(/[^/]+$/)[0];
|
||||
},
|
||||
fetchTree: function() {
|
||||
var self = this;
|
||||
return new Promise(function(resolve, reject) {
|
||||
$.getJSON("/api/tree?path=" + self.path, resolve).fail(reject);
|
||||
}).then(function(paths){
|
||||
self.paths = paths;
|
||||
});
|
||||
},
|
||||
fetchPreview: function(){
|
||||
if(!this.selected) return ;
|
||||
var self = this;
|
||||
this.preview = "";
|
||||
new Promise(function(resolve, reject) {
|
||||
$.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
|
||||
}).catch(function(e){
|
||||
console.error(e);
|
||||
}).then(function(lines){
|
||||
self.preview = lines.join("\n");
|
||||
});
|
||||
},
|
||||
|
||||
selectPath: function(path){
|
||||
this.path = path;
|
||||
},
|
||||
isSuffixRequired: function(data){
|
||||
return data.is_dir && data.path != "/";
|
||||
},
|
||||
isSelected: function(path){
|
||||
return this.path == path;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
99
app/javascript/packs/treeview.js
Normal file
99
app/javascript/packs/treeview.js
Normal file
@ -0,0 +1,99 @@
|
||||
'use strict';
|
||||
import 'lodash/lodash';
|
||||
$(document).ready(() => {
|
||||
new Vue({
|
||||
el: "#treeview",
|
||||
props: {
|
||||
initialPath: {
|
||||
default: "/var/log",
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data: {
|
||||
preview: "",
|
||||
path: "",
|
||||
paths: []
|
||||
},
|
||||
|
||||
mounted: function(){
|
||||
console.log(this.initialPath);
|
||||
this.path = this.initialPath;
|
||||
this.fetchTree();
|
||||
this.$watch("path", this.fetchTree);
|
||||
this.$watch("path", this.fetchPreview);
|
||||
},
|
||||
|
||||
computed: {
|
||||
selected: function(){
|
||||
var self = this;
|
||||
return _.find(this.paths, function(path){
|
||||
return self.path == path.path;
|
||||
});
|
||||
},
|
||||
selectedIsDir: function() {
|
||||
if(!this.selected) return true;
|
||||
return this.selected.is_dir;
|
||||
},
|
||||
currentDirs: function() {
|
||||
if(this.path === "/") {
|
||||
return ["/"];
|
||||
}
|
||||
|
||||
var path = this.path;
|
||||
if(this.selected && !this.selected.is_dir) {
|
||||
path = path.replace(/\/[^/]+$/, "");
|
||||
}
|
||||
var root = "/";
|
||||
var dirs = [];
|
||||
path.split("/").forEach(function(dir) {
|
||||
dirs.push(root + dir);
|
||||
if(dir) {
|
||||
root = root + dir + "/";
|
||||
}
|
||||
});
|
||||
return dirs;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
isAncestor: function(target) {
|
||||
return this.path.indexOf(target) === 0;
|
||||
},
|
||||
basename: function(path) {
|
||||
if (path === "/") return "/";
|
||||
return path.match(/[^/]+$/)[0];
|
||||
},
|
||||
fetchTree: function() {
|
||||
var self = this;
|
||||
return new Promise(function(resolve, reject) {
|
||||
$.getJSON("/api/tree?path=" + self.path, resolve).fail(reject);
|
||||
}).then(function(paths){
|
||||
console.log(paths);
|
||||
self.paths = paths;
|
||||
});
|
||||
},
|
||||
fetchPreview: function(){
|
||||
if(!this.selected) return ;
|
||||
var self = this;
|
||||
this.preview = "";
|
||||
new Promise(function(resolve, reject) {
|
||||
$.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
|
||||
}).catch(function(e){
|
||||
console.error(e);
|
||||
}).then(function(lines){
|
||||
self.preview = lines.join("\n");
|
||||
});
|
||||
},
|
||||
|
||||
selectPath: function(path){
|
||||
this.path = path;
|
||||
},
|
||||
isSuffixRequired: function(data){
|
||||
return data.is_dir && data.path != "/";
|
||||
},
|
||||
isSelected: function(path){
|
||||
return this.path == path;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,30 +1,31 @@
|
||||
<% add_javascript_pack_tag("treeview") %>
|
||||
<% name ||= "" %>
|
||||
<% action ||= "" %>
|
||||
<% submit_button ||= "" %>
|
||||
<%= form_tag(action, method: :post) do %>
|
||||
<div id="treeview" initialPath="/var/log">
|
||||
<pre>{{ path }}</pre>
|
||||
<div id="treeview">
|
||||
<pre class="card-body">{{ path }}</pre>
|
||||
<input type="hidden" name="<%= name %>" v-model="path" />
|
||||
<div class="dirs">
|
||||
<span v-repeat="currentDirs">
|
||||
<span v-if="$index > 0">
|
||||
<span v-for="(dir, index) in currentDirs">
|
||||
<span v-if="index > 0">
|
||||
<%= icon('fa-caret-right') %>
|
||||
</span>
|
||||
<span v-on="click: selectPath($value)" class="dir">{{ basename($value) }}</span>
|
||||
<span v-on:click="selectPath(dir)" class="dir">{{ basename(dir) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<span v-on="click: selectPath(path)" class="vue-path" v-class="selected: isSelected(path)" v-repeat="paths">
|
||||
<span v-if="is_dir"><%= icon("fa-folder") %></span>
|
||||
<span v-if="!is_dir"><%= icon("fa-file-o") %></span>
|
||||
{{ basename(path) }}
|
||||
<span v-on:click="selectPath(value.path)" class="vue-path" v-bind:class="{ selected: isSelected(value.path) }" v-for="value in paths">
|
||||
<span v-if="value.is_dir"><%= icon("fa-folder") %></span>
|
||||
<span v-if="!value.is_dir"><%= icon("fa-file-o") %></span>
|
||||
{{ basename(value.path) }}
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<pre v-if="preview" class="preview">{{ preview }}</pre>
|
||||
<p>
|
||||
<%= submit_tag submit_button, class: "btn btn-lg btn-primary pull-right", "v-attr" => "disabled: selectedIsDir", "v-class" => "btn-disable: selectedIsDir" %>
|
||||
<%= submit_tag submit_button, class: "btn btn-lg btn-primary pull-right", "v-bind:disabled" => "selectedIsDir" %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user