API 관련 VIEW 제작

jhjang

2021-10-26 d7a8eb9629a8de8b7157508d0c64c312a432d9d2

API 관련 VIEW 제작

 src/main/webapp/i18n/ko/global.json

@@ -611,6 +611,7 @@
        "priority": "우선 순위",
        "importance": "중요도",
        "assignee": "담당자",
        "assigneeTeam" : "담당부서",
        "register": "등록자",
        "startDate": "시작일",
        "endDate": "종료일",
@@ -745,5 +746,17 @@
    },
    "calendar": {
      "calendarTitle": "캘린더"
    },
    "api" : {
        "auth" : "API 인증",
        "setting" : "API 설정",
        "monitor" : "API 모니터링",
        "application" : "어플리케이션 이름",
        "token" : "토큰",
        "apiKey": "API 토큰 등록",
        "delete" : "토큰 삭제",
        "create" : "토큰 생성",
        "example" : "사용 예시",
        "columnSetting" : "기본값 설정"
    }
}

 src/main/webapp/index.html

@@ -42,6 +42,10 @@
    <link type="text/css" rel="stylesheet" href="custom_components/js-html-diff/js-html-diff.css">
    <link type="text/css" rel="stylesheet" href="assets/styles/main.css?version=4.0.34">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500">

    <!-- 구글차트 -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <!--    google font -->
    <link rel="shortcut icon" href="assets/images/favicon.png"/> <!-- 이미지 아이콘 -->


 src/main/webapp/scripts/app/api/api.js

New file
@@ -0,0 +1,84 @@
/**
 * Created by maprex on 2021-10-26
 */
'use strict';

define(['app'],
    function (app) {
        app.config(function ($stateProvider) {
            $stateProvider
                .state('api', {
                    abstract : true,
                    url : "/api",
                    templateUrl : "views/common/app.html",
                    resolve : {
                        authorize : function (Auth) {
                            return Auth.authorize();
                        },
                        translatePartialLoader : function ($translate, $translatePartialLoader) {
                            $translatePartialLoader.addPart('global');

                            return $translate.refresh();
                        }
                    }
                })
                .state('api.auth', {
                    url : '/auth',
                    data : {
                        authorities : ['CUSTOM_FIELD_TOTAL']
                    },
                    templateUrl : 'views/api/apiAuth.html',
                    controller : "apiAuthController",
                    resolve : {
                        loadController : ["$q", function ($q) {
                            var deferred = $q.defer();
                            require(["apiAuthController",
                                , 'formSubmit', 'jsShortCut', 'inputRegex'], function () {
                                deferred.resolve();
                            });

                            return deferred.promise;
                        }]
                    }
                })
                .state('api.setting', {
                    url : '/setting',
                    data : {
                        authorities : ['CUSTOM_FIELD_TOTAL']
                    },
                    templateUrl : 'views/api/apiSetting.html',
                    controller : "apiSettingController",
                    resolve : {
                        loadController : ["$q", function ($q) {
                            var deferred = $q.defer();
                            require(["apiSettingController",
                                , 'formSubmit', 'jsShortCut', 'inputRegex'], function () {
                                deferred.resolve();
                            });

                            return deferred.promise;
                        }]
                    }
                })
                .state('api.monitor', {
                    url : '/monitor',
                    data : {
                        authorities : ['CUSTOM_FIELD_TOTAL']
                    },
                    templateUrl : 'views/api/apiMonitor.html',
                    controller : "apiMonitorController",
                    resolve : {
                        loadController : ["$q", function ($q) {
                            var deferred = $q.defer();
                            require(["apiMonitorController",
                                , 'formSubmit', 'jsShortCut', 'inputRegex'], function () {
                                deferred.resolve();
                            });

                            return deferred.promise;
                        }]
                    }
                });

        })
    });

 src/main/webapp/scripts/app/api/apiAuth.controller.js

New file
@@ -0,0 +1,26 @@
/**
 * Created by maprex on 2021-10-26
 */
'use strict';

define([
        'app', 'angular'
    ],
    function (app, angular) {
        app.controller('apiAuthController', ['$scope', '$rootScope', '$log', '$resourceProvider', 'SweetAlert', '$timeout', '$filter',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) {

                $scope.fn = {

                };

                $scope.vm = {
                    form : {
                        name : "홈페이지 변조 탐지 시스템",
                        token : "77751b541212de21a44f87024174d3bd"
                    }
                };


            }]);
    });

 src/main/webapp/scripts/app/api/apiMonitor.controller.js

New file
@@ -0,0 +1,25 @@
/**
 * Created by maprex on 2021-10-26
 */
'use strict';

define([
        'app', 'angular'
    ],
    function (app, angular) {
        app.controller('apiMonitorController', ['$scope', '$rootScope', '$log', '$resourceProvider','SweetAlert', '$timeout', '$filter',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) {

                $scope.fn = {

                };

                $scope.vm = {
                    form : {

                    }
                };


            }]);
    });

 src/main/webapp/scripts/app/api/apiSetting.controller.js

New file
@@ -0,0 +1,25 @@
/**
 * Created by maprex on 2021-10-26
 */
'use strict';

define([
        'app', 'angular'
    ],
    function (app, angular) {
        app.controller('apiSettingController', ['$scope', '$rootScope', '$log', '$resourceProvider', 'SweetAlert', '$timeout', '$filter',
            function ($scope, $rootScope, $log, $resourceProvider, SweetAlert, $timeout, $filter) {

                $scope.fn = {

                };

                $scope.vm = {
                    form : {

                    }
                };


            }]);
    });

 src/main/webapp/scripts/main.js

@@ -317,7 +317,13 @@
        'issueListTimelineController' : 'app/issue/issueListTimeline.controller',   // 이슈 간트차트
        'projectTimelineController' :'app/project/projectTimeline.controller',   // 프로젝트 간트차트
        'ganttService' : 'components/gantt/gantt.service', // 간트에 관련된 통신을 담당한다.
        'chartLoader' : 'components/gantt/googleChartLoader'    // 차트 그리기 api(구글차트)
        'chartLoader' : 'components/gantt/googleChartLoader',    // 차트 그리기 api(구글차트)

        /* api */
        'apiRoute' : 'app/api/api',  //  api route 정보
        'apiAuthController' :'app/api/apiAuth.controller',   // api 인증 컨트롤러
        'apiSettingController' : 'app/api/apiSetting.controller',    // api 설정 컨트롤러
        'apiMonitorController' : 'app/api/apiMonitor.controller', // api 모니터링 컨트롤러
    },
    shim : {
        'jquery-ui' : {
@@ -504,6 +510,7 @@
    'qnaRoute',
    'supportRoute',
    'ganttRoute',
    'apiRoute',
    'ganttService',
    'workflowService',
    'issueSearchService',

 src/main/webapp/views/api/apiAuth.html

New file
@@ -0,0 +1,52 @@
<div class="row">
    <div class="col-sm-12">
        <div class="element-wrapper">
            <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')">
            </div>
            <h6 class="element-header" translate="api.apiKey">
                OWL API 사용자 등록
            </h6>

            <div class="element-box">
                <form role="form" name="issueStatusAddForm">
                    <div class="form-group">
                        <label for="apiApplicationForm1"><span translate="api.application">어플리케이션 이름</span> <code class="highlighter-rouge">*</code></label>
                        <input id="apiApplicationForm1"
                               name="name"
                               type="text"
                               class="form-control"
                               autofocus
                               kr-input
                               autocomplete="off"
                               maxlength="50"
                               ng-model="vm.form.name"
                               ng-maxlength="20"
                               required>
                    </div>

                    <div class="form-group">
                        <label for="apiApplicationForm2"><span translate="api.token">토큰</span></label>
                        <div class="input-group">
                            <input id="apiApplicationForm2"
                                   type="text"
                                   name="token"
                                   class="form-control"
                                   disabled
                                   ng-model="vm.form.token"
                                   required>
                        </div>
                    </div>
                </form>

                <div class="modal-footer buttons-on-right">
                    <button type="button" class="btn btn-md btn-grey" ng-click="fn.cancel()"><span translate="api.delete">취소</span></button>
                    <button type="button" class="btn btn-md btn-primary bold"
                            js-short-cut
                            js-short-cut-action="(fn.formCheck(issueStatusAddForm.$invalid) || $root.spinner) ? null : fn.formSubmit()"
                            ng-click="fn.formSubmit()"><span translate="api.create">생성</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

 src/main/webapp/views/api/apiMonitor.html

New file
@@ -0,0 +1,59 @@
<script type="text/javascript">
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', '날짜');
        data.addColumn('number', '홈페이지 변조 탐지');
        data.addColumn('number', '경유지 탐지');
        data.addColumn('number', '일감 조회');

        data.addRows([
            [1,  37.8, 80.8, 41.8],
            [2,  30.9, 69.5, 32.4],
            [3,  25.4,   57, 25.7],
            [4,  11.7, 18.8, 10.5],
            [5,  11.9, 17.6, 10.4],
            [6,   8.8, 13.6,  7.7],
            [7,   7.6, 12.3,  9.6],
            [8,  12.3, 29.2, 10.6],
            [9,  16.9, 42.9, 14.8],
            [10, 12.8, 30.9, 11.6],
            [11,  5.3,  7.9,  4.7],
            [12,  6.6,  8.4,  5.2],
            [13,  4.8,  6.3,  3.6],
            [14,  4.2,  6.2,  3.4]
        ]);

        var options = {
            chart: {
                title: '일감 유형별 API 사용 현황',
                subtitle: '최근 15일'
            },
            width: 900,
            height: 500
        };

        var chart = new google.charts.Line(document.getElementById('linechart_material'));

        chart.draw(data, google.charts.Line.convertOptions(options));
    }
</script>

<div class="row">
    <div class="col-sm-12">
        <div class="element-wrapper">
            <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')">
            </div>
            <h6 class="element-header" translate="api.monitor">
                모니터링
            </h6>

            <div class="element-box">
                <div id="linechart_material"></div>
            </div>
        </div>
    </div>
</div>

 src/main/webapp/views/api/apiSetting.html

New file
@@ -0,0 +1,274 @@
<div class="row">
    <div class="col-sm-12">
        <div class="element-wrapper">
            <div class="element-actions" ng-if="$root.checkMngPermission('USER_PERMISSION_MNG_ISSUE_STATUS')">
            </div>
            <h6 class="element-header" translate="api.columnSetting">
                설정
            </h6>

            <!--
            <div class="os-tabs-w">
                <div class="os-tabs-controls">
                    <ul class="nav nav-tabs upper">
                        <li class="nav-item">
                            <a class="nav-link cursor" translate="api.example">사용 예시</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="element-box">
            </div>
-->
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group mb10">
                        <label for="issueAddForm4" class="issue-label"> <span
                                translate="issue.issueType">이슈 타입</span>
                        </label>
                        <select id="issueAddForm4"
                                name="issueType"
                                class="form-control input-sm issue-select-label"
                                ng-model="vm.form.issueTypeId"
                                ng-change="fn.getIssueTypeCustomFields()"
                                ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }"
                                required>
                            <option ng-style="{ 'color' : '#353535' }" value="">홈페이지 변조 감지
                            </option>
                            <option ng-style="{ 'color' : '#353535' }" value="">경유지 탐지
                            </option>
                            <option ng-repeat="issueType in vm.issueTypes"
                                    ng-style="{ 'color' : issueType.color, 'font-weight': 600 }"
                                    value="{{issueType.id}}">●&nbsp;{{issueType.name}}
                            </option>
                        </select>
                    </div>
                </div>

            </div>

            <div class="element-box">

                <form role="form" name="issueAddForm">
                    <div class="form-group mb10">
                        <label for="issueAddForm1" class="issue-label"><span translate="issue.issueTitle">일감 제목</span> </label>
                        <input id="issueAddForm1"
                               class="form-control input-sm"
                               ng-model="vm.form.title"
                               name="title"
                               required
                               kr-input
                               value="홈페이지 변조 감지 건"
                               maxlength="300"
                               autocomplete="off"
                               autofocus
                               owl-auto-focus>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="form-group mb10">
                                <label class="issue-label"> <span translate="common.project">프로젝트</span> </label>
                                <select id="issueAddForm6"
                                        name="issueType"
                                        class="form-control input-sm issue-select-label"
                                        ng-model="vm.form.issueTypeId"
                                        ng-change="fn.getIssueTypeCustomFields()"
                                        ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }"
                                        required>
                                    <option ng-style="{ 'color' : '#353535' }" value="">홈페이지 변조 감지
                                    </option>
                                    <option ng-style="{ 'color' : '#353535' }" value="">MCF
                                    </option>
                                    <option ng-repeat="issueType in vm.issueTypes"
                                            ng-style="{ 'color' : issueType.color, 'font-weight': 600 }"
                                            value="{{issueType.id}}">●&nbsp;{{issueType.name}}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-8 bdl1">
                            <div class="row">

                                <div class="col-md-4">
                                    <div class="form-group mb10">
                                        <label for="issueAddForm2" class="issue-label">
                                            <span translate="common.priority">우선 순위</span>
                                        </label>
                                        <select id="issueAddForm2"
                                                name="priority"
                                                class="form-control input-sm issue-select-label"
                                                ng-model="vm.form.priorityId"
                                                ng-style="{ 'color' : fn.getOptionColor(vm.priorities, vm.form.priorityId) }"
                                                required>
                                            <option value="" ng-style="{ 'color' : '#353535' }">
                                                <span >보통</span>
                                            </option>
                                            <option value="" ng-style="{ 'color' : '#353535' }">
                                                <span >높음</span>
                                            </option>
                                            <option value="" ng-style="{ 'color' : '#353535' }">
                                                <span >낮음</span>
                                            </option>
                                            <option ng-repeat="priority in vm.priorities"
                                                    ng-style="{ 'color' : priority.color, 'font-weight': 600 }"
                                                    value="{{priority.id}}"
                                                    translate="{{priority.name}}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb10">
                                        <label for="issueAddForm3" class="issue-label"> <span
                                                translate="common.importance">중요도</span> </label>
                                        <select id="issueAddForm3"
                                                name="severity"
                                                class="form-control input-sm issue-select-label"
                                                ng-model="vm.form.severityId"
                                                ng-style="{ 'color' : fn.getOptionColor(vm.severities, vm.form.severityId) }"
                                                required>
                                            <option value="" ng-style="{ color : '#353535' }">
                                                <span>보통</span>
                                            </option>
                                            <option value="" ng-style="{ color : '#353535' }">
                                                <span>높음</span>
                                            </option>
                                            <option value="" ng-style="{ color : '#353535' }">
                                                <span>낮음</span>
                                            </option>
                                            <option ng-repeat="severity in vm.severities"
                                                    ng-style="{ color : severity.color, 'font-weight': 600 }"
                                                    value="{{severity.id}}"
                                                    translate="{{severity.name}}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="form-group mb10">
                        <label class="issue-label"><span translate="common.content">내용</span></label>
                        <summernote
                                class="summernote"
                                lang="ko-KR"
                                summer-note-auto-focus
                                ng-model="vm.form.description"
                                data-editor="vm.summerNote.editor"
                                data-editable="vm.summerNote.editable"
                                on-image-upload="fn.imageUpload(files)"
                                target=".note-editable"></summernote>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group mb10">
                                <label for="issueAddForm5" class="issue-label"> <span translate="common.period">기간</span>
                                </label>
                                <input id="issueAddForm5"
                                       tabindex="-1"
                                       type="text"
                                       readonly
                                       class="form-control cursor"
                                       placeholder="{{'issue.clickToSelectDate' | translate}}"
                                       ng-model="vm.form.startCompleteDateRange"
                                       modal-form-auto-scroll
                                       date-format="YYYY-MM-DD"
                                       parent-el="'#createdWidget'"
                                       date-range-picker>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div id="createdWidget" class="bootstrap-datepicker"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="form-group mb10">
                                <div class="form-group mb10">
                                    <label class="issue-label"> <span translate="common.assigneeTeam">담당부서</span> </label>
                                    <select id="issueAddForm"
                                            name="issueType"
                                            class="form-control input-sm issue-select-label"
                                            ng-model="vm.form.issueTypeId"
                                            ng-change="fn.getIssueTypeCustomFields()"
                                            ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }"
                                            required>
                                        <option value="" ng-style="{ 'color' : '#353535' }"><span>조치용역</span></option>
                                        <option value="" ng-style="{ 'color' : '#353535' }"><span>분석용역</span></option>
                                        <option value="" ng-style="{ 'color' : '#353535' }"><span>상황실</span></option>
                                        <option ng-repeat="issueType in vm.issueTypes"
                                                ng-style="{ 'color' : issueType.color, 'font-weight': 600 }"
                                                value="{{issueType.id}}">●&nbsp;{{issueType.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb10">
                                <div class="form-group mb10">
                                    <label class="issue-label"> <span>업종</span> </label>
                                    <select id="issueAddFormIP"
                                            name="issueType"
                                            class="form-control input-sm issue-select-label"
                                            ng-model="vm.form.issueTypeId"
                                            ng-change="fn.getIssueTypeCustomFields()"
                                            ng-style="{ 'color' : fn.getOptionColor(vm.issueTypes, vm.form.issueTypeId) }"
                                            required>
                                        <option value="" translate="common.selectTarget" ng-style="{ 'color' : '#353535' }"><span>대상 선택</span>
                                        </option>
                                        <option ng-repeat="issueType in vm.issueTypes"
                                                ng-style="{ 'color' : issueType.color, 'font-weight': 600 }"
                                                value="{{issueType.id}}">●&nbsp;{{issueType.name}}
                                        </option>
                                    </select>
                                </div>


                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb10">
                                <div class="form-group mb10">
                                    <label class="issue-label"> <span>도메인</span> </label>
                                    <input id="issueAddForm8"
                                           tabindex="-1"
                                           type="text"
                                           class="form-control cursor"
                                           />

                                </div>


                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb10">
                                <div class="form-group mb10">
                                    <label class="issue-label"> <span>경유지IP</span> </label>
                                    <input id="issueAddForm*"
                                           tabindex="-1"
                                           type="text"
                                           class="form-control cursor"
                                           />
                                </div>


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


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

 src/main/webapp/views/common/sidebar.html

@@ -296,6 +296,7 @@
                </div>
                <span translate="common.project">프로젝트</span></a>
        </li>

        <li class="sub-header" ng-if="$root.checkMngPermissionSettings()">
            <span>custom workflow</span>
        </li>
@@ -375,6 +376,33 @@
                </div>
                <span translate="guide.manageGuide">가이드 관리</span></a>
        </li>

        <li class="sub-header">
            <span>API</span>
        </li>

        <li>
            <a ui-sref="api.auth" tabindex="-1">
                <div class="icon-w">
                    <div class="os-icon os-icon-package"></div>
                </div>
                <span translate="api.auth">API 인증</span></a>
        </li>

        <li>
            <a ui-sref="api.setting" tabindex="-1">
                <div class="icon-w">
                    <div class="os-icon os-icon-package"></div>
                </div>
                <span translate="api.setting">API 설정</span></a>
        </li>
        <li>
            <a ui-sref="api.monitor" tabindex="-1">
                <div class="icon-w">
                    <div class="os-icon os-icon-package"></div>
                </div>
                <span translate="api.monitor">API 모니터링</span></a>
        </li>
    </ul>
<!--    <div class="side-menu-magic" style="padding:10px;width:100%;height:300px;">-->
<!--       <embed  style="width:100%;height:100%;" type="text/html" src="../../assets/clientWeb/clientevent.html">-->