- ,
private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA)
- public data: { modelSlug: string; projectSlug: string },
+ public data: { model: Model; project: Project },
) {
this.modelDiagramService
- .getDiagramMetadata(this.data.projectSlug, this.data.modelSlug)
+ .getDiagramMetadata(this.data.project.slug, this.data.model.slug)
.subscribe({
next: (diagramMetadata) => {
this.diagramMetadata = diagramMetadata;
this.observeVisibleDiagrams();
},
- error: () => {
- this.dialogRef.close();
+ error: (err) => {
+ this.errorMessage = err.error;
},
});
-
- this.userService
- .getCurrentUser()
- .subscribe((user) => (this.username = user.name));
- this.path = this.modelService.backendURLFactory(
- data.projectSlug,
- data.modelSlug,
- );
- }
-
- get codeBlockContent(): string {
- return `model = capellambse.MelodyModel(
- path="path to the aird file of the model on your machine",
- diagram_cache={
- "path": "http://localhost:8000/api/v1/projects/coffee-machine/models/coffee-machine/diagrams/%s",
- "username": "${this.username}",
- "password": "${
- this.passwordValue ? this.passwordValue : 'yourPassword'
- }",
- }
- )`;
}
observeVisibleDiagrams() {
@@ -133,7 +102,7 @@ export class ModelDiagramDialogComponent {
if (!this.diagrams[uuid]) {
this.diagrams[uuid] = { loading: true, content: undefined };
this.modelDiagramService
- .getDiagram(this.data.projectSlug, this.data.modelSlug, uuid)
+ .getDiagram(this.data.project.slug, this.data.model.slug, uuid)
.subscribe({
next: (response: Blob) => {
const reader = new FileReader();
@@ -180,23 +149,11 @@ export class ModelDiagramDialogComponent {
downloadDiagram(uuid: string) {
this.modelDiagramService
- .getDiagram(this.data.projectSlug, this.data.modelSlug, uuid)
+ .getDiagram(this.data.project.slug, this.data.model.slug, uuid)
.subscribe((response: Blob) => {
saveAs(response, `${uuid}.svg`);
});
}
-
- async insertToken() {
- const expirationDate = new Date();
- expirationDate.setDate(expirationDate.getDate() + 30);
- this.tokenService
- .createToken(
- 'Created in diagram cache dialog',
- expirationDate,
- 'Diagram-cache',
- )
- .subscribe((token) => (this.passwordValue = token.password));
- }
}
interface Diagrams {
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
index e2b46877ab..071c5220cc 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
+++ b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
@@ -85,7 +85,7 @@ export class ModelOverviewComponent implements OnInit {
'w-full',
'h-full',
],
- data: { modelSlug: model.slug, projectSlug: this.project?.slug },
+ data: { model: model, project: this.project },
});
}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ddcbbd9c49..23f8c73cca 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -15,6 +15,7 @@ module.exports = {
success: "var(--success-color)",
hover: "var(--hover-color)",
archived: "#D1D5DB",
+ url: "#2563eb",
},
spacing: {
button: "0.5rem",
-
-
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
index 00030ff7f6..3cce2dbb00 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
@@ -10,11 +10,7 @@ import {
ElementRef,
QueryList,
} from '@angular/core';
-import {
- MatDialog,
- MatDialogRef,
- MAT_DIALOG_DATA,
-} from '@angular/material/dialog';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { saveAs } from 'file-saver';
import {
MatDialogPreviewData,
@@ -25,9 +21,8 @@ import {
DiagramMetadata,
ModelDiagramService,
} from 'src/app/projects/models/diagrams/service/model-diagram.service';
-import { ModelService } from 'src/app/projects/models/service/model.service';
-import { UserService } from 'src/app/services/user/user.service';
-import { TokenService } from 'src/app/users/basic-auth-service/basic-auth-token.service';
+import { Model } from 'src/app/projects/models/service/model.service';
+import { Project } from 'src/app/projects/service/project.service';
@Component({
selector: 'app-model-diagram-dialog',
@@ -37,9 +32,8 @@ import { TokenService } from 'src/app/users/basic-auth-service/basic-auth-token.
export class ModelDiagramDialogComponent {
diagramMetadata?: DiagramCacheMetadata;
diagrams: Diagrams = {};
- username?: string;
- passwordValue?: string;
- path?: string;
+
+ errorMessage?: string;
loaderArray = Array(60).fill(0);
@@ -61,46 +55,21 @@ export class ModelDiagramDialogComponent {
constructor(
private modelDiagramService: ModelDiagramService,
- private userService: UserService,
- private modelService: ModelService,
- private tokenService: TokenService,
- private dialogRef: MatDialogRefView diagrams
- Last update: - {{ - (diagramMetadata?.last_updated | date: "EE, dd MMM y HH:mm:ss") || - "loading..." - }} +View diagrams
+
+ Last update:
+ {{
+ (diagramMetadata?.last_updated | date: "EE, dd MMM y HH:mm:ss") ||
+ "loading..."
+ }}
+
- -
-
-
-
- Learn how to use the diagram cache with capellambse!
-
-
- You can also access the diagrams via our Python library
- capellambse. Follow the installation instructions on
- [Github]
- and then use the code snippet. To authenticate, you have to insert a
- personal access token. The token has the same scope as your user. Be
- careful with it.
-
+
- Search
-
- search
-
- {{ filteredDiagrams()?.length }} diagram(s) found:
-
-
-
-
-
- model = capellambse.MelodyModel(
- path="path to the aird file of the model on your machine",
- diagram_cache={
- "path": "{{ this.path + "/diagrams/%s"}}",
- "username": "{{ username }}",
- "password": "{{ passwordValue !== undefined ? passwordValue : 'You can insert your project token here using the "Insert token" button. The inserted token is valid for 30 days.' }}",
- }
- )
-
-
-
-
-
-
- ![]()
-
-
-
- error
- Diagram export has failed.
Please contact your diagram cache - administrator. -
- - Diagram export has failed.
Please contact your diagram cache - administrator. -
- error
- Error loading the diagram from the server.
Please try again - later. -
- If the problem persists, please contact your diagram cache - administrator. -
- - Error loading the diagram from the server.
Please try again - later. -
- If the problem persists, please contact your diagram cache - administrator. -
-
-
-
-
+
+ Search
+
+ search
+
+ {{ filteredDiagrams()?.length }} diagram(s) found:
+
+
+
+
+ ![]()
-
- Your model doesn't seem to contain diagrams.
-
-
- No diagrams for the given filter found. Please remove your search query.
-
-
-
+
+ error
+ Diagram export has failed.
Please contact your diagram cache + administrator. +
+ + Diagram export has failed.
Please contact your diagram cache + administrator. +
+ error
+ Error loading the diagram from the server.
Please try again later. +
+ If the problem persists, please contact your diagram cache + administrator. +
+ + Error loading the diagram from the server.
Please try again later. +
+ If the problem persists, please contact your diagram cache + administrator. +
+
+
+
+
+
+
+
+ Your model doesn't seem to contain diagrams.
+
+
+ No diagrams for the given filter found. Please remove your search query.
+
+
+