Skip to content

Commit

Permalink
feat: show env params
Browse files Browse the repository at this point in the history
  • Loading branch information
kungfuboy committed Jul 13, 2022
1 parent 744e0d3 commit 5a211b4
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 80 deletions.
12 changes: 11 additions & 1 deletion src/workbench/browser/src/app/pages/api/api.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,18 @@
</nz-select>
<ng-template #renderTemplate>
<nz-divider></nz-divider>
<a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n>Manage Environment</a>
<a class="text-sx manager-env" nz-button nzType="link" (click)="gotoEnvManager()" i18n
>Manage Environment</a
>
</ng-template>
<span
class="flex items-center justify-center mx-1 icon"
i18n-title
title="Quick look"
(click)="handleShowEnv()"
>
<eo-iconpark-icon name="eyes"></eo-iconpark-icon>
</span>
</div>
</div>
<div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
Expand Down
13 changes: 13 additions & 0 deletions src/workbench/browser/src/app/pages/api/api.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,16 @@ nz-divider {
color: #00785a;
}

.icon {
-webkit-app-region: no-drag;
width: 30px;
height: 30px;
font-size: 1.5em;
color: rgba(0,0,0,0.5);
cursor: pointer;
border-radius: 3px;
transition: all .4s ease;
&:hover {
background-color: rgba(0,0,0,0.05);
}
}
12 changes: 12 additions & 0 deletions src/workbench/browser/src/app/pages/api/api.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import { Message, MessageService } from '../../shared/services/message';
import { ApiService } from './api.service';
import { StorageService } from '../../shared/services/storage';
import { Change } from '../../shared/store/env.state';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { ModalService } from '../../shared/services/modal.service';
import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';

@Component({
selector: 'eo-api',
Expand Down Expand Up @@ -47,6 +50,7 @@ export class ApiComponent implements OnInit, OnDestroy {
private messageService: MessageService,
private storage: StorageService,
private remoteService: RemoteService,
private modalService: ModalService,
private store: Store
) {}

Expand Down Expand Up @@ -165,5 +169,13 @@ export class ApiComponent implements OnInit, OnDestroy {
});
}

handleShowEnv() {
const modal: NzModalRef = this.modalService.create({
nzTitle: 'Environment',
nzContent: EnvListComponent,
nzClosable: true,
nzFooter: null,
});
}
handleEnvSelectStatus(event: boolean) {}
}
43 changes: 32 additions & 11 deletions src/workbench/browser/src/app/pages/navbar/navbar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,24 @@
</a>
</div>
<div class="flex items-center">
<span class="icon mx-1 flex items-center justify-center" i18n-title title="Open Settings" (click)="handleShowModal()">
<span
class="flex items-center justify-center mx-1 icon"
i18n-title
title="Open Settings"
(click)="handleShowModal()"
>
<eo-iconpark-icon name="setting-two"></eo-iconpark-icon>
</span>
<!-- <span
i18n-title
class="icon mx-1 flex items-center justify-center"
class="flex items-center justify-center mx-1 icon"
title="{{ dataSourceText }}数据源"
(click)="switchDataSource()"
>
<eo-iconpark-icon [name]="isRemote ? 'link-cloud-sucess' : 'link-cloud-faild'"></eo-iconpark-icon>
</span> -->
<span class="icon mx-1 flex items-center justify-center" nz-dropdown [nzDropdownMenu]="menu">
<eo-iconpark-icon name="help">
</eo-iconpark-icon>
<span class="flex items-center justify-center mx-1 icon" nz-dropdown [nzDropdownMenu]="menu">
<eo-iconpark-icon name="help"> </eo-iconpark-icon>
</span>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
Expand All @@ -29,15 +33,32 @@
</ul>
</nz-dropdown-menu>
<div *ngIf="!OS_TYPE.includes('mac') && isElectron">
<span nz-tooltip i18n-nzTooltipTitle nzTooltipTitle="Minimize" nzTooltipPlacement="left" class="iconfont icon-jianhao mr10 fs24 cp"
(click)="minimize()">
<span
nz-tooltip
i18n-nzTooltipTitle
nzTooltipTitle="Minimize"
nzTooltipPlacement="left"
class="iconfont icon-jianhao mr10 fs24 cp"
(click)="minimize()"
>
</span>
<span nz-tooltip i18n-nzTooltipTitle [nzTooltipTitle]="isMaximized ? 'Restore' : 'Maximize'" nzTooltipPlacement="left"
<span
nz-tooltip
i18n-nzTooltipTitle
[nzTooltipTitle]="isMaximized ? 'Restore' : 'Maximize'"
nzTooltipPlacement="left"
class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
(click)="toggleMaximize()">
(click)="toggleMaximize()"
>
</span>
<span nz-tooltip i18n-nzTooltipTitle nzTooltipTitle="Close" nzTooltipPlacement="left" class="iconfont icon-guanbi pr15 fs24 cp"
(click)="close()">
<span
nz-tooltip
i18n-nzTooltipTitle
nzTooltipTitle="Close"
nzTooltipPlacement="left"
class="iconfont icon-guanbi pr15 fs24 cp"
(click)="close()"
>
</span>
</div>
<div *ngIf="!isElectron">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Component, OnInit } from '@angular/core';
import { it_IT } from 'ng-zorro-antd/i18n';
import { StorageRes, StorageResStatus } from '../../../shared/services/storage/index.model';
import { StorageService } from '../../services/storage';

@Component({
selector: '',
template: ` <span class="text-gray-400">Environment variable</span>
<!-- <span class="my-2">{{ item.name }}</span> -->
<div *ngFor="let it of envParams" class="flex items-center justify-between h-8">
<span class="w-1/3 text-gray-500">{{ it.name }}</span>
<span class="w-2/3 text-gray-500">{{ it.description }}</span>
</div>`,
styleUrls: [],
})
export class EnvListComponent implements OnInit {
envParams: any = [];
constructor(private storage: StorageService) {}
async ngOnInit() {
const uuid = Number(localStorage.getItem('env:selected')) || null;
if (uuid == null) {
this.envParams = [];
return;
}
const envList = (await this.getAllEnv()) as [];
const [env]: any[] = envList.filter((it: any) => it.uuid === uuid);
console.log(env, envList);
this.envParams = env.parameters.filter((it: any) => it.name && it.value);
}
getAllEnv(uuid?: number) {
const projectID = 1;
return new Promise((resolve) => {
this.storage.run('environmentLoadAllByProjectID', [projectID], async (result: StorageRes) => {
if (result.status === StorageResStatus.success) {
return resolve(result.data || []);
}
return resolve([]);
});
});
}
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
<div class="flex flex-col">
<div class="flex items-center justify-between h-10 px-2 header">
<span class="font-bold" i18n>Environment</span>
<div class="flex items-center justify-center text-base btn shrink-0 h-7" (click)="handleAddEnv()" nz-tooltip
i18n-nzTooltipTitle="@@New Environment" nzTooltipTitle="New Environment">
<eo-iconpark-icon name="plus">
</eo-iconpark-icon>
<div
class="flex items-center justify-center text-base btn shrink-0 h-7"
(click)="handleAddEnv()"
nz-tooltip
i18n-nzTooltipTitle="@@New Environment"
nzTooltipTitle="New Environment"
>
<eo-iconpark-icon name="plus"> </eo-iconpark-icon>
</div>
</div>
<div *ngFor="let item of envList" class="flex items-center justify-between p-2 env-item">
<span class="flex-1 name" (click)="handleEditEnv(item.uuid)">{{ item.name }}</span>
<a nz-popconfirm i18n-nzPopconfirmTitle nzPopconfirmTitle="Are you sure you want to delete?"
(nzOnConfirm)="handleDeleteEnv($event, item.uuid)">
<eo-iconpark-icon name="delete">
</eo-iconpark-icon>
<a
nz-popconfirm
i18n-nzPopconfirmTitle
nzPopconfirmTitle="Are you sure you want to delete?"
(nzOnConfirm)="handleDeleteEnv($event, item.uuid)"
>
<eo-iconpark-icon name="delete"> </eo-iconpark-icon>
</a>
</div>
</div>
Expand All @@ -33,11 +40,13 @@
</nz-form-control>
</nz-form-item>
<p class="mb-[8px]" i18n>Environment variable:can be referenced by using {{ varName }} in Document or Test</p>
<eo-table [(model)]="envInfo.parameters" [columns]="envListColumns"
[dataModel]="{ name: '', value: '', description: '' }">
<eo-table
[(model)]="envInfo.parameters"
[columns]="envListColumns"
[dataModel]="{ name: '', value: '', description: '' }"
>
<ng-template cell="action" let-scope="scope" let-index="index">
<eo-iconpark-icon class="cursor-pointer" name="delete">
</eo-iconpark-icon>
<eo-iconpark-icon class="cursor-pointer" name="delete"> </eo-iconpark-icon>
</ng-template>
</eo-table>
</form>
Expand Down
3 changes: 2 additions & 1 deletion src/workbench/browser/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { EoIconparkIconModule } from 'eo/workbench/browser/src/app/eoui/iconpark
import { ApiScriptComponent } from './components/api-script/api-script.component';
import { EouiModule } from 'eo/workbench/browser/src/app/eoui/eoui.module';
import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';

const COMPONENTS = [
ToolbarComponent,
Expand Down Expand Up @@ -54,7 +55,7 @@ const COMPONENTS = [
EouiModule,
NzTreeViewModule,
],
declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent],
declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent],
providers: [ModalService],
exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, EoIconparkIconModule],
})
Expand Down
107 changes: 52 additions & 55 deletions src/workbench/browser/src/index.html
Original file line number Diff line number Diff line change
@@ -1,62 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Eoapi</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_19.ba5ba4245a69248024047f0b7ba96bbb.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
</head>
<!-- Angular Cli need for node modules -->
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: [],
};
</script>

<head>
<meta charset="utf-8" />
<title>Eoapi</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_18.e98aaa4d03d4378a3a2c18bfd1670872.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
</head>
<!-- Angular Cli need for node modules -->
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: [],
};
</script>

<body eo-drop-root>
<eo-root>
<div class="loading_container f_column">
<img src="assets/images/logo.svg" />
<div class="mt10 ant-spin ant-spin-spinning ant-spin-lg">
<span class="ant-spin-dot ant-spin-dot-spin ng-star-inserted">
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
</span>
<body eo-drop-root>
<eo-root>
<div class="loading_container f_column">
<img src="assets/images/logo.svg" />
<div class="mt10 ant-spin ant-spin-spinning ant-spin-lg">
<span class="ant-spin-dot ant-spin-dot-spin ng-star-inserted">
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
</span>
</div>
</div>
</div>
</eo-root>
<div id="mask"></div>
</body>
<style>
#mask {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
display: none;
}

.loading_container {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
</eo-root>
<div id="mask"></div>
</body>
<style>
#mask {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
display: none;
}

.loading_container img {
width: 200px;
}
</style>
.loading_container {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
}

.loading_container img {
width: 200px;
}
</style>
</html>

0 comments on commit 5a211b4

Please sign in to comment.