refactor(itim): services now use details template

. #22 #226
This commit is contained in:
2024-08-14 00:10:56 +09:30
parent 3f117f9d83
commit 086959b431
5 changed files with 162 additions and 258 deletions

View File

@ -75,6 +75,13 @@ class ChangeView(View, generic.UpdateView):
external_links_query = None external_links_query = None
if 'tab' in self.request.GET:
context['open_tab'] = str(self.request.GET.get("tab")).lower()
else:
context['open_tab'] = None
if self.model._meta.model_name == 'device': if self.model._meta.model_name == 'device':

View File

@ -1,8 +1,11 @@
from django import forms from django import forms
from django.forms import ValidationError from django.forms import ValidationError
from django.urls import reverse
from itim.models.services import Service from itim.models.services import Service
from app import settings
from core.forms.common import CommonModelForm from core.forms.common import CommonModelForm
@ -79,3 +82,81 @@ class ServiceForm(CommonModelForm):
return cleaned_data return cleaned_data
class DetailForm(ServiceForm):
tabs: dict = {
"details": {
"name": "Details",
"slug": "details",
"sections": [
{
"layout": "double",
"left": [
'name',
'config_key_variable',
'template',
'organization',
'c_created',
'c_modified'
],
"right": [
'model_notes',
]
}
]
},
"rendered_config": {
"name": "Rendered Config",
"slug": "rendered_config",
"sections": [
{
"layout": "single",
"fields": [
'config_variables',
],
"json": [
'config_variables'
]
}
]
}
}
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['config_variables'] = forms.fields.JSONField(
widget = forms.Textarea(
attrs = {
"cols": "80",
"rows": "100"
}
),
label = 'Rendered Configuration',
initial = self.instance.config_variables,
)
self.fields['c_created'] = forms.DateTimeField(
label = 'Created',
input_formats=settings.DATETIME_FORMAT,
disabled = True,
initial = self.instance.created,
)
self.fields['c_modified'] = forms.DateTimeField(
label = 'Modified',
input_formats=settings.DATETIME_FORMAT,
disabled = True,
initial = self.instance.modified,
)
self.tabs['details'].update({
"edit_url": reverse('ITIM:_service_change', args=(self.instance.pk,))
})

View File

@ -1,174 +1,14 @@
{% extends 'base.html.j2' %} {% extends 'detail.html.j2' %}
{% load json %} {% load json %}
{% load markdown %} {% load markdown %}
{% block content %}
<script> {% block tabs %}
function openCity(evt, cityName) { <div id="details" class="content-tab">
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent"); {% include 'content/section.html.j2' with tab=form.tabs.details %}
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<style>
.detail-view-field {
display: unset;
height: 30px;
line-height: 30px;
padding: 0px 20px 40px 20px;
}
.detail-view-field label {
display: inline-block;
font-weight: bold;
width: 200px;
margin: 10px;
height: 30px;
line-height: 30px;
}
.detail-view-field span {
display: inline-block;
width: 340px;
margin: 10px;
border-bottom: 1px solid #ccc;
height: 30px;
line-height: 30px;
}
pre {
word-wrap: break-word;
white-space: pre-wrap;
}
</style>
<div class="tab">
<button onclick="window.location='{% url 'ITIM:Services' %}';"
style="vertical-align: middle; padding: auto; margin: 0px">
<svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px"
style="vertical-align: middle; margin: 0px; padding: 0px border: none; " fill="#6a6e73">
<path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z" />
</svg>Back to Services</button>
<button id="defaultOpen" class="tablinks" onclick="openCity(event, 'Details')">Details</button>
<button class="tablinks" onclick="openCity(event, 'Rendered_Config')">Rendered Config</button>
{% if perms.assistance.change_service %}
<button class="tablinks" onclick="openCity(event, 'Notes')">Notes</button>
{% endif %}
</div>
<form method="post">
<div id="Details" class="tabcontent">
<h3>Details</h3>
{% csrf_token %}
<div style="align-items:flex-start; align-content: center; display: flexbox; width: 100%">
<div style="display: inline; width: 40%; margin: 30px;">
<div class="detail-view-field">
<label>{{ form.name.label }}</label>
<span>{{ form.name.value }}</span>
</div>
<div class="detail-view-field">
<label>{{ form.config_key_variable.label }}</label>
<span>{{ form.config_key_variable.value }}</span>
</div>
{% if form.template.value or form.is_template.value %}
<div class="detail-view-field">
<label>{{ form.is_template.label }}</label>
<span>
{% if form.is_template.value %}
{{ form.is_template.value }}
{% else %}
<a href="{% url 'ITIM:_service_view' item.template.pk %}">{{ item.template }}</a>
{% endif %}
</span>
</div>
{% endif %}
<div class="detail-view-field">
<label>{{ form.organization.label }}</label>
<span>
{% if form.organization.value %}
{{ item.organization }}
{% else %}
&nbsp;
{% endif %}
</span>
</div>
<div class="detail-view-field">
<label>Created</label>
<span>{{ item.created }}</span>
</div>
<div class="detail-view-field">
<label title="{% if item.cluster %}{{ form.cluster.help_text }}{% else %}{{ form.device.help_text }}{% endif %}">
{% if item.cluster %}
Cluster
{% else %}
Device
{% endif %}
</label>
<span>
{% if item.cluster %}
{{ item.cluster }}
{% else %}
{% if item.device.id %}
<a href="{% url 'ITAM:_device_view' item.device.id %}">{{ item.device }}</a>
{% endif %}
{% endif %}
</span>
</div>
<div class="detail-view-field">
<label>Modified</label>
<span>{{ item.modified }}</span>
</div>
</div>
<div style="display: inline; width: 40%; margin: 30px; text-align: left;">
<div>
<label
style="font-weight: bold; width: 100%; border-bottom: 1px solid #ccc; display: block; text-align: inherit;">{{ form.model_notes.label }}</label>
<div style="display: inline-block; text-align: left;">
{% if form.model_notes.value %}
{{ form.model_notes.value | markdown | safe }}
{% else %}
&nbsp;
{% endif %}
</div>
</div>
</div>
</div>
<input type="button" value="Edit" onclick="window.location='{% url 'ITIM:_service_change' item.pk %}';">
<hr /> <hr />
@ -201,7 +41,6 @@
</table> </table>
</div> </div>
<div style="display: block; width: 100%;"> <div style="display: block; width: 100%;">
<h3>Dependent Services</h3> <h3>Dependent Services</h3>
<table> <table>
@ -224,50 +63,13 @@
</table> </table>
</div> </div>
</div>
<div style="display: block; width: 100%;">
<h3>Service Config</h3>
<br>
<textarea cols="90" rows="30" readonly>{{ item.config | json_pretty }}</textarea>
</div>
<br> <div id="rendered_config" class="content-tab">
<script> {% include 'content/section.html.j2' with tab=form.tabs.rendered_config %}
document.getElementById("defaultOpen").click();
</script>
</div> </div>
<div id="Rendered_Config" class="tabcontent">
<h3>
Rendered Config
</h3>
<div>
<textarea cols="90" rows="30" readonly>{{ item.config_variables | json_pretty }}</textarea>
</div>
</div>
{% if perms.assistance.change_knowledgebase %}
<div id="Notes" class="tabcontent">
<h3>
Notes
</h3>
{{ notes_form }}
<input type="submit" name="{{ notes_form.prefix }}" value="Submit" />
<div class="comments">
{% if notes %}
{% for note in notes %}
{% include 'note.html.j2' %}
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
</form>
{% endblock %} {% endblock %}

View File

@ -6,7 +6,7 @@ from core.forms.comment import AddNoteForm
from core.models.notes import Notes from core.models.notes import Notes
from core.views.common import AddView, ChangeView, DeleteView, IndexView from core.views.common import AddView, ChangeView, DeleteView, IndexView
from itim.forms.services import ServiceForm from itim.forms.services import ServiceForm, DetailForm
from itim.models.services import Service from itim.models.services import Service
from settings.models.user_settings import UserSettings from settings.models.user_settings import UserSettings
@ -136,7 +136,7 @@ class View(ChangeView):
context_object_name = "item" context_object_name = "item"
form_class = ServiceForm form_class = DetailForm
model = Service model = Service

View File

@ -20,7 +20,7 @@
{% else %} {% else %}
<button class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button> <button id="tab-{{ tab.slug }}" class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>
{% endif %} {% endif %}
@ -30,4 +30,18 @@
{% block tabs %}{% endblock %} {% block tabs %}{% endblock %}
{% if open_tab %}
<script>
document.getElementById("tab-{{ open_tab }}").click();
</script>
{% else %}
<script>
document.getElementById("defaultOpen").click();
</script>
{% endif %}
{% endblock %} {% endblock %}