mirror of
https://github.com/semaphoreui/semaphore.git
synced 2025-01-20 15:29:28 +01:00
feat(web2): add environment page
This commit is contained in:
Denis Gukov
parent
38a613197c
commit
cca1e33cce
@ -45,6 +45,11 @@ func EnvironmentMiddleware(next http.Handler) http.Handler {
|
||||
|
||||
// GetEnvironment retrieves sorted environments from the database
|
||||
func GetEnvironment(w http.ResponseWriter, r *http.Request) {
|
||||
if environment := context.Get(r, "environment"); environment != nil {
|
||||
util.WriteJSON(w, http.StatusOK, environment.(db.Environment))
|
||||
return
|
||||
}
|
||||
|
||||
project := context.Get(r, "project").(db.Project)
|
||||
var env []db.Environment
|
||||
|
||||
|
||||
@ -159,13 +159,14 @@ func Route() *mux.Router {
|
||||
projectInventoryManagement := projectUserAPI.PathPrefix("/inventory").Subrouter()
|
||||
projectInventoryManagement.Use(projects.InventoryMiddleware)
|
||||
|
||||
projectInventoryManagement.HandleFunc("/{inventory_id}", projects.GetInventory).Methods("GET")
|
||||
projectInventoryManagement.HandleFunc("/{inventory_id}", projects.GetInventory).Methods("GET", "HEAD")
|
||||
projectInventoryManagement.HandleFunc("/{inventory_id}", projects.UpdateInventory).Methods("PUT")
|
||||
projectInventoryManagement.HandleFunc("/{inventory_id}", projects.RemoveInventory).Methods("DELETE")
|
||||
|
||||
projectEnvManagement := projectUserAPI.PathPrefix("/environment").Subrouter()
|
||||
projectEnvManagement.Use(projects.EnvironmentMiddleware)
|
||||
|
||||
projectEnvManagement.HandleFunc("/{environment_id}", projects.GetEnvironment).Methods("GET", "HEAD")
|
||||
projectEnvManagement.HandleFunc("/{environment_id}", projects.UpdateEnvironment).Methods("PUT")
|
||||
projectEnvManagement.HandleFunc("/{environment_id}", projects.RemoveEnvironment).Methods("DELETE")
|
||||
|
||||
|
||||
49
web2/src/components/EnvironmentForm.vue
Normal file
49
web2/src/components/EnvironmentForm.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-form
|
||||
ref="form"
|
||||
lazy-validation
|
||||
v-model="formValid"
|
||||
v-if="item != null"
|
||||
>
|
||||
<v-alert
|
||||
:value="formError"
|
||||
color="error"
|
||||
class="pb-2"
|
||||
>{{ formError }}</v-alert>
|
||||
|
||||
<v-text-field
|
||||
v-model="item.name"
|
||||
label="Environment Name"
|
||||
:rules="[v => !!v || 'Name is required']"
|
||||
required
|
||||
:disabled="formSaving"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="item.json"
|
||||
label="Environment (This has to be a JSON object)"
|
||||
:disabled="formSaving"
|
||||
></v-text-field>
|
||||
|
||||
<div>
|
||||
Must be valid JSON. You may use the key ENV to pass a json object which sets environmental
|
||||
variables for the ansible command execution environment
|
||||
</div>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
import ItemFormBase from '@/components/ItemFormBase';
|
||||
|
||||
export default {
|
||||
mixins: [ItemFormBase],
|
||||
methods: {
|
||||
getItemsUrl() {
|
||||
return `/api/project/${this.projectId}/environment`;
|
||||
},
|
||||
|
||||
getSingleItemUrl() {
|
||||
return `/api/project/${this.projectId}/environment/${this.itemId}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
editItem(itemId = 'new') {
|
||||
editItem(itemId) {
|
||||
this.itemId = itemId;
|
||||
this.editDialog = true;
|
||||
},
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<ItemDialog
|
||||
v-model="editDialog"
|
||||
save-button-text="Save"
|
||||
title="Edit inventory"
|
||||
title="Edit environment"
|
||||
>
|
||||
<template v-slot:form="{ onSave, onError, needSave, needReset }">
|
||||
<InventoryForm
|
||||
<EnvironmentForm
|
||||
:project-id="projectId"
|
||||
:item-id="itemId"
|
||||
@save="onSave"
|
||||
@ -18,20 +18,20 @@
|
||||
</ItemDialog>
|
||||
|
||||
<YesNoDialog
|
||||
title="Delete inventory"
|
||||
text="Are you really want to delete this inventory?"
|
||||
title="Delete environment"
|
||||
text="Are you really want to delete this environment?"
|
||||
v-model="deleteItemDialog"
|
||||
@yes="deleteItem(itemId)"
|
||||
/>
|
||||
|
||||
<v-toolbar flat color="white">
|
||||
<v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Inventory</v-toolbar-title>
|
||||
<v-toolbar-title>Environment</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="editItem()"
|
||||
>New Inventory</v-btn>
|
||||
@click="editItem('new')"
|
||||
>New Environment</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-data-table
|
||||
@ -55,7 +55,7 @@
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Delete inventory</span>
|
||||
<span>Delete environment</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip bottom>
|
||||
@ -70,7 +70,7 @@
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Edit inventory</span>
|
||||
<span>Edit environment</span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
@ -82,99 +82,29 @@
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import EventBus from '@/event-bus';
|
||||
import InventoryForm from '@/components/InventoryForm.vue';
|
||||
import ItemDialog from '@/components/ItemDialog.vue';
|
||||
import YesNoDialog from '@/components/YesNoDialog.vue';
|
||||
import { getErrorMessage } from '@/lib/error';
|
||||
import ItemListPageBase from '@/components/ItemListPageBase';
|
||||
import EnvironmentForm from '@/components/EnvironmentForm.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YesNoDialog,
|
||||
ItemDialog,
|
||||
InventoryForm,
|
||||
},
|
||||
props: {
|
||||
projectId: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{
|
||||
text: 'Name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
text: 'Type',
|
||||
value: 'type',
|
||||
},
|
||||
{
|
||||
text: 'Actions',
|
||||
value: 'actions',
|
||||
sortable: false,
|
||||
},
|
||||
],
|
||||
items: null,
|
||||
itemId: null,
|
||||
editDialog: null,
|
||||
deleteItemDialog: null,
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.loadItems();
|
||||
},
|
||||
|
||||
components: { EnvironmentForm },
|
||||
mixins: [ItemListPageBase],
|
||||
methods: {
|
||||
showDrawer() {
|
||||
EventBus.$emit('i-show-drawer');
|
||||
getHeaders() {
|
||||
return [{
|
||||
text: 'Name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
text: 'Actions',
|
||||
value: 'actions',
|
||||
sortable: false,
|
||||
}];
|
||||
},
|
||||
|
||||
async onItemSaved() {
|
||||
await this.loadItems();
|
||||
getSingleItemUrl() {
|
||||
return `/api/project/${this.projectId}/environment`;
|
||||
},
|
||||
|
||||
askDeleteItem(itemId) {
|
||||
this.itemId = itemId;
|
||||
this.deleteItemDialog = true;
|
||||
},
|
||||
|
||||
async deleteItem(itemId) {
|
||||
try {
|
||||
const item = this.items.find((x) => x.id === itemId);
|
||||
|
||||
await axios({
|
||||
method: 'delete',
|
||||
url: `/api/project/${this.projectId}/environment`,
|
||||
responseType: 'json',
|
||||
});
|
||||
|
||||
EventBus.$emit('i-environment', {
|
||||
action: 'delete',
|
||||
item,
|
||||
});
|
||||
|
||||
await this.loadItems();
|
||||
} catch (err) {
|
||||
EventBus.$emit('i-snackbar', {
|
||||
color: 'error',
|
||||
text: getErrorMessage(err),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
editItem(itemId = 'new') {
|
||||
this.itemId = itemId;
|
||||
this.editDialog = true;
|
||||
},
|
||||
|
||||
async loadItems() {
|
||||
this.items = (await axios({
|
||||
method: 'get',
|
||||
url: `/api/project/${this.projectId}/environment`,
|
||||
responseType: 'json',
|
||||
})).data;
|
||||
getEventName() {
|
||||
return 'i-environment';
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="editItem()"
|
||||
@click="editItem('new')"
|
||||
>New Inventory</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user