Skip to content
This repository was archived by the owner on Mar 8, 2024. It is now read-only.

Update logic start #47

Merged
merged 17 commits into from
Sep 8, 2022
Merged

Update logic start #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
351e735
Update logic start
lumburovskalina Sep 5, 2022
7d6a98b
Merge remote-tracking branch 'origin/dev' into update-logic
Sep 6, 2022
05d04aa
Modal for version overview and added navigation to modal for steps up…
lumburovskalina Sep 6, 2022
b704a8e
Merge branch 'update-logic' of github.com:code-kern-ai/refinery-ui in…
lumburovskalina Sep 6, 2022
91c6ddb
Renamed checked version to remote version and added tabs for OS
lumburovskalina Sep 6, 2022
c58691c
Steps for update added
lumburovskalina Sep 6, 2022
aeb3282
Added new fields for checking updates
lumburovskalina Sep 6, 2022
1869def
Sorted array,align left and scrollable modal body
lumburovskalina Sep 6, 2022
43c4fc6
Added tooltips for tabs on how to update
lumburovskalina Sep 6, 2022
5d2d2f2
Request called only once
lumburovskalina Sep 6, 2022
c8fffcb
Improvements on query for has updates and tooltip green on steps
lumburovskalina Sep 7, 2022
2be90f5
Added statis variable for calling function only once
lumburovskalina Sep 7, 2022
879f2ce
Modal sizes fixed
lumburovskalina Sep 7, 2022
a81662c
Icons alignment and data-tip changed to Version overview
lumburovskalina Sep 7, 2022
01016ec
Returned untentionally removed tooltip
lumburovskalina Sep 7, 2022
8c3a494
Removed commented code
lumburovskalina Sep 7, 2022
fe5a699
Dropdown for models on smaller sizes
lumburovskalina Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 199 additions & 3 deletions src/app/base/components/sidebar-pm/sidebar-pm.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,16 @@
</button>
</div>
<div class="flex-shrink-0 flex py-6 justify-center">
<a data-tip="Changelog" target="_blank" rel="noopener noreferrer"
class="z-50 tooltip tooltip-right cursor-pointer select-none text-white"
href="https://docs.kern.ai/changelog">v1.1.1</a>
<label data-tip="Version overview" for="version-overview" (click)="requestVersionOverview()"
class="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center">v1.1.1
<svg *ngIf="hasUpdates" xmlns="http://www.w3.org/2000/svg" data-tip="Newer version available"
class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 tooltip tooltip-right align-top ml-1 mt-px" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</label>
</div>
</div>
</div>
Expand All @@ -206,4 +213,193 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</div>

<input #versionOverviewModal type="checkbox" id="version-overview" class="modal-toggle">
<div class="modal">
<div class="modal-box text-black bg-white justify-center modal-configuration text-center">
<div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
Version overview

<a class="text-green-800 text-base font-medium ml-3" href="https://docs.kern.ai/changelog" target="_blank">
<span class="leading-5">Changelog</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>

<div class="inline-block min-w-full align-middle mt-3" *ngIf="versionOverview">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg scrollable-size">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">
Service</th>
<th scope="col"
class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
Installed version</th>
<th scope="col"
class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
Remote version</th>
<th scope="col"
class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
Last checked</th>
<th scope="col"
class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
Link</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr *ngFor="let service of versionOverview">
<td class="text-left px-3 py-2 text-sm text-gray-500">
{{service.service}}
</td>
<td class="text-center px-3 py-2 text-sm text-gray-500">
{{service.installedVersion}}
</td>
<td class="text-center px-3 py-2 text-sm text-gray-500">
<div class="flex flex-row items-center justify-center">
<div class="mr-2">{{service.remoteVersion}}</div>
<div *ngIf="service.remoteHasNewer" class="tooltip tooltip-right" data-tip="Newer version available">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 align-top" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg></div>
</div>
</td>
<td class="text-center px-3 py-2 text-sm text-gray-500">
{{service.parseDate}}
</td>
<td class="text-center px-3 py-2 text-sm text-gray-500">
<a [href]="service.link" target="_blank" class="h4 w-4 m-auto block"
style="padding:0px"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 m-auto"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<kern-loading *ngIf="versionOverview == null" color="yellow" class="mt-3"></kern-loading>

<div class="modal-action">
<label (click)="howToUpdate()" *ngIf="!isManaged"
class="mr-2 bg-green-100 text-green-700 border border-green-400 text-xs font-semibold px-4 py-2 rounded-md cursor-pointer hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">How to update</label>
<label for="version-overview"
class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
</div>
</div>
</div>

<input #stepsUpdate type="checkbox" id="steps-update" class="modal-toggle">
<div class="modal">
<div class="modal-box text-black bg-white justify-center modal-sizes">
<div class="text-center justify-center text-lg leading-6 text-gray-900 font-medium">
How to update
</div>

<div class="flex border-b-2 border-b-gray-200 max-w-full text-center overflow-visible">
<div (click)="toggleTabs(0)"
[ngClass]="openTab == 0 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
<span class="tooltip tooltip-bottom tooltip-margin border-dotted" data-tip="Linux/Mac">Bash users</span>
</div>
<div (click)="toggleTabs(1)"
[ngClass]="openTab == 1 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
<span class="tooltip tooltip-bottom border-dotted" data-tip="Installed refinery with pip">CLI users</span>
</div>
<div (click)="toggleTabs(2)"
[ngClass]="openTab == 2 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
<span class="tooltip tooltip-bottom border-dotted" data-tip="Windows terminal">cmd</span>
</div>
<div (click)="toggleTabs(3)"
[ngClass]="openTab == 3 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
<span class="tooltip tooltip-bottom border-dotted" data-tip="Windows from File Explorer">Executing from explorer</span>
</div>
</div>

<div class="mt-3 px-5 h-40">
<ng-container [ngSwitch]="openTab">
<ng-template [ngSwitchCase]="0">
<ol class="font-dmMono">
<li>Open a Terminal</li>
<li>Change to refinery directory (using cd) -
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ cd /path/to/refinery</span>
</li>
<li>Run the update script -
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$
<span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('./update')">./update</span>
</span>
</li>
</ol>
</ng-template>
<ng-template [ngSwitchCase]="1">
<ol class="font-dmMono">
<li>Open a Terminal</li>
<li>Change to refinery directory
<ol class="list-letters px-8">
<li>Linux/Mac -
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ cd path/to/refinery</span>
</li>
<li>Windows -
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">cd path\to\refinery</span>
</li>
</ol>
</li>
<li>
Run the CLI update command
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$
<span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('refinery update')">refinery update</span>
</span>
</li>
</ol>
</ng-template>
<ng-template [ngSwitchCase]="2">
<ol class="font-dmMono">
<li>Open a Terminal</li>
<li>Change to refinery directory
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">cd path\to\refinery</span>
</li>
<li>Run the update script -
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">
<span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
</span>
</li>
</ol>
</ng-template>
<ng-template [ngSwitchCase]="3">
<ol class="font-dmMono">
<li>Open the File Explorer</li>
<li>Navigate to the refinery directory</li>
<li>Launch the update script by double-clicking
<span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">
<span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
</span>
</li>
</ol>
</ng-template>
</ng-container>
</div>

<div class="modal-action">
<label (click)="back()"
class="bg-white text-gray-700 text-xs font-semibold mr-2 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Go back</label>
<label for="steps-update"
class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
</div>
</div>
</div>
38 changes: 38 additions & 0 deletions src/app/base/components/sidebar-pm/sidebar-pm.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,41 @@
.overflow-initial {
overflow: initial;
}

.border-bottom {
border-bottom: 1px solid #4F46E5;
}

ol {
list-style: decimal;
li {
margin-top: 8px;
}
}

ol.list-letters {
list-style-type: lower-alpha !important;
}

.scrollable-size {
max-height: calc(100vh - 230px);
overflow-y: auto;
}

.tooltip-margin::before {
margin-left: 8px;
}

.border-dotted {
border-bottom: 2px dotted #22c55e;
}

.modal-sizes {
min-width: 750px;
}

@media (max-width: 1024px) {
.modal-sizes {
min-width: 400px;
}
}
73 changes: 70 additions & 3 deletions src/app/base/components/sidebar-pm/sidebar-pm.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,19 @@ import {
transition,
trigger,
} from '@angular/animations';
import { Component, Inject, EventEmitter, OnInit, Output, Input, HostListener } from '@angular/core';
import { Component, Inject, EventEmitter, OnInit, Output, Input, HostListener, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Observable, Subscription, timer } from 'rxjs';
import { first, tap } from 'rxjs/operators';
import { AuthApiService } from '../../services/auth-api.service';
import { OrganizationApolloService } from '../../services/organization/organization-apollo.service';
import { RouteService } from '../../services/route.service';
import { DOCUMENT } from '@angular/common';
import { ProjectApolloService } from '../../services/project/project-apollo.service';
import { ConfigApolloService } from '../../services/config/config-apollo.service';
import { dateAsUTCDate } from 'src/app/util/helper-functions';
import { ConfigManager } from '../../services/config-service';
import { ConfigService } from 'aws-sdk';


@Component({
Expand Down Expand Up @@ -60,13 +64,21 @@ export class SidebarPmComponent implements OnInit {
isFullscreen: boolean = false;
@Output() firstName = new EventEmitter<Observable<any>>();
toggleClass = 'ft-maximize';
versionOverview: any[] = [];
@ViewChild('versionOverviewModal', { read: ElementRef }) versionOverviewModal: ElementRef;
@ViewChild('stepsUpdate', { read: ElementRef }) stepsUpdate: ElementRef;
openTab: number = 0;
isManaged: boolean = true;
hasUpdates: boolean;
private static initialConfigRequest: boolean = false;

constructor(
private organizationService: OrganizationApolloService,
private routeService: RouteService,
private activatedRoute: ActivatedRoute,
private auth: AuthApiService,
private projectApolloService: ProjectApolloService,
private configService: ConfigApolloService,
@Inject(DOCUMENT) private document: any
) { }

Expand All @@ -89,6 +101,30 @@ export class SidebarPmComponent implements OnInit {
})
)
.subscribe());

if(!SidebarPmComponent.initialConfigRequest) {
this.requestVersionOverview();
SidebarPmComponent.initialConfigRequest = true;
}
this.checkIfManagedVersion();
}

requestVersionOverview() {
this.versionOverview = null;
this.configService
.getVersionOverview()
.pipe(first())
.subscribe((versionOverview) => {
this.versionOverview = versionOverview;
this.versionOverview.forEach((version)=> {
version.parseDate = this.parseUTC(version.lastChecked);
});
this.versionOverview.sort((a, b) => a.service.localeCompare(b.service));
this.configService
.hasUpdates()
.pipe(first())
.subscribe((hasUpdates) => this.hasUpdates = hasUpdates);
});
}

onDestroy() {
Expand Down Expand Up @@ -161,4 +197,35 @@ export class SidebarPmComponent implements OnInit {

}
}

parseUTC(utc: string) {
const utcDate = dateAsUTCDate(new Date(utc));
return utcDate.toLocaleString();
}

howToUpdate() {
this.versionOverviewModal.nativeElement.checked = false;
this.stepsUpdate.nativeElement.checked = true;
}

back() {
this.stepsUpdate.nativeElement.checked = false;
this.versionOverviewModal.nativeElement.checked = true;
}

toggleTabs(index: number) {
this.openTab = index;
}

copyToClipboard(textToCopy) {
navigator.clipboard.writeText(textToCopy);
}

checkIfManagedVersion() {
if (!ConfigManager.isInit()) {
timer(250).subscribe(() => this.checkIfManagedVersion());
return;
}
this.isManaged = ConfigManager.getIsManaged();
}
}
18 changes: 18 additions & 0 deletions src/app/base/services/config/config-apollo.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,22 @@ export class ConfigApolloService {
.pipe(map((result) => JSON.parse(result['data']['getBlackWhiteDemo'])));
}

getVersionOverview() {
return this.apollo
.query({
query: queries.GET_VERSION_OVERVIEW,
fetchPolicy: 'no-cache',
})
.pipe(map((result) => result['data']['versionOverview']));
}

hasUpdates() {
return this.apollo
.query({
query: queries.GET_HAS_UPDATES,
fetchPolicy: 'no-cache',
})
.pipe(map((result) => result['data']['hasUpdates']));
}

}
Loading