-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'bap-brehme-wulff' into 'main'
Bachelorproject Brehme & Wulff - Snapshots & Annotations & API management See merge request ExplorViz/code/frontend!200
- Loading branch information
Showing
112 changed files
with
4,852 additions
and
373 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <div id='colorPresets' class='dropdown'> | ||
| <a | ||
| class='button-svg-with-hover' | ||
| type='button' | ||
| tabindex='0' | ||
| href='#' | ||
| {{on 'focusout' this.hidePopover}} | ||
| {{on 'click' this.onClick}} | ||
| > | ||
| {{svg-jar 'info-16' class='octicon align-middle'}} | ||
| <BsTooltip @placement='bottom' @triggerEvents='hover'> | ||
| Show additional info | ||
| </BsTooltip> | ||
| <BsPopover id={{this.id}} @title={{@token.name}}> | ||
| <table class='table table-striped' style='width: 100%'> | ||
| <tbody> | ||
| <tr> | ||
| <td>Owner</td> | ||
| <td style='word-break: break-all'> | ||
| {{if (eq @token.owner this.auth.user.sub) 'You' @token.owner}} | ||
| </td> | ||
| <td></td> | ||
| </tr> | ||
| <tr> | ||
| <td>ID</td> | ||
| <td>{{@token.landscapeToken.value}}</td> | ||
| <td> | ||
| <CopyButton | ||
| class='button-svg-with-hover' | ||
| @text={{@token.landscapeToken.value}} | ||
| @onSuccess={{this.onTokenIdCopied}} | ||
| > | ||
| {{svg-jar 'copy-16' class='octicon align-middle'}} | ||
| <BsTooltip @placement='bottom' @triggerEvents='hover'> | ||
| Copy id to clipboard | ||
| </BsTooltip> | ||
| </CopyButton> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </BsPopover> | ||
| </a> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import Component from '@glimmer/component'; | ||
| import ToastHandlerService from 'explorviz-frontend/services/toast-handler'; | ||
| import Auth from 'explorviz-frontend/services/auth'; | ||
| import { inject as service } from '@ember/service'; | ||
| import { action } from '@ember/object'; | ||
| import { TinySnapshot } from 'explorviz-frontend/services/snapshot-token'; | ||
|
|
||
| export default class AdditionalSnapshotInfoComponent extends Component<TinySnapshot> { | ||
| @service('auth') | ||
| auth!: Auth; | ||
|
|
||
| @service('toast-handler') | ||
| toastHandlerService!: ToastHandlerService; | ||
|
|
||
| focusedClicks = 0; | ||
|
|
||
| @action | ||
| // eslint-disable-next-line class-methods-use-this | ||
| onTokenIdCopied() { | ||
| this.toastHandlerService.showSuccessToastMessage( | ||
| 'Token id copied to clipboard' | ||
| ); | ||
| } | ||
|
|
||
| @action | ||
| hidePopover(event: Event) { | ||
| if (this.isMouseOnPopover()) { | ||
| return; | ||
| } | ||
|
|
||
| // Clicks enable us to differentiate between opened and closed popovers | ||
| if (this.focusedClicks % 2 === 1) { | ||
| event.target?.dispatchEvent(new Event('click')); | ||
| } | ||
| this.focusedClicks = 0; | ||
| } | ||
|
|
||
| isMouseOnPopover() { | ||
| const hoveredElements = document.querySelectorAll(':hover'); | ||
|
|
||
| for (const element of hoveredElements) { | ||
| if (element.matches('.popover')) { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| @action | ||
| onClick(event: Event) { | ||
| this.focusedClicks += 1; | ||
| // Prevent click on table row which would trigger to open the visualization | ||
| event.stopPropagation(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| <div class='pb-5 px-5 w-100'> | ||
| <h5 class='text-left mb-3'>API-Tokens</h5> | ||
| <div class='flex-row justify-content-center overflow-scroll'> | ||
| <table class='table table-striped'> | ||
| <thead> | ||
| <tr> | ||
| <th scope='col' {{on 'click' (fn this.sortBy 'name')}}>Name</th> | ||
| <th scope='col'>API Token</th> | ||
| <th | ||
| scope='col' | ||
| {{on 'click' (fn this.sortBy 'createdAt')}} | ||
| >Created</th> | ||
| <th scope='col' {{on 'click' (fn this.sortBy 'expires')}}>Expires</th> | ||
| <th scope='col'></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {{#each | ||
| (sort-by | ||
| (concat this.sortProperty ':' this.sortOrder) 'createdAt' @apiTokens | ||
| ) | ||
| as |apiToken| | ||
| }} | ||
| <tr class='snapshot-selection-row'> | ||
| <th style='width: 40%' scope='row'>{{apiToken.name}} </th> | ||
| <th style='width: 25%' scope='row'>{{apiToken.token}} </th> | ||
| <th scope='row'>{{this.formatDate apiToken.createdAt true}}</th> | ||
| <th scope='row'>{{this.formatDate apiToken.expires}}</th> | ||
| <th scope='row'> | ||
| <ul class='token-selection-icons'> | ||
| <li> | ||
| <div id='colorPresets' class='dropdown'> | ||
| <a | ||
| class='button-svg-with-hover' | ||
| type='button' | ||
| tabindex='0' | ||
| href='#' | ||
| {{on 'click' (fn this.deleteApiToken apiToken)}} | ||
| > | ||
| {{svg-jar 'trash-16' class='octicon align-middle'}} | ||
| <BsTooltip @placement='bottom' @triggerEvents='hover'> | ||
| Delete Snapshot | ||
| </BsTooltip> | ||
| </a> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </th> | ||
| </tr> | ||
| {{else}} | ||
| There are no saved API-Tokens. | ||
| {{/each}} | ||
| <tr> | ||
| <td colspan='5' class='p-1'> | ||
| <div class='d-flex flex-row justify-content-center'> | ||
| <BsButton | ||
| @type='primary' | ||
| class='align-self-center pt-2 px-3' | ||
| {{on 'click' this.openMenu}} | ||
| > | ||
| {{svg-jar 'plus-16' class='octicon'}} | ||
| </BsButton> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <BsModal @open={{this.createToken}} @onHidden={{this.closeMenu}} as |modal|> | ||
| <modal.header> | ||
| <h4 class='modal-title'>Create API Token</h4> | ||
| </modal.header> | ||
| <modal.body> | ||
|
|
||
| <label class='mt-2' for='token'>Name:</label> | ||
| <div class='d-flex justify-content-between'> | ||
| <input | ||
| id='name' | ||
| class='form-control mr-2' | ||
| oninput={{this.updateName}} | ||
| value={{this.name}} | ||
| /> | ||
| </div> | ||
| <label for='token'>API Token:</label> | ||
| <div class='d-flex justify-content-between'> | ||
| <input | ||
| id='token' | ||
| class='form-control mr-2' | ||
| oninput={{this.updateToken}} | ||
| value={{this.token}} | ||
| /> | ||
| </div> | ||
| <label for='token'>Host URL:</label> | ||
| <div class='d-flex justify-content-between'> | ||
| <input | ||
| id='url' | ||
| class='form-control mr-2' | ||
| placeholder='e.g.: https://git.<hostname>.<de/com...>' | ||
| oninput={{this.updateHostUrl}} | ||
| value={{this.hostUrl}} | ||
| /> | ||
| </div> | ||
| <label class='mt-2' for='token'>Expires <i>- Optional:</i> </label> | ||
| <div class='d-flex justify-content-between'> | ||
| <input | ||
| id='date' | ||
| class='form-control mr-2' | ||
| type='date' | ||
| min={{this.today}} | ||
| oninput={{this.updateExpDate}} | ||
| {{!-- value={{this.expDate}} --}} | ||
| /> | ||
| </div> | ||
| </modal.body> | ||
| <modal.footer> | ||
| <BsButton | ||
| @outline={{true}} | ||
| @type='danger' | ||
| @onClick={{this.reset}} | ||
| >Cancel</BsButton> | ||
| <BsButton | ||
| title='Save' | ||
| @type='secondary' | ||
| @outline={{true}} | ||
| @onClick={{(fn this.createApiToken @refreshRoute)}} | ||
| disabled={{this.saveBtnDisabled}} | ||
| >Save</BsButton> | ||
| </modal.footer> | ||
|
|
||
| </BsModal> | ||
| </div> |
Oops, something went wrong.