Code Studio configuration

Template label

Short description

<div>
                                            <button type="button" class="btn btn--secondary" ng-click="cancelEditShortDesc(codeStudioTemplate)">Cancel</button>
                                            <button type="submit" class="btn btn--success" ng-click="stopEditShortDesc(codeStudioTemplate)">OK</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="control-group">
                                <label for="" class="control-label">Description</label>
                                <div class="controls">
                                    <div class="code-studio-template__description code-studio-template__editable" ng-show="!uiState.$editingDescription">
                                        <div from-markdown="codeStudioTemplate.description || 'Description...'"/>
                                        <span class="code-studio-template__field-edit"><i class="icon-pencil" ng-click="startEditDescription(codeStudioTemplate)"></i></span>
                                    </div>
                                    <div class="code-studio-template__description--editing" ng-show="uiState.$editingDescription">
                                        <textarea type="text" ng-model="uiState.edited"/>
                                        <div>
                                            <button type="button" class="btn btn--secondary" ng-click="cancelEditDescription(codeStudioTemplate)">Cancel</button>
                                            <button type="submit" class="btn btn--success" ng-click="stopEditDescription(codeStudioTemplate)">OK</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="control-group">
                                <label for="" class="control-label">Icon</label>
                                <div class="controls block-template__icon-input">
                                    <input type="text" ng-model="codeStudioTemplate.icon" placeholder="fa fa-..."/><i class="" ng-class="codeStudioTemplate.icon"></i>
                                    <span class="help-inline">Icon from <a href="https://fontawesome.com/v5/docs" target="_blank">Font Awesome v5 <i class="icon-external-link"/></a></span>
                                </div>
                            </div>

<div class="control-group">
                                <label for="isEditor" class="control-label">Code editor template</label>
                                <div class="controls">
                                    <label style="font-size: inherit">
                                        <input id="isEditor" type="checkbox" ng-model="codeStudioTemplate.isEditor"/>
                                        <span class="help-inline">A code editor template helps DSS propose specific actions and indicates if the template is providing a code editing environment.</span>
                                    </label>
                                </div>
                            </div>

</div>

<div class="code-studio-template__section">
                            <h2 class="code-studio-template__title">Build</h2>

<div class="alert alert-info" ng-show="containerSelection() === 'ALL' || (containerSelection() === 'ALLOWED' && codeStudioTemplate.containerConfs.length > 0)">
                                <span ng-show="codeStudioTemplate.allContainerConfs">Code Studio template images will be built for <strong>all current containers configurations</strong>.<br /></span>
                                You will have to build this template again when you edit these container configurations.
                            </div>
                            <div class="alert alert-error" ng-show="outdatedContainerConfs.length > 0 && containerSelection() !== 'ALL' ">
                                <h5>
                                    <i class="icon-dku-error"></i>
                                    Some of the container configurations you have chosen for this Code Studio template do not exist anymore:
                                </h5>
                                <ul class="item-list">
                                    <li ng-repeat="containerConf in outdatedContainerConfs">{{ containerConf }}</li>
                                </ul>
                                <button class="btn btn--secondary" ng-click="removeOutdatedContainerConfs()">Remove from selected containers</button>
                            </div>

<h2 class="code-studio-template__title">Extra code env options</h2>

<div class="control-group">
                                <label for="inheritGlobalCodeEnvsExtraSettings" class="control-label">Inherit global settings</label>
                                <div class="controls">
                                    <label style="font-size: inherit">
                                        <input id="inheritGlobalCodeEnvsExtraSettings" type="checkbox" ng-model="codeStudioTemplate.inheritGlobalCodeEnvsExtraSettings"/>
                                    </label>
                                </div>
                            </div>
                            <div class="control-group" ng-show="!codeStudioTemplate.inheritGlobalCodeEnvsExtraSettings">
                                <label for="" class="control-label">Extra options for 'pip install'</label>
                                <div class="controls">
                                    <span class="help-inline">One item per option (so "-i /stuff" must be two items)</span>
                                    <ng2-values-list [(items)]="codeStudioTemplate.codeEnvsExtraSettings.pipInstallExtraOptions" add-label="Add option for 'pip install'" value-placeholder="E.g. -i, --trusted-host..."/>
                                </div>
                            </div>
                            <div class="control-group" ng-show="!codeStudioTemplate.inheritGlobalCodeEnvsExtraSettings">
                                <label for="" class="control-label">Extra options for 'virtualenv'</label>
                                <div class="controls">
                                    <span class="help-inline">One item per option (so "-i /stuff" must be two items)</span>
                                    <ng2-values-list [(items)]="codeStudioTemplate.codeEnvsExtraSettings.virtualenvCreateExtraOptions" add-label="Add option for 'virtualenv'" value-placeholder="E.g. -p, --system-site-packages..."/>
                                </div>
                            </div>
                        </div>

</form>
                </div>
            </div>

<h1 class="noflex">
                        Definition
                    </h1>

<div ng-if="codeStudioTemplate.type.indexOf('pykbkle_') === 0">
                                    <div ng-controller="PluginCodeStudioController">
                                        <div class="alert alert--warning" ng-if="!loadedDesc || !loadedDesc.desc">The plugin component defining this template type {{codeStudioTemplate.type}} is missing</div>
                                        <div custom-params-form
                                             ng-if="loadedDesc && pluginDesc"
                                             desc="loadedDesc.desc"
                                             plugin-desc="pluginDesc"
                                             component-id="loadedDesc.id"
                                             config="codeStudioTemplate.params.config" >
                                        </div>
                                        <div ng-if="loadedDesc && loadedDesc.desc && !loadedDesc.desc.paramsTemplate && loadedDesc.desc.params.length === 0" class="center-children">
                                            <span>No parameters</span>
                                        </div>
                                    </div>
                                </div>
                                <div ng-if="codeStudioTemplate.type.indexOf('pykbkle_') < 0">
                                    <ng-include ng-if="codeStudioTemplate.type" src="'/templates/admin/code-studios/' + codeStudioTemplate.type + '-code-studio-template-params.html'"></ng-include>
                                </div>

</div>

</div>
                    </div>
                </div>
            </div>

<div ng-class="{active: uiState.active==='permissions'}" class="tab-pane h100">
                <div class="code-studio-template__boxed-pane fh oa">
                    <form class="dkuform-horizontal">
                        <div class="code-studio-template__section" ng-if="codeStudioTemplate">
                            <h2 class="code-studio-template__title">Permissions</h2>
                            <div code-studio-template-security-permissions code-studio-template="codeStudioTemplate"></div>
                        </div>
                    </form>
                </div>
            </div>

<h1 class="noflex">
                        <span>Build History</span>
                        <div class="pull-right">
                            <button class="btn btn--outline" ng-click="refreshLogs()"><i class="icon-refresh"></i> Refresh</button>
                        </div>
                    </h1>

<form class="dkuform-horizontal noflex container-fluid code-studio-template__section no-border">
                        <div class="control-group">
                            <label class="control-label">Show build...</label>
                            <div class="controls">
                                <select dku-bs-select ng-model="uiState.selectedLog" ng-options="l as l.buildId for l in uiState.logs"></select>
                            </div>
                        </div>
                        <div class="control-group" ng-if="uiState.currentLog.buildId">
                            <label class="control-label">Diagnosis</label>
                            <div class="controls">
                                <a class="nowrap" ng-click="downloadBuildDiagnosis(uiState.currentLog)" data-qa-code-studio-template-download-diagnosis><i class="icon-download"></i> Download</a>
                                <span class="help-inline">Get a zip to attach to your support request</span>
                            </div>
                        </div>
                    </form>

<div class="noflex code-studio-template__section no-border">
                        <div class="column-header-tabs dib" ng-init="uiState.activeLogTab = 'log'">
                            <div class="tab" ng-class="{'active' : uiState.activeLogTab === 'log'}" ng-click="uiState.activeLogTab = 'log'">
                                <div class="title mright8">Log</div>
                            </div>
                            <div class="tab" ng-class="{'active' : uiState.activeLogTab === 'dockerfile'}" ng-click="uiState.activeLogTab = 'dockerfile'">
                                <div class="title mleft8 mright8">Dockerfile</div>
                            </div>
                            <div class="tab" ng-class="{'active' : uiState.activeLogTab === 'contents'}" ng-click="uiState.activeLogTab = 'contents'">
                                <div class="title mleft8">Build data</div>
                            </div>
                        </div>
                    </div>

<div class="flex code-studio-template__section" ng-switch="uiState.activeLogTab">
                        <div ng-switch-when="log" class="h100 vertical-flex">
                            <div class="noflex m8">
                                <a class="nowrap" ng-href="{{getBuildLogURL(uiState.currentLog)}}" target="_blank">View build log</a><br />
                            </div>
                            <div class="flex h100">
                                <pre smart-log-tail="uiState.currentLog.logTail" class="fh oa" style="max-width: initial; max-height: initial;"></pre>
                            </div>
                        </div>

<div ng-switch-when="dockerfile" class="fh">
                            <pre class="debug w100 h100 oa" style="max-width: initial; max-height: initial;">{{ uiState.currentLog.dockerfile }}</pre>
                        </div>

<div ng-switch-when="contents" class="fh">
                            <div class="h100 fattable-default-style" fat-repeat="uiState.currentLog.contents" as="item" row-height="24">
                                <div>
                                    <div style="width: 10px">
                                        <span><i ng-class="{'icon-folder-close': item.isDirectory, 'icon-file': !item.isDirectory}"></i></span>
                                    </div>
                                    <div style="width: 200px" class="mx-textellipsis">
                                        <span>{{ item.path }}</span>
                                    </div>
                                    <div style="width: 50px" class="mx-textellipsis">
                                        <span ng-if="!item.isDirectory">{{ item.size | fileSizeOrNA }}</span>
                                    </div>
                                    <div style="width: 50px" class="mx-textellipsis">
                                        <span>{{ item.lastModified | friendlyDate }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<h1 class="noflex">
                        <span>Usage of this template</span>
                        <div class="pull-right">
                            <button type="button" class="btn btn--text"
                                    ng-if="uiState.usage"
                                    ng-click="refreshUsages()">
                                <i class="icon-refresh"></i> Refresh
                            </button>
                        </div>
                    </h1>

<div class="empty-list-cta" ng-if="uiState.usage == null">
                        <p>Searching for all uses of a Code Studio template may take a long time on large instances.</p>
                        <button type="button" class="btn btn--text" ng-click="refreshUsages()"><i class="icon-refresh"></i> Refresh</button>
                    </div>

<div class="noflex code-studio-template__section" ng-if="uiState.usage.notAccessibleCount > 0">
                        <p>{{uiState.usage.notAccessibleCount}} Code Studio(s) ({{uiState.usage.notAccessibleRunningCount}} running) in {{uiState.usage.notAccessibleProjectCount}} project(s) without read access</p>
                    </div>

<div class="flex" ng-if="uiState.usage != null">
                        <div class="fh oa">
                            <div class="code-studio-template__section" ng-if="uiState.usage.projects.length > 0">
                                <table class="table table-hover w100">
                                    <thead>
                                        <tr>
                                            <th style="width: 20px;"></th>
                                            <th style="width: 10%;">Project</th>
                                            <th style="width: calc(20% - 20px);">Code Studio Name</th>
                                            <th style="width: 8%;">Owner</th>
                                            <th style="width: 8%;">Created on</th>
                                            <th style="width: 8%;">Created by</th>
                                            <th style="width: 8%;">State</th>
                                            <th style="width: 15%;">Webapps</th>
                                            <th style="width: 15%;">Users</th>
                                            <th style="width: 8%;">Last image</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="item in flatUsageList">
                                            <td>
                                                <i ng-if="item.$idx===0 && item.$count>1"
                                                   ng-class="{'icon-chevron-up':item.$expanded, 'icon-chevron-down':!item.$expanded}"
                                                   ng-click="toggleUsage(item.projectKey)"/>
                                            </td>
                                            <td><span ng-if="item.$idx===0">{{ item.projectKey }}</span></td>
                                            <td>
                                                <span ng-if="item.$expanded">
                                                    <a ui-sref="projects.project.code-studios.code-studio.view({projectKey: item.projectKey, codeStudioObjectId: item.id, codeStudioName: (item.name | slugify)})">
                                                        {{ item.name || '(' + item.id + ')' }}
                                                    </a>
                                                </span>
                                                <span ng-if="!item.$expanded">{{ item.$count + ' use' | plurify: item.$count }}</span>
                                            </td>
                                            <td><span ng-if="item.$expanded">{{item.owner}}</span></td>
                                            <td><span ng-if="item.$expanded && item.createdOn > 0">{{ item.createdOn | friendlyDate }}</span></td>
                                            <td><span ng-if="item.$expanded">{{ item.createdBy }}</span></td>
                                            <td>
                                                <span ng-if="item.$expanded && item.running" class="started">
                                                    <i class="icon-play"/> started
                                                </span>
                                                <span ng-if="item.$expanded && !item.running" class="stopped">
                                                    <i class="icon-stop"/> stopped
                                                </span>
                                            </td>
                                            <td>
                                                <span ng-if="item.currentUses.webapps.length===0">
                                                    no webapps
                                                </span>
                                                <span ng-if="!item.$expanded && item.currentUses.webapps.length>0">
                                                    {{ item.currentUses.webapps.length }} {{'webapp' | plurify:item.currentUses.webapps.length }}
                                                </span>
                                                <span ng-if="item.$expanded && item.currentUses.webapps.length>0">
                                                    {{ getFirstItems(item.currentUses.webapps, 'name', 5) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span ng-if="item.currentUses.users.length===0">
                                                    no users
                                                </span>
                                                <span ng-if="!item.$expanded && item.currentUses.users.length>0">
                                                    {{ item.currentUses.users.length }} {{'user' | plurify:item.currentUses.users.length }}
                                                </span>
                                                <span ng-if="item.$expanded && item.currentUses.users.length>0">
                                                    {{ getFirstItems(item.currentUses.users, 'login', 5) }}
                                                </span>
                                            </td>
                                            <td class="code-studio-template--last-image">
                                                <span ng-if="item.$expanded && item.running"
                                                      ng-class="{'outdated':isOutdated(item)}">
                                                    {{ isOutdated(item) ? 'no' : 'yes' }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="empty-list-cta" ng-if="uiState.usage.projects.length === 0">
                                <p>This template is not used yet.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<h1 class="noflex">
                        <span>History</span>
                    </h1>