mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
cleaning-up renderer/_vue, moi-moi vue.js
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman
parent
ec095cac8e
commit
cf5b3b4ea6
@ -1,141 +0,0 @@
|
||||
<template>
|
||||
<div class="settings-section">
|
||||
<b>Metrics</b>
|
||||
<p class="description">
|
||||
Enable timeseries data visualization (Prometheus stack) for your cluster. Install this only if you don't have existing Prometheus stack installed. You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/src/features/metrics">here</a>.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<b-button @click="install" v-if="!settings.installed" :disabled="!cluster.isAdmin || isProcessing || !canInstall" variant="primary">
|
||||
<b-spinner small v-if="isProcessing" label="Small Spinner" />
|
||||
Install
|
||||
</b-button>
|
||||
<b-button @click="upgrade" v-if="isUpgradeAvailable" :disabled="!cluster.isAdmin || isProcessing || isUpgrading" variant="primary">
|
||||
<b-spinner small v-if="isUpgrading" label="Small Spinner" />
|
||||
Upgrade
|
||||
</b-button>
|
||||
<b-button @click="uninstall" v-if="settings.installed" :disabled="!cluster.isAdmin || isProcessing || isUpgrading" variant="danger">
|
||||
<b-spinner small v-if="isProcessing" label="Small Spinner" />
|
||||
Uninstall
|
||||
</b-button>
|
||||
<b-alert show variant="danger" v-if="status === 'ERROR'">
|
||||
{{ errorMsg }}
|
||||
</b-alert>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const semver = require('semver');
|
||||
|
||||
export default {
|
||||
name: 'Metrics',
|
||||
components: {},
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
feature: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
settings: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: Object
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
status: "",
|
||||
errorMsg: "",
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isUpgradeAvailable: function() {
|
||||
return this.cluster.features.metrics.canUpgrade;
|
||||
},
|
||||
isProcessing: function() {
|
||||
return this.status === "PROCESSING";
|
||||
},
|
||||
isUpgrading: function() {
|
||||
return this.status === "UPGRADING";
|
||||
},
|
||||
canInstall: function() {
|
||||
return !this.cluster.preferences.prometheus
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
install: async function(){
|
||||
this.status="PROCESSING";
|
||||
let error = null;
|
||||
let result = await this.$store.dispatch("installClusterFeature", {
|
||||
name: this.feature,
|
||||
clusterId: this.cluster.id,
|
||||
config: null,
|
||||
}).catch(e => {
|
||||
error = e;
|
||||
return false; // just returning false to promise
|
||||
})
|
||||
|
||||
// handle exceptions here; but oh why, why do we have to???
|
||||
if(error){
|
||||
this.status = "ERROR";
|
||||
this.errorMsg = error;
|
||||
return false;
|
||||
}
|
||||
|
||||
// now let's look at result...
|
||||
if(result.success === false) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = result.message
|
||||
} else {
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
this.status = "";
|
||||
this.errorMsg = "";
|
||||
}
|
||||
},
|
||||
uninstall: async function(){
|
||||
this.status = "PROCESSING";
|
||||
let error = null;
|
||||
try {
|
||||
let result = await this.$store.dispatch("uninstallClusterFeature", {
|
||||
name: this.feature,
|
||||
clusterId: this.cluster.id,
|
||||
})
|
||||
console.log("uninstall result:", result);
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
this.status = "SUCCESS";
|
||||
this.errorMsg = "";
|
||||
} catch(error) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = error
|
||||
console.log("Error uninstalling:", error);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
upgrade: async function(){
|
||||
this.status = "UPGRADING";
|
||||
try {
|
||||
let result = await this.$store.dispatch("upgradeClusterFeature", {
|
||||
name: this.feature,
|
||||
clusterId: this.cluster.id,
|
||||
config: null,
|
||||
})
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
this.status = "";
|
||||
this.errorMsg = "";
|
||||
} catch(error) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = error.message
|
||||
}
|
||||
return true;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div class="settings-section">
|
||||
<b>User Mode</b>
|
||||
<p class="description">
|
||||
User Mode feature enables non-admin users to see namespaces they have access to. This is achieved by configuring RBAC rules so that every authenticated user is granted to list namespaces.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<b-button @click="install" v-if="!settings.installed" :disabled="!cluster.isAdmin || isProcessing" variant="primary">
|
||||
<b-spinner small v-if="isProcessing" label="Small Spinner" />
|
||||
Install
|
||||
</b-button>
|
||||
<b-button @click="uninstall" v-if="settings.installed" :disabled="!cluster.isAdmin || isProcessing" variant="danger">
|
||||
<b-spinner small v-if="isProcessing" label="Small Spinner" />
|
||||
Uninstall
|
||||
</b-button>
|
||||
<b-button @click="upgrade" v-if="isUpgradeAvailable" :disabled="!cluster.isAdmin" variant="primary">
|
||||
Upgrade
|
||||
</b-button>
|
||||
<b-alert show variant="danger" v-if="status === 'ERROR'">
|
||||
{{ errorMsg }}
|
||||
</b-alert>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const semver = require('semver');
|
||||
|
||||
export default {
|
||||
name: 'UserMode',
|
||||
components: {},
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
feature: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
settings: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: Object
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
status: "",
|
||||
errorMsg: "",
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isProcessing: function() {
|
||||
return this.status === "PROCESSING";
|
||||
},
|
||||
isUpgradeAvailable: function() {
|
||||
if(!this.settings.installed) return false;
|
||||
if(!this.settings.currentVersion) return false;
|
||||
if(!this.settings.latestVersion) return false;
|
||||
let currentVersion = (this.settings.currentVersion.charAt(0) === "v") ? this.settings.currentVersion.substr(1) : this.settings.currentVersion;
|
||||
let latestVersion = (this.settings.latestVersion.charAt(0) === "v") ? this.settings.latestVersion.substr(1) : this.settings.latestVersion;
|
||||
return semver.gt(latestVersion, currentVersion)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
install: async function(){
|
||||
this.status="PROCESSING";
|
||||
let error = null;
|
||||
let result = await this.$store.dispatch("installClusterFeature", {
|
||||
name: this.feature,
|
||||
clusterId: this.cluster.id,
|
||||
config: null,
|
||||
}).catch(e => {
|
||||
error = e;
|
||||
return false; // just returning false to promise
|
||||
})
|
||||
|
||||
// handle exceptions here; but oh why, why do we have to???
|
||||
if(error){
|
||||
this.status = "ERROR";
|
||||
this.errorMsg = error;
|
||||
return false;
|
||||
}
|
||||
|
||||
// now let's look at result...
|
||||
if(result.success === false) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = result.message
|
||||
} else {
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
this.status = "";
|
||||
this.errorMsg = "";
|
||||
}
|
||||
},
|
||||
uninstall: async function(){
|
||||
this.status="PROCESSING";
|
||||
let error = null;
|
||||
try {
|
||||
let result = await this.$store.dispatch("uninstallClusterFeature", {
|
||||
name: this.feature,
|
||||
clusterId: this.cluster.id,
|
||||
})
|
||||
console.log("uninstall result:", result);
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
this.status="SUCCESS";
|
||||
this.errorMsg = "";
|
||||
} catch(error) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = error
|
||||
console.log("Error uninstalling:", error);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
},
|
||||
upgrade: async function(){
|
||||
// todo
|
||||
return true;
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
import Metrics from './Metrics'
|
||||
import UserMode from './UserMode'
|
||||
|
||||
export default {
|
||||
Metrics,
|
||||
UserMode
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="cluster-features" class="row">
|
||||
<div class="col-12">
|
||||
<h2>Features</h2>
|
||||
<component
|
||||
v-for="featureName in features"
|
||||
:key="featureName"
|
||||
:is="featureName"
|
||||
:cluster="cluster"
|
||||
:feature="featureName"
|
||||
:settings="feature(featureName)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// register all sub components
|
||||
import components from './Components'
|
||||
|
||||
export default {
|
||||
name: 'ClusterFeatures',
|
||||
components: components,
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
features: function() {
|
||||
if (!this.cluster) return []
|
||||
if (!this.cluster.features) return []
|
||||
|
||||
return Object.keys(this.cluster.features)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
feature: function( name ){ return this.cluster.features[name] }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
h2{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div class="settings-section">
|
||||
<b>Cluster Icon</b>
|
||||
<p>
|
||||
Define cluster icon. By default automatically generated.
|
||||
</p>
|
||||
<div class="row">
|
||||
<span class="cluster-settings-icon">
|
||||
<img v-if="preferences.icon" :src="preferences.icon" class="cluster-icon">
|
||||
<hashicon v-else :name="cluster.preferences.clusterName" size="38" />
|
||||
</span>
|
||||
<div class="col">
|
||||
<b-form-file
|
||||
ref="fileUpload"
|
||||
v-model="file"
|
||||
accept="image/jpeg, image/png, image/gif"
|
||||
:state="Boolean(file)"
|
||||
placeholder="Browse for new icon..."
|
||||
drop-placeholder="Drop file here..."
|
||||
browse-text=""
|
||||
@input="upload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="#" @click.prevent="reset" v-if="preferences.icon" class="text-muted">
|
||||
Use automatically generated icon
|
||||
</a>
|
||||
<b-alert show variant="danger" v-if="status === 'ERROR'">
|
||||
{{ errorMsg }}
|
||||
</b-alert>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hashicon from "../../hashicon/hashicon";
|
||||
export default {
|
||||
name: 'ClusterIcon',
|
||||
components: {
|
||||
hashicon
|
||||
},
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
status: "",
|
||||
errorMsg: "",
|
||||
file: null,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
preferences: function() {
|
||||
return this.cluster.preferences;
|
||||
},
|
||||
isProcessing: function() {
|
||||
return this.status === "PROCESSING";
|
||||
},
|
||||
isResetProcessing: function() {
|
||||
return this.resetStatus === "PROCESSING";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
reset: async function(){
|
||||
this.resetStatus = "PROCESSING";
|
||||
let error = null;
|
||||
|
||||
let result = await this.$store.dispatch("resetClusterIcon", {
|
||||
clusterId: this.cluster.id
|
||||
}).catch(e => {
|
||||
error = e;
|
||||
return false; // just returning false to promise
|
||||
})
|
||||
|
||||
// handle exceptions here; but oh why, why do we have to???
|
||||
if(error){
|
||||
this.resetStatus = "ERROR";
|
||||
this.errorMsg = error;
|
||||
return false;
|
||||
}
|
||||
|
||||
// now let's look at result...
|
||||
if(result.success === false) {
|
||||
this.resetStatus = "ERROR"
|
||||
this.errorMsg = result.message
|
||||
} else {
|
||||
this.resetStatus = "";
|
||||
this.errorMsg = "";
|
||||
}
|
||||
},
|
||||
upload: async function(file){
|
||||
if(!file) {
|
||||
return
|
||||
}
|
||||
this.status="PROCESSING";
|
||||
let error = null;
|
||||
|
||||
let result = await this.$store.dispatch("uploadClusterIcon", {
|
||||
clusterId: this.cluster.id,
|
||||
name: file.name,
|
||||
path: file.path
|
||||
}).catch(e => {
|
||||
error = e;
|
||||
return false; // just returning false to promise
|
||||
})
|
||||
// handle exceptions here; but oh why, why do we have to???
|
||||
if(error){
|
||||
this.status = "ERROR";
|
||||
this.errorMsg = error;
|
||||
return false;
|
||||
}
|
||||
|
||||
// now let's look at result...
|
||||
if(result.success === false) {
|
||||
this.status = "ERROR"
|
||||
this.errorMsg = result.message
|
||||
} else {
|
||||
this.status = "";
|
||||
this.errorMsg = "";
|
||||
this.file = null;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
mounted: function(){
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.description{
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.actions{
|
||||
border-top: 1px solid rgba(255,255,255,0.10);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.cluster-settings-icon {
|
||||
background: #252729;
|
||||
margin-left: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="settings-section">
|
||||
<b>Cluster Name</b>
|
||||
<p>
|
||||
Define cluster name.
|
||||
</p>
|
||||
<b-form-input v-model="cluster.preferences.clusterName"
|
||||
:placeholder="cluster.preferences.clusterName"
|
||||
:state="errors.name"
|
||||
trim
|
||||
@blur="onSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClusterName',
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
errors: {
|
||||
name: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSave: function() {
|
||||
if(this.cluster.preferences.clusterName === "") {
|
||||
this.errors.name = false
|
||||
return
|
||||
} else {
|
||||
this.errors.name = true
|
||||
}
|
||||
this.$store.dispatch("storeCluster", this.cluster);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="settings-section">
|
||||
<b>Cluster Workspace</b>
|
||||
<p>
|
||||
Define cluster <a href="/#/workspaces">workspace</a>.
|
||||
</p>
|
||||
<b-form-select
|
||||
v-model="cluster.workspace"
|
||||
:options="workspaces"
|
||||
@change="onSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClusterWorkspace',
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
workspaces: function() {
|
||||
return this.$store.getters.workspaces.map((ws) => {
|
||||
return {
|
||||
value: ws.id,
|
||||
text: ws.name
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSave: async function(workspaceId) {
|
||||
this.cluster.workspace = workspaceId
|
||||
await this.$store.dispatch("storeCluster", this.cluster);
|
||||
const ws = this.$store.getters.workspaceById(this.cluster.workspace);
|
||||
if (ws) {
|
||||
this.$store.commit("setCurrentWorkspace", ws);
|
||||
await this.$store.dispatch("clearClusters");
|
||||
await this.$store.dispatch("refreshClusters", ws);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div id="cluster-general" class="row">
|
||||
<div class="col-12">
|
||||
<h2>General</h2>
|
||||
<cluster-name :cluster="cluster" />
|
||||
<cluster-workspace :cluster="cluster" />
|
||||
<cluster-icon :cluster="cluster" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ClusterIcon from "./ClusterIcon";
|
||||
import ClusterName from "./ClusterName"
|
||||
import ClusterWorkspace from "./ClusterWorkspace"
|
||||
export default {
|
||||
name: "ClusterSettingsGeneral",
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ClusterIcon,
|
||||
ClusterName,
|
||||
ClusterWorkspace
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div id="cluster-status" class="cluster-settings-overview row">
|
||||
<div class="col-12">
|
||||
<h2>Status</h2>
|
||||
<div class="settings-section">
|
||||
<b>Cluster Status</b>
|
||||
<p>
|
||||
Cluster status information including detected distribution, kernel version and online status
|
||||
</p>
|
||||
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
Online Status
|
||||
</th>
|
||||
<td>{{ cluster.online ? "online" : "offline (" + (cluster.failureReason || "unknown reason") + ")" }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
Distribution
|
||||
</th>
|
||||
<td>{{ cluster.distribution }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
Kernel Version
|
||||
</th>
|
||||
<td>{{ cluster.version }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
API Address
|
||||
</th>
|
||||
<td>{{ cluster.apiUrl }}</td>
|
||||
</tr>
|
||||
<tr v-if="cluster.nodes">
|
||||
<th scope="row">
|
||||
Nodes Count
|
||||
</th>
|
||||
<td>{{ cluster.nodes }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClusterSettingsOverview',
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@ -1,196 +0,0 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="cluster-settings-section">
|
||||
<b>HTTP Proxy</b>
|
||||
|
||||
<b-form-group
|
||||
label="HTTP Proxy server. Used for communicating with Kubernetes API."
|
||||
description="A HTTP proxy server URL (format: http://<address>:<port>)."
|
||||
>
|
||||
<b-form-input
|
||||
v-model="cluster.preferences.httpsProxy"
|
||||
id="input-httpsproxy"
|
||||
@blur="onHttpsProxySave"
|
||||
/>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="cluster-settings-section">
|
||||
<b>Prometheus</b>
|
||||
<p>Use pre-installed Prometheus service for metrics. Please refer to the <a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md">guide</a> for possible configuration changes.</p>
|
||||
|
||||
<b-form-group
|
||||
label="Prometheus installation method."
|
||||
description="What query format is used to fetch metrics from Prometheus"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="prometheusProvider"
|
||||
:options="prometheusProviders"
|
||||
@change="onPrometheusProviderSave"
|
||||
/>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
label="Prometheus service address."
|
||||
description="An address to an existing Prometheus installation (<namespace>/<service>:<port>). Lens tries to auto-detect address if left empty."
|
||||
v-if="canEditPrometheusPath"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="prometheusPath"
|
||||
placeholder="<namespace>/<service>:<port>"
|
||||
id="input-prometheuspath"
|
||||
@blur="onPrometheusSave"
|
||||
:state="errors.prometheusPath"
|
||||
/>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="cluster-settings-section">
|
||||
<b>Working Directory</b>
|
||||
|
||||
<b-form-group
|
||||
label="Terminal working directory."
|
||||
description="An explicit start path where the terminal will be launched, this is used as the current working directory (cwd) for the shell process."
|
||||
>
|
||||
<b-form-input
|
||||
v-model="cluster.preferences.terminalCWD"
|
||||
placeholder="$HOME"
|
||||
id="input-terminalcwd"
|
||||
@blur="onTerminalCwdSave"
|
||||
:state="errors.terminalcwd"
|
||||
:formatter="expandPath"
|
||||
/>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { lstatSync } from "fs"
|
||||
import { prometheusProviders } from '../../../../../common/prometheus-providers';
|
||||
|
||||
export default {
|
||||
name: 'ClusterSettingsPreferences',
|
||||
props: {
|
||||
cluster: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
errors: {
|
||||
prometheusPath: null,
|
||||
terminalcwd: null
|
||||
},
|
||||
prometheusPath: "",
|
||||
prometheusProvider: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
prometheusProviders: function() {
|
||||
const providers = prometheusProviders.map((provider) => {
|
||||
return { text: provider.name, value: provider.id }
|
||||
})
|
||||
providers.unshift({text: "Auto detect", value: ""})
|
||||
|
||||
return providers;
|
||||
},
|
||||
canEditPrometheusPath: function() {
|
||||
if (this.prometheusProvider === "") return false
|
||||
if (this.prometheusProvider === "lens") return false
|
||||
|
||||
return true
|
||||
}
|
||||
},
|
||||
mounted: async function() {
|
||||
this.updateValues()
|
||||
},
|
||||
methods: {
|
||||
updateValues: function(){
|
||||
if (this.cluster.preferences.prometheus) {
|
||||
const prom = this.cluster.preferences.prometheus
|
||||
if (!prom.prefix) prom.prefix = ""
|
||||
this.prometheusPath = `${prom.namespace}/${prom.service}:${prom.port}${prom.prefix}`
|
||||
} else {
|
||||
this.prometheusPath = ""
|
||||
}
|
||||
if (this.cluster.preferences.prometheusProvider) {
|
||||
this.prometheusProvider = this.cluster.preferences.prometheusProvider.type
|
||||
} else {
|
||||
this.prometheusProvider = ""
|
||||
}
|
||||
},
|
||||
parsePrometheusPath: function(path) {
|
||||
const parsed = path.split(/\/|:/, 3)
|
||||
const apiPrefix = path.substring(parsed.join("/").length)
|
||||
if (parsed[0] && parsed[1] && parsed[2]) {
|
||||
this.errors.prometheusPath = true;
|
||||
} else {
|
||||
this.errors.prometheusPath = false;
|
||||
}
|
||||
return {
|
||||
namespace: parsed[0],
|
||||
service: parsed[1],
|
||||
port: parsed[2],
|
||||
prefix: apiPrefix
|
||||
}
|
||||
},
|
||||
expandPath: function(value, event) {
|
||||
if(value === "") {
|
||||
this.errors.terminalcwd = null
|
||||
return value;
|
||||
}
|
||||
if(value.substr(0, 1) == "~") {
|
||||
value = process.env.HOME + value.substr(1);
|
||||
} else if(value.substr(0, 5) == "$HOME") {
|
||||
value = process.env.HOME + value.substr(5);
|
||||
}
|
||||
|
||||
try {
|
||||
this.errors.terminalcwd = lstatSync(value).isDirectory()
|
||||
} catch(_err) {
|
||||
this.errors.terminalcwd = false
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
onHttpsProxySave: function() {
|
||||
if(this.cluster.preferences.httpsProxy === "") this.cluster.preferences.httpsProxy = null
|
||||
this.$store.dispatch("storeCluster", this.cluster);
|
||||
},
|
||||
onPrometheusSave: function() {
|
||||
if (this.prometheusPath === "") {
|
||||
this.cluster.preferences.prometheus = null;
|
||||
} else {
|
||||
this.cluster.preferences.prometheus = this.parsePrometheusPath(this.prometheusPath);
|
||||
}
|
||||
this.$store.dispatch("storeCluster", this.cluster);
|
||||
},
|
||||
onPrometheusProviderSave: function() {
|
||||
if (this.prometheusProvider === "") {
|
||||
this.cluster.preferences.prometheusProvider = null;
|
||||
this.cluster.preferences.prometheus = null;
|
||||
} else {
|
||||
this.cluster.preferences.prometheusProvider = { type: this.prometheusProvider }
|
||||
}
|
||||
this.$store.dispatch("storeCluster", this.cluster);
|
||||
},
|
||||
onTerminalCwdSave: function() {
|
||||
if(this.cluster.preferences.terminalCWD === "") this.cluster.preferences.terminalCWD = null
|
||||
this.$store.dispatch("storeCluster", this.cluster);
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
"cluster": "updateValues",
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<ClosePageButton />
|
||||
<div class="container-fluid settings">
|
||||
<div v-if="cluster" class="header sticky-top">
|
||||
<h2>
|
||||
<div class="icon d-inline">
|
||||
<img v-if="preferences.icon" :src="preferences.icon" class="cluster-icon">
|
||||
<hashicon v-else :name="cluster.preferences.clusterName" size="30" />
|
||||
</div>
|
||||
{{ cluster.preferences.clusterName }}
|
||||
</h2>
|
||||
</div>
|
||||
<div v-if="cluster" class="row">
|
||||
<div class="col-3" />
|
||||
<div ref="content" id="cluster-settings" class="col-6">
|
||||
<cluster-settings-overview :cluster="cluster" />
|
||||
<cluster-settings-general :cluster="cluster" />
|
||||
<cluster-settings-preferences :cluster="cluster" />
|
||||
<cluster-settings-features :cluster="cluster" />
|
||||
|
||||
<div id="cluster-remove" class="settings-section">
|
||||
<h2>Remove Cluster</h2>
|
||||
<b-button v-b-modal.bv-modal-confirm variant="danger" type="submit">
|
||||
Remove Cluster
|
||||
</b-button>
|
||||
<!-- Modal confirmation -->
|
||||
<b-modal id="bv-modal-confirm" @ok="removeCluster" ok-title="Remove" ok-variant="danger" title-class="confirm-header" hide-backdrop title="Confirm cluster delete">
|
||||
<p>Are you sure you want to delete <strong>{{ preferences.clusterName }}</strong> cluster from Lens?</p>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!cluster">
|
||||
<cube-spinner text="Loading..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CubeSpinner from "@/_vue/components/CubeSpinner";
|
||||
import ClusterSettingsGeneral from "./General/index";
|
||||
import ClusterSettingsOverview from "./Overview/index";
|
||||
import ClusterSettingsPreferences from "./Preferences/index";
|
||||
import ClusterSettingsFeatures from "./Features/index";
|
||||
import hashicon from "../hashicon/hashicon";
|
||||
import ClosePageButton from "@/_vue/components/common/ClosePageButton";
|
||||
|
||||
export default {
|
||||
name: 'ClusterSettingsPage',
|
||||
components: {
|
||||
CubeSpinner,
|
||||
ClosePageButton,
|
||||
ClusterSettingsGeneral,
|
||||
ClusterSettingsOverview,
|
||||
ClusterSettingsPreferences,
|
||||
ClusterSettingsFeatures,
|
||||
hashicon
|
||||
},
|
||||
computed: {
|
||||
cluster: function() {
|
||||
return this.$store.getters.clusterById(this.$route.params.id);
|
||||
},
|
||||
preferences: function() {
|
||||
return this.cluster.preferences;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadLens: function() {
|
||||
this.$store.dispatch("refineCluster", this.cluster.id);
|
||||
},
|
||||
removeCluster: async function(){
|
||||
let res = await this.$store.dispatch('removeCluster', this.cluster.id);
|
||||
if(!res) return false;
|
||||
|
||||
this.$router.push({
|
||||
name: "landing-page"
|
||||
}).catch(err => {})
|
||||
return true;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadLens()
|
||||
},
|
||||
watch: {
|
||||
"$route": "loadLens"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
& h2 {
|
||||
padding: 0.5rem
|
||||
}
|
||||
padding-top: 5px;
|
||||
padding-left: 15px;
|
||||
border-bottom: 1px solid rgb(53, 58, 62);
|
||||
background-color: #1e2124;
|
||||
& img {
|
||||
margin-right: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
.hashicon {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
& canvas{
|
||||
position: relative;
|
||||
bottom: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#cluster-settings {
|
||||
& input {
|
||||
background-color: #252729 !important;
|
||||
border: 0px !important;
|
||||
color: #87909c !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cluster-icon {
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
h2{
|
||||
padding: 0.75rem;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.table th, .table td{
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
-webkit-appearance: inherit;
|
||||
}
|
||||
|
||||
.collapsed > .when-opened, :not(.collapsed) > .when-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.confirm-header{
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0px !important;
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-label{
|
||||
background: transparent !important;
|
||||
color: #3d90ce !important;
|
||||
}
|
||||
|
||||
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.custom-file-label::after {
|
||||
content: "" !important;
|
||||
width: 0px;
|
||||
padding: 0px !important;
|
||||
background-color: transparent !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user