Initial commit
This commit is contained in:
Simone Gotti
commit
b780e148cc
|
|
@ -0,0 +1,2 @@
|
|||
node_modules/
|
||||
dist/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
FROM node:lts-alpine AS web_build
|
||||
|
||||
WORKDIR /agola-web
|
||||
|
||||
# copy both 'package.json' and 'package-lock.json' (if available)
|
||||
COPY package*.json ./
|
||||
|
||||
# install project dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy all the source
|
||||
COPY . .
|
||||
|
||||
# Build app
|
||||
RUN npm run build
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright {yyyy} {name of copyright owner}
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# agola-web
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run your tests
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"name": "agola-web",
|
||||
"version": "0.1.0",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^3.3.92",
|
||||
"ansi_up": "^3.0.0",
|
||||
"axios": "^0.18.0",
|
||||
"bulma": "^0.7.4",
|
||||
"moment": "^2.23.0",
|
||||
"moment-duration-format": "^2.2.2",
|
||||
"vue": "^2.5.21",
|
||||
"vue-router": "^3.0.2",
|
||||
"vue2-filters": "^0.4.1",
|
||||
"vuex": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.4.0",
|
||||
"@vue/cli-plugin-eslint": "^3.4.0",
|
||||
"@vue/cli-service": "^3.4.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.12.0",
|
||||
"eslint-plugin-vue": "^5.1.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>agola</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but agola doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<script src="/config.js" />
|
||||
</script>
|
||||
<script>
|
||||
// default config if no config.js is provided
|
||||
if (!window.CONFIG) {
|
||||
const CONFIG = {
|
||||
API_URL: window.location.protocol + "//" + window.location.hostname + ":8000",
|
||||
API_BASE_PATH: "/api/v1alpha"
|
||||
}
|
||||
window.CONFIG = CONFIG
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<nav class="navbar is-light has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<h1>Agola</h1>
|
||||
</a>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-burger burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start"></div>
|
||||
<div class="navbar-end">
|
||||
<div v-if="user" class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">{{user.username}}</a>
|
||||
<div class="navbar-dropdown">
|
||||
<div class="navbar-item">
|
||||
Logged as
|
||||
<b>{{user.username}}</b>
|
||||
</div>
|
||||
<hr class="navbar-divider">
|
||||
<router-link class="navbar-item" to="/logout">
|
||||
<i class="mdi mdi-logout"></i>Logout
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="navbar-item">
|
||||
<router-link class="button" to="/login">Login</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main-container container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {},
|
||||
computed: {
|
||||
...mapGetters(["user"])
|
||||
},
|
||||
watch: {
|
||||
user: function(user) {
|
||||
if (user) {
|
||||
this.$router.push({
|
||||
name: "user",
|
||||
params: { username: this.user.username }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/css/main.scss";
|
||||
|
||||
.main-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<div
|
||||
class="touchable"
|
||||
:class="stepClass(step)"
|
||||
role="tab"
|
||||
:aria-expanded="active ? 'true' : 'false'"
|
||||
@click.prevent="toggle"
|
||||
>
|
||||
<div class="item-content">
|
||||
<div class="header">
|
||||
<span class="icon">
|
||||
<i
|
||||
class="mdi mdi-arrow-right"
|
||||
:class="{ 'arrow-down': active, 'arrow-right': !active }"
|
||||
></i>
|
||||
</span>
|
||||
<span class="name">{{step.name}}</span>
|
||||
<span class="duration">{{duration}}</span>
|
||||
</div>
|
||||
<div class="log-container" v-show="active">
|
||||
<Log
|
||||
v-bind:runid="runid"
|
||||
v-bind:taskid="taskid"
|
||||
v-bind:step="stepnum"
|
||||
v-bind:stepphase="step.phase"
|
||||
v-bind:show="active"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
import momentDurationFormatSetup from "moment-duration-format";
|
||||
import Log from "@/components/log.vue";
|
||||
|
||||
momentDurationFormatSetup(moment);
|
||||
|
||||
export default {
|
||||
name: "Collapse",
|
||||
components: {
|
||||
Log
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
duration: null
|
||||
};
|
||||
},
|
||||
props: {
|
||||
runid: String,
|
||||
taskid: String,
|
||||
stepnum: Number,
|
||||
step: Object
|
||||
},
|
||||
created() {
|
||||
this.updateDuration(this.step);
|
||||
},
|
||||
ready() {
|
||||
if (this.active) {
|
||||
this.$emit("collapse-open", this.index);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
step: function(step) {
|
||||
this.updateDuration(step);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stepClass(step) {
|
||||
if (step.phase == "success") return "success";
|
||||
if (step.phase == "failed") return "failed";
|
||||
if (step.phase == "stopped") return "failed";
|
||||
if (step.phase == "running") return "running";
|
||||
return "unknown";
|
||||
},
|
||||
updateDuration(step) {
|
||||
let start = moment(step.start_time);
|
||||
let end = moment(step.end_time);
|
||||
if (start === null || end === null) {
|
||||
this.duration = null;
|
||||
return;
|
||||
}
|
||||
this.duration = moment.duration(end.diff(start)).format("h:mm:ss[s]");
|
||||
},
|
||||
toggle() {
|
||||
this.active = !this.active;
|
||||
if (this.active) {
|
||||
this.$emit("collapse-open", this.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item {
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 0 0 30%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.log-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div class="dark">
|
||||
<div class="log">
|
||||
<div class="stream-line" v-for="(item, index) in items" :key="index">
|
||||
<div v-html="item"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, apiurlwithtoken, fetch } from "@/util/auth";
|
||||
import AnsiUp from "ansi_up";
|
||||
|
||||
export default {
|
||||
name: "Log",
|
||||
props: {
|
||||
show: Boolean,
|
||||
runid: String,
|
||||
taskid: String,
|
||||
step: Number,
|
||||
stepphase: String
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
let formatter = new AnsiUp();
|
||||
formatter.use_classes = true;
|
||||
|
||||
return {
|
||||
items: [],
|
||||
lines: [],
|
||||
formatter: formatter,
|
||||
es: null,
|
||||
fetching: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
fetch: function() {
|
||||
if (this.fetching) {
|
||||
return;
|
||||
}
|
||||
this.fetching = true;
|
||||
if (this.stepphase == "running") {
|
||||
this.streamLogs();
|
||||
}
|
||||
|
||||
if (this.stepphase == "success" || this.stepphase == "failed") {
|
||||
this.getLogs();
|
||||
}
|
||||
},
|
||||
streamLogs: function() {
|
||||
this.es = new EventSource(
|
||||
apiurlwithtoken(
|
||||
"/logs?runID=" +
|
||||
this.runid +
|
||||
"&taskID=" +
|
||||
this.taskid +
|
||||
"&step=" +
|
||||
this.step +
|
||||
"&follow"
|
||||
)
|
||||
);
|
||||
this.es.onmessage = event => {
|
||||
var data = event.data;
|
||||
// TODO(sgotti) ansi_up doesn't handle carriage return (\r), find a way to also handle it
|
||||
this.items.push(this.formatter.ansi_to_html(data));
|
||||
};
|
||||
// don't reconnect on error
|
||||
this.es.onerror = () => {
|
||||
this.es.close();
|
||||
};
|
||||
},
|
||||
getLogs: function() {
|
||||
fetch(
|
||||
apiurl(
|
||||
"/logs?runID=" +
|
||||
this.runid +
|
||||
"&taskID=" +
|
||||
this.taskid +
|
||||
"&step=" +
|
||||
this.step
|
||||
)
|
||||
)
|
||||
.then(r => {
|
||||
if (r.status == 200) {
|
||||
return r.text();
|
||||
}
|
||||
return "";
|
||||
})
|
||||
.then(data => {
|
||||
this.items.push(this.formatter.ansi_to_html(data));
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: function(post, pre) {
|
||||
if (pre == false && post == true) {
|
||||
this.fetch();
|
||||
}
|
||||
},
|
||||
stepphase: function(post, pre) {
|
||||
if (pre == "notstarted" && post == "running") {
|
||||
this.streamLogs();
|
||||
}
|
||||
if (pre == "notstarted" && (post == "success" || post == "failed")) {
|
||||
this.getLogs();
|
||||
}
|
||||
|
||||
if (pre == "running" && (post == "success" || post == "failed")) {
|
||||
// TODO(sgotti)
|
||||
}
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
if (this.show) {
|
||||
this.fetch();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.es !== null) {
|
||||
this.es.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.log {
|
||||
background-color: #222;
|
||||
color: #f1f1f1;
|
||||
font-family: Cousine, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
|
||||
.stream-line {
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input v-model="username" class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input v-model="password" class="input" type="password" placeholder="Password">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button
|
||||
@click="$emit('login', { username, password })"
|
||||
class="button is-info is-fullwidth"
|
||||
>Login with {{name}}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { apiurl, loginurl, fetch } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
name: "Loginform",
|
||||
props: {
|
||||
name: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
username: null,
|
||||
password: null
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="ownerLink(ownertype, ownername)">{{ownername}}</router-link>
|
||||
</li>
|
||||
<li v-if="projectname">
|
||||
<router-link :to="projectLink(ownertype, ownername, projectname)">{{projectname}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { ownerLink, projectLink } from "@/util/link.js";
|
||||
|
||||
export default {
|
||||
name: "projbreadcrumbs",
|
||||
components: {},
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectname: String
|
||||
},
|
||||
methods: {
|
||||
ownerLink: ownerLink,
|
||||
projectLink: projectLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="item-list" v-for="project in projects" v-bind:key="project.id">
|
||||
<router-link tag="div" class="item" :to="projectURL(project)">
|
||||
<span class="name">{{project.name}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
name: "Projects",
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projects: [],
|
||||
polling: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
projectURL(project) {
|
||||
if (this.ownertype == "user") {
|
||||
return {
|
||||
name: "user project",
|
||||
params: { username: this.ownername, projectname: project.name }
|
||||
};
|
||||
} else if (this.ownertype == "org") {
|
||||
return {
|
||||
name: "org project",
|
||||
params: { orgname: this.ownername, projectname: project.name }
|
||||
};
|
||||
}
|
||||
},
|
||||
fetchProjects(ownertype, ownername) {
|
||||
let path = "/" + ownertype;
|
||||
if (ownername) {
|
||||
path += "/" + ownername;
|
||||
}
|
||||
path += "/projects";
|
||||
fetch(apiurl(path))
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
let projects = res.projects.map(function(project) {
|
||||
return project;
|
||||
});
|
||||
this.projects = projects;
|
||||
console.log("projects", this.projects);
|
||||
});
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.fetchProjects(this.ownertype, this.ownername);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<RunDetail :run="run"/>
|
||||
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li>
|
||||
<a>Tasks</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="run" class="tasks-list">
|
||||
<div v-for="task in run.sortedTasks" v-bind:key="task.id" :class="taskClass(task)">
|
||||
<div class="task-content">
|
||||
<div class="columns">
|
||||
<router-link class="column is-10" tag="a" :to="runTaskLink(task)">
|
||||
<span class="name">{{task.name}}</span>
|
||||
</router-link>
|
||||
<div class="parents column">
|
||||
<span v-if="parents(task).length > 0">depends on: </span>
|
||||
<span class="parent" v-for="dep in parents(task)" v-bind:key="dep">{{dep}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <span
|
||||
class="duration"
|
||||
v-if="duration && (step.Phase == 'success' || step.Phase == 'failed') "
|
||||
>{{duration}}</span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchRun } from "@/util/data.js";
|
||||
import { userLocalRunTaskLink, projectRunTaskLink } from "@/util/link.js";
|
||||
|
||||
import RunDetail from "@/components/rundetail.vue";
|
||||
|
||||
export default {
|
||||
name: "run",
|
||||
components: { RunDetail },
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectname: String,
|
||||
runid: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
run: null,
|
||||
polling: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
runTaskLink(task) {
|
||||
if (this.projectname) {
|
||||
return projectRunTaskLink(
|
||||
this.ownertype,
|
||||
this.ownername,
|
||||
this.projectname,
|
||||
this.runid,
|
||||
task.id
|
||||
);
|
||||
} else {
|
||||
return userLocalRunTaskLink(this.ownername, this.runid, task.id);
|
||||
}
|
||||
},
|
||||
parents(task) {
|
||||
return task.depends.map(d => {
|
||||
console.log(d.task_id);
|
||||
return this.run.tasks[d.task_id].name;
|
||||
});
|
||||
},
|
||||
taskClass(task) {
|
||||
if (task.status == "success") return "success";
|
||||
if (task.status == "failed") return "failed";
|
||||
if (task.status == "stopped") return "failed";
|
||||
if (task.status == "running") return "running";
|
||||
return "unknown";
|
||||
},
|
||||
async fetchRun() {
|
||||
this.run = await fetchRun(this.runid);
|
||||
// sort tasks by level
|
||||
let tasks = this.run.tasks;
|
||||
let sortedTasks = Object.keys(this.run.tasks)
|
||||
.sort((a, b) =>
|
||||
tasks[a].level > tasks[b].level
|
||||
? 1
|
||||
: tasks[b].level > tasks[a].level
|
||||
? -1
|
||||
: 0
|
||||
)
|
||||
.map(k => this.run.tasks[k]);
|
||||
this.run.sortedTasks = sortedTasks;
|
||||
console.log("run: ", this.run);
|
||||
},
|
||||
pollData() {
|
||||
this.polling = setInterval(() => {
|
||||
this.fetchRun();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.fetchRun();
|
||||
this.pollData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.polling);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.tasks-list {
|
||||
.task-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.parents {
|
||||
margin-left: 1rem;
|
||||
margin-right: 0rem;
|
||||
font-weight: lighter;
|
||||
font-size: 0.8rem;
|
||||
.parent {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="run != null">
|
||||
<div class="run">
|
||||
<div :class="runResultClass(run)">
|
||||
<div class="run-content">
|
||||
<div class="item-content columns">
|
||||
<div class="run-title column is-10">
|
||||
<span class="run-name">{{run.name}}</span>
|
||||
<span
|
||||
class="tag"
|
||||
:class="'is-'+runResultClass(run)"
|
||||
>{{ runStatus(run) | capitalize }}</span>
|
||||
<span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
|
||||
<span v-if="!stillRunning(run)" class="stillrunning"></span>
|
||||
</div>
|
||||
<div class="run-actions column is-2 is-pulled-right">
|
||||
<div class="dropdown is-hoverable is-right" v-if="run.phase == 'finished'">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Restart</span>
|
||||
<span class="icon is-small">
|
||||
<i class="mdi mdi-restart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a class="dropdown-item" @click="restartRun(run, true)">From start</a>
|
||||
<a class="dropdown-item" @click="restartRun(run)">From failed tasks</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="button is-danger"
|
||||
v-if="run.phase == 'running'"
|
||||
@click="stopRun(run)"
|
||||
>Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content columns">
|
||||
<div class="commitmessage column">{{run.annotations.message}}</div>
|
||||
<div class="source-info column">
|
||||
<a :href="run.annotations.commit_link" class="commit" target="_blank">
|
||||
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
|
||||
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="run.annotations.event_type == 'push'"
|
||||
:href="run.annotations.branch_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-branch"></i>
|
||||
<span>{{run.annotations.branch}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'tag'"
|
||||
:href="run.annotations.tag_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-tag"></i>
|
||||
<span>{{run.annotations.tag}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'pull_request'"
|
||||
:href="run.annotations.pull_request_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-pull"></i>
|
||||
<span>PR #{{run.annotations.pull_request_id}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
import { userLocalRunTaskLink, projectRunTaskLink } from "@/util/link.js";
|
||||
|
||||
export default {
|
||||
name: "RunDetail",
|
||||
props: {
|
||||
run: Object
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
stillRunning(run) {
|
||||
return run.result != "unknown" && run.phase == "running";
|
||||
},
|
||||
runStatus(run) {
|
||||
if (run.phase != "finished") return run.phase;
|
||||
if (run.result != "unknown") return run.result;
|
||||
if (run.stopping) return "stopping";
|
||||
|
||||
return run.result;
|
||||
},
|
||||
runResultClass(run) {
|
||||
status = this.runStatus(run);
|
||||
|
||||
if (status == "queued") return "unknown";
|
||||
if (status == "cancelled") return "failed";
|
||||
if (status == "running") return "running";
|
||||
if (status == "stopping") return "failed";
|
||||
if (status == "stopped") return "failed";
|
||||
if (status == "success") return "success";
|
||||
if (status == "failed") return "failed";
|
||||
return "unknown";
|
||||
},
|
||||
taskClass(task) {
|
||||
if (task.status == "success") return "success";
|
||||
if (task.status == "failed") return "failed";
|
||||
if (task.status == "stopped") return "failed";
|
||||
if (task.status == "running") return "running";
|
||||
return "unknown";
|
||||
},
|
||||
restartRun(run, fromStart) {
|
||||
fetch(apiurl("/run/" + run.id + "/actions"), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
action_type: "restart",
|
||||
from_start: fromStart
|
||||
})
|
||||
}).then(r => {
|
||||
console.log("r: " + r);
|
||||
if (r.status == 200) {
|
||||
return r.json();
|
||||
}
|
||||
throw Error(r.statusText);
|
||||
});
|
||||
},
|
||||
stopRun(run) {
|
||||
fetch(apiurl("/run/" + run.id + "/actions"), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
action_type: "stop"
|
||||
})
|
||||
}).then(r => {
|
||||
console.log("r: " + r);
|
||||
if (r.status == 200) {
|
||||
return r.json();
|
||||
}
|
||||
throw Error(r.statusText);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.run {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.run-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
display: block;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.run-title {
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.run-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 0px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.run-actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commitmessage {
|
||||
}
|
||||
|
||||
.stillrunning {
|
||||
}
|
||||
|
||||
.source-info {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.commit {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="item-list">
|
||||
<div class="item" v-for="run in runs" v-bind:key="run.id" :class="runResultClass(run)">
|
||||
<div class="item-content">
|
||||
<router-link
|
||||
v-if="username"
|
||||
tag="div"
|
||||
class="name"
|
||||
:to="userLocalRunLink(username, run.id)"
|
||||
>
|
||||
<span>{{run.name}}</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-else
|
||||
tag="div"
|
||||
class="name"
|
||||
:to="projectRunLink(ownertype, ownername, projectname, run.id)"
|
||||
>
|
||||
<span>{{run.name}}</span>
|
||||
</router-link>
|
||||
<div class="commitmessage">{{run.annotations.message}}</div>
|
||||
<span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
|
||||
<span v-if="!stillRunning(run)" class="stillrunning"></span>
|
||||
<div class="source-info">
|
||||
<a :href="run.annotations.commit_link" class="commit" target="_blank">
|
||||
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
|
||||
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="run.annotations.event_type == 'push'"
|
||||
:href="run.annotations.branch_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-branch"></i>
|
||||
<span>{{run.annotations.branch}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'tag'"
|
||||
:href="run.annotations.tag_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-tag"></i>
|
||||
<span>{{run.annotations.tag}}</span>
|
||||
</a>
|
||||
<a
|
||||
v-else-if="run.annotations.event_type == 'pull_request'"
|
||||
:href="run.annotations.pull_request_link"
|
||||
class="commit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mdi mdi-source-pull"></i>
|
||||
<span>PR #{{run.annotations.pull_request_id}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
import { userLocalRunLink, projectRunLink } from "@/util/link.js";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
name: "runs",
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
username: String,
|
||||
projectname: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
runs: [],
|
||||
polling: null,
|
||||
project: null,
|
||||
user: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
projectRunLink: projectRunLink,
|
||||
userLocalRunLink: userLocalRunLink,
|
||||
stillRunning(run) {
|
||||
return run.result != "unknown" && run.phase == "running";
|
||||
},
|
||||
runResultClass(run) {
|
||||
if (run.result == "unknown") {
|
||||
if (run.phase == "queued") return "unknown";
|
||||
if (run.phase == "cancelled") return "failed";
|
||||
if (run.phase == "running") return "running";
|
||||
}
|
||||
if (run.result == "success") return "success";
|
||||
if (run.result == "failed") return "failed";
|
||||
if (run.result == "stopped") return "failed";
|
||||
return "unknown";
|
||||
},
|
||||
fetchProjectRuns() {
|
||||
fetch(
|
||||
apiurl(
|
||||
"/projects/" +
|
||||
this.ownertype +
|
||||
"/" +
|
||||
this.ownername +
|
||||
"/" +
|
||||
this.projectname
|
||||
)
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.project = res;
|
||||
console.log("project", this.project);
|
||||
|
||||
this.fetchRuns();
|
||||
});
|
||||
},
|
||||
fetchUserRuns() {
|
||||
fetch(apiurl("/users/" + this.username))
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.user = res;
|
||||
console.log("user", this.user);
|
||||
|
||||
this.fetchRuns();
|
||||
});
|
||||
},
|
||||
fetchRuns() {
|
||||
let u = apiurl("/runs");
|
||||
//console.log("this.project.id", this.project.id);
|
||||
console.log("u", u);
|
||||
if (this.project !== null) {
|
||||
u.searchParams.append("group", this.project.id);
|
||||
} else if (this.user !== null) {
|
||||
u.searchParams.append("group", this.user.id);
|
||||
}
|
||||
|
||||
fetch(u)
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
let runs = res.runs.map(function(run) {
|
||||
return run;
|
||||
});
|
||||
this.runs = runs;
|
||||
console.log("runs", this.runs);
|
||||
});
|
||||
},
|
||||
pollData() {
|
||||
this.polling = setInterval(() => {
|
||||
this.fetchRuns();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
console.log("username", this.username);
|
||||
console.log("projectname", this.projectname);
|
||||
if (this.projectname !== undefined) {
|
||||
this.fetchProjectRuns();
|
||||
} else if (this.username !== undefined) {
|
||||
this.fetchUserRuns();
|
||||
} else {
|
||||
this.fetchRuns();
|
||||
}
|
||||
this.pollData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.polling);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.project-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
.project-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid $grey-lighter;
|
||||
border-left: 0 solid;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid $green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
border-left: 5px solid $red;
|
||||
}
|
||||
|
||||
.running {
|
||||
border-left: 5px solid $blue;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
border-left: 5px solid $grey-lighter;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 0 0 30%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commitmessage {
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
|
||||
.stillrunning {
|
||||
flex: 0 0 10%;
|
||||
}
|
||||
|
||||
.source-info {
|
||||
flex: 0 0 10%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.commit {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="arrow">
|
||||
<svg viewBox="0 0 15 15">
|
||||
<path fill="none" stroke="#9d9d9d" d="M4.32.5l6.247 6.942L4.32 14.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tabarrow"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.arrow {
|
||||
width: 1.2em;
|
||||
height: 1.4em;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div>
|
||||
<RunDetail :run="run"/>
|
||||
<div v-if="task != null">
|
||||
<div class="task-title">
|
||||
<span class="task-name" v-html="task.name"/>
|
||||
<span class="tag" :class="taskClass(task)">{{ task.status | capitalize }}</span>
|
||||
</div>
|
||||
<div v-for="(step, index) in task.steps" v-bind:key="index">
|
||||
<Collapse
|
||||
v-bind:runid="runid"
|
||||
v-bind:taskid="taskid"
|
||||
v-bind:stepnum="index"
|
||||
v-bind:step="step"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
import { fetchRun, fetchTask } from "@/util/data.js";
|
||||
|
||||
import Collapse from "@/components/collapse.vue";
|
||||
import RunDetail from "@/components/rundetail.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Collapse,
|
||||
RunDetail
|
||||
},
|
||||
name: "task",
|
||||
data() {
|
||||
return {
|
||||
run: null,
|
||||
task: null,
|
||||
runid: this.$route.params.runid,
|
||||
taskid: this.$route.params.taskid,
|
||||
polling: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
taskClass(task) {
|
||||
if (task.status == "success") return "is-success";
|
||||
if (task.status == "failed") return "is-failed";
|
||||
if (task.status == "stopped") return "is-failed";
|
||||
if (task.status == "running") return "is-running";
|
||||
return "unknown";
|
||||
},
|
||||
async fetchRun() {
|
||||
this.run = await fetchRun(this.runid);
|
||||
},
|
||||
async fetchTask() {
|
||||
this.task = await fetchTask(this.runid, this.taskid);
|
||||
},
|
||||
pollData() {
|
||||
this.polling = setInterval(() => {
|
||||
this.fetchTask();
|
||||
this.fetchRun();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.fetchRun();
|
||||
this.fetchTask();
|
||||
this.pollData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.polling);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.task-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.task-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
// **
|
||||
// black
|
||||
// **
|
||||
|
||||
.ansi-black-fg {
|
||||
color: $ansi-black;
|
||||
}
|
||||
.ansi-black-bg {
|
||||
background-color: $ansi-black;
|
||||
}
|
||||
|
||||
.ansi-bright-black-fg {
|
||||
color: $ansi-black-bright;
|
||||
}
|
||||
.ansi-bright-black-bg {
|
||||
background-color: $ansi-black-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// red
|
||||
// **
|
||||
|
||||
.ansi-red-fg {
|
||||
color: $ansi-red;
|
||||
}
|
||||
.ansi-red-bg {
|
||||
background-color: $ansi-red;
|
||||
}
|
||||
|
||||
.ansi-bright-red-fg {
|
||||
color: $ansi-red-bright;
|
||||
}
|
||||
.ansi-bright-red-bg {
|
||||
background-color: $ansi-red-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// green
|
||||
// **
|
||||
|
||||
.ansi-green-fg {
|
||||
color: $ansi-green;
|
||||
}
|
||||
.ansi-green-bg {
|
||||
background-color: $ansi-green;
|
||||
}
|
||||
|
||||
.ansi-bright-green-fg {
|
||||
color: $ansi-green-bright;
|
||||
}
|
||||
.ansi-bright-green-bg {
|
||||
background-color: $ansi-green-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// yellow
|
||||
// **
|
||||
|
||||
.ansi-yellow-fg {
|
||||
color: $ansi-yellow;
|
||||
}
|
||||
.ansi-yellow-bg {
|
||||
background-color: $ansi-yellow;
|
||||
}
|
||||
|
||||
.ansi-bright-yellow-fg {
|
||||
color: $ansi-yellow-bright;
|
||||
}
|
||||
.ansi-bright-yellow-bg {
|
||||
background-color: $ansi-yellow-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// blue
|
||||
// **
|
||||
|
||||
.ansi-blue-fg {
|
||||
color: $ansi-blue;
|
||||
}
|
||||
.ansi-blue-bg {
|
||||
background-color: $ansi-blue;
|
||||
}
|
||||
|
||||
.ansi-bright-blue-fg {
|
||||
color: $ansi-blue-bright;
|
||||
}
|
||||
.ansi-bright-blue-bg {
|
||||
background-color: $ansi-blue-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// magenta
|
||||
// **
|
||||
|
||||
.ansi-magenta-fg {
|
||||
color: $ansi-magenta;
|
||||
}
|
||||
.ansi-magenta-bg {
|
||||
background-color: $ansi-magenta;
|
||||
}
|
||||
|
||||
.ansi-bright-magenta-fg {
|
||||
color: $ansi-magenta-bright;
|
||||
}
|
||||
.ansi-bright-magenta-bg {
|
||||
background-color: $ansi-magenta-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// cyan
|
||||
// **
|
||||
|
||||
.ansi-cyan-fg {
|
||||
color: $ansi-cyan;
|
||||
}
|
||||
.ansi-cyan-bg {
|
||||
background-color: $ansi-cyan;
|
||||
}
|
||||
|
||||
.ansi-bright-cyan-fg {
|
||||
color: $ansi-cyan-bright;
|
||||
}
|
||||
.ansi-bright-cyan-bg {
|
||||
background-color: $ansi-cyan-bright;
|
||||
}
|
||||
|
||||
// **
|
||||
// white
|
||||
// **
|
||||
|
||||
.ansi-white-fg {
|
||||
color: $ansi-white;
|
||||
}
|
||||
.ansi-white-bg {
|
||||
background-color: $ansi-white;
|
||||
}
|
||||
|
||||
.ansi-bright-white-fg {
|
||||
color: $ansi-white-bright;
|
||||
}
|
||||
.ansi-bright-white-bg {
|
||||
background-color: $ansi-white-bright;
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@import "~bulma/sass/utilities/initial-variables.sass";
|
||||
@import "~bulma/sass/utilities/functions.sass";
|
||||
|
||||
$grey: #8c9b9d;
|
||||
$grey-light: #a9afb7;
|
||||
$grey-lighter: #dee2e5;
|
||||
$orange: #e67e22;
|
||||
$yellow: #f1b70e;
|
||||
$green: #2ecc71;
|
||||
$turquoise: #1abc9c;
|
||||
$blue: #3498db;
|
||||
$purple: #8e44ad;
|
||||
$red: #e42522;
|
||||
$white-ter: #ecf0f1;
|
||||
$primary: #34495e !default;
|
||||
$yellow-invert: #fff;
|
||||
|
||||
$grey-lighter-invert: findColorInvert($grey-lighter);
|
||||
$green-invert: findColorInvert($green);
|
||||
$red-invert: findColorInvert($red);
|
||||
$blue-invert: findColorInvert($red);
|
||||
|
||||
$custom-colors: (
|
||||
"unknown": (
|
||||
$grey-lighter,
|
||||
$grey-lighter-invert
|
||||
),
|
||||
"success": (
|
||||
$green,
|
||||
$green-invert
|
||||
),
|
||||
"failed": (
|
||||
$red,
|
||||
$red-invert
|
||||
),
|
||||
"running": (
|
||||
$blue,
|
||||
$blue-invert
|
||||
)
|
||||
);
|
||||
|
||||
$link: $grey;
|
||||
$tabs-link-active-color: $blue;
|
||||
$tabs-link-active-border-bottom-color: $blue;
|
||||
$tabs-link-hover-color: $blue;
|
||||
$tabs-link-hover-border-bottom-color: $blue;
|
||||
|
||||
$spacing: 20px;
|
||||
|
||||
$breadcrumb-item-color: $grey-dark !default;
|
||||
$breadcrumb-item-hover-color: $grey-dark !default;
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default;
|
||||
$breadcrumb-item-padding-horizontal: 0.5em !default;
|
||||
|
||||
$breadcrumb-item-separator-color: $grey-light !default;
|
||||
|
||||
$ansi-black: #222;
|
||||
$ansi-black-bright: #222;
|
||||
$ansi-red: #c0392b;
|
||||
$ansi-red-bright: #e74c3c;
|
||||
$ansi-green: #27af60;
|
||||
$ansi-green-bright: #2ecc71;
|
||||
$ansi-yellow: #f39c12;
|
||||
$ansi-yellow-bright: #f1c40f;
|
||||
$ansi-blue: #2e8dcd;
|
||||
$ansi-blue-bright: #3498db;
|
||||
$ansi-magenta: #8e44ad;
|
||||
$ansi-magenta-bright: #9b59b6;
|
||||
$ansi-cyan: #0097a4;
|
||||
$ansi-cyan-bright: #02c8d9;
|
||||
$ansi-white: #bdc3c7;
|
||||
$ansi-white-bright: #ffffff;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "@/css/_variables.scss";
|
||||
|
||||
@import "~bulma/bulma.sass";
|
||||
|
||||
@import "./css/_ansi.scss";
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import "@mdi/font/css/materialdesignicons.css";
|
||||
|
||||
import Vue from "vue";
|
||||
import Vue2Filters from "vue2-filters";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
import { getUser } from "@/util/auth";
|
||||
|
||||
Vue.use(Vue2Filters);
|
||||
|
||||
const USER = 'user';
|
||||
|
||||
// TODO(sgotti) use vuex for login/logout
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
created: function () {
|
||||
let user = getUser()
|
||||
if (user) {
|
||||
store.dispatch('setUser', user)
|
||||
}
|
||||
},
|
||||
render: h => h(App)
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import Home from "./views/Home.vue";
|
||||
import User from "./views/User.vue";
|
||||
import Org from "./views/Org.vue";
|
||||
import Project from "./views/Project.vue";
|
||||
//import Run from "./views/Run.vue";
|
||||
import projects from "./components/projects.vue";
|
||||
import runs from "./components/runs.vue";
|
||||
import run from "./components/run.vue";
|
||||
import task from "./components/task.vue";
|
||||
import Oauth2 from "./views/Oauth2.vue";
|
||||
import Login from "./views/Login.vue";
|
||||
import Logout from "./views/Logout.vue";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
export default new VueRouter({
|
||||
mode: "history",
|
||||
routes: [
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: "/logout",
|
||||
name: "logout",
|
||||
component: Logout
|
||||
},
|
||||
{
|
||||
path: "/oauth2/callback",
|
||||
name: "oauth2callback",
|
||||
component: Oauth2
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: "/user/:username",
|
||||
component: User,
|
||||
props: (route) => ({ username: route.params.username }),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "user",
|
||||
component: projects,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username })
|
||||
},
|
||||
{
|
||||
path: "projects",
|
||||
name: "user projects",
|
||||
component: projects,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username })
|
||||
},
|
||||
{
|
||||
path: "runs",
|
||||
name: "user local runs",
|
||||
component: runs,
|
||||
props: (route) => ({ ownertype: "user", username: route.params.username })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid",
|
||||
name: "user local run",
|
||||
component: run,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, runid: route.params.runid })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid/tasks/:taskid",
|
||||
name: "user local run task",
|
||||
component: task,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, runid: route.params.runid, taskid: route.params.taskid })
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/user/:username/projects/:projectname",
|
||||
component: Project,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname }),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "user project",
|
||||
component: runs,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
|
||||
},
|
||||
{
|
||||
path: "runs",
|
||||
name: "user project runs",
|
||||
component: runs,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid",
|
||||
name: "user project run",
|
||||
component: run,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, runid: route.params.runid })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid/tasks/:taskid",
|
||||
name: "user project run task",
|
||||
component: task,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/org/:orgname",
|
||||
name: "org",
|
||||
component: Org,
|
||||
props: (route) => ({ orgname: route.params.orgname }),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/org/:orgname/projects/:projectname",
|
||||
component: Project,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname }),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "org project",
|
||||
component: runs,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
|
||||
},
|
||||
{
|
||||
path: "runs",
|
||||
name: "org project runs",
|
||||
component: runs,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid",
|
||||
name: "org project run",
|
||||
component: run,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, runid: route.params.runid })
|
||||
},
|
||||
{
|
||||
path: "runs/:runid/tasks/:taskid",
|
||||
name: "org project run task",
|
||||
component: task,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const state = {
|
||||
user: null,
|
||||
}
|
||||
|
||||
const getters = {
|
||||
user: state => {
|
||||
return state.user
|
||||
}
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
setUser(state, user) {
|
||||
state.user = user
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setUser({ commit }, user) {
|
||||
commit('setUser', user)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
})
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import router from "@/router";
|
||||
import store from "@/store";
|
||||
|
||||
const ID_TOKEN_KEY = 'id_token';
|
||||
const USER_KEY = 'user';
|
||||
|
||||
let API_URL = window.CONFIG.API_URL;
|
||||
let API_BASE_PATH = window.CONFIG.API_BASE_PATH;
|
||||
|
||||
export function login(token, user) {
|
||||
setIdToken(token);
|
||||
setUser(user);
|
||||
store.dispatch('setUser', user)
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
unsetIdToken();
|
||||
unsetUser()
|
||||
store.dispatch('setUser', null)
|
||||
}
|
||||
|
||||
export function apiurlwithtoken(path) {
|
||||
let u = new URL(API_URL + API_BASE_PATH + path);
|
||||
let idToken = getIdToken();
|
||||
if (idToken) {
|
||||
u.searchParams.append("access_token", idToken);
|
||||
}
|
||||
return u
|
||||
}
|
||||
|
||||
export function apiurl(path) {
|
||||
return new URL(API_URL + API_BASE_PATH + path);
|
||||
}
|
||||
|
||||
export function loginurl() {
|
||||
return new URL(API_URL + "/login");
|
||||
}
|
||||
|
||||
export function oauth2callbackurl() {
|
||||
return new URL(API_URL + "/oauth2/callback");
|
||||
}
|
||||
|
||||
export function fetch(url, init) {
|
||||
if (init === undefined) {
|
||||
init = {}
|
||||
}
|
||||
if (init.headers === undefined) {
|
||||
init["headers"] = {}
|
||||
}
|
||||
let idToken = getIdToken();
|
||||
if (idToken) {
|
||||
init.headers["Authorization"] = "bearer " + idToken
|
||||
}
|
||||
|
||||
return window.fetch(url, init).then(res => {
|
||||
if (res.status === 401) {
|
||||
router.push({ name: "login" })
|
||||
} else { return res }
|
||||
})
|
||||
}
|
||||
|
||||
export function setIdToken(idToken) {
|
||||
localStorage.setItem(ID_TOKEN_KEY, idToken);
|
||||
}
|
||||
|
||||
export function getIdToken() {
|
||||
return localStorage.getItem(ID_TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function unsetIdToken() {
|
||||
localStorage.removeItem(ID_TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function setUser(user) {
|
||||
localStorage.setItem(USER_KEY, JSON.stringify(user));
|
||||
}
|
||||
|
||||
export function getUser() {
|
||||
let user = localStorage.getItem(USER_KEY);
|
||||
if (user) {
|
||||
return JSON.parse(user)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export function unsetUser() {
|
||||
localStorage.removeItem(USER_KEY);
|
||||
}
|
||||
|
||||
export function isLoggedIn() {
|
||||
const idToken = getIdToken();
|
||||
return !!idToken;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { apiurl, fetch } from "@/util/auth";
|
||||
|
||||
export async function fetchRun(runid) {
|
||||
let res = await fetch(apiurl("/run/" + runid));
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchTask(runid, taskid) {
|
||||
let res = await fetch(apiurl("/run/" + runid + "/task/" + taskid))
|
||||
return res.json();
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
export function ownerLink(ownertype, ownername) {
|
||||
if (ownertype == "user") {
|
||||
return { name: ownertype, params: { username: ownername } }
|
||||
} else if (ownertype == "org") {
|
||||
return { name: ownertype, params: { orgname: ownername } }
|
||||
}
|
||||
}
|
||||
|
||||
export function ownerProjectsLink(ownertype, ownername) {
|
||||
return { name: ownertype + " projects", params: { ownername: ownername } }
|
||||
}
|
||||
|
||||
export function userLocalRunsLink(username) {
|
||||
return { name: "user local runs", params: { username: username } }
|
||||
}
|
||||
|
||||
export function userLocalRunLink(username, runid) {
|
||||
return { name: "user local run", params: { username: username, runid: runid } }
|
||||
}
|
||||
|
||||
export function userLocalRunTaskLink(username, runid, taskid) {
|
||||
return { name: "user local run task", params: { username: username, runid: runid, taskid: taskid } }
|
||||
}
|
||||
|
||||
export function projectLink(ownertype, ownername, projectname) {
|
||||
return { name: ownertype + " project", params: { username: ownername, projectname: projectname } }
|
||||
}
|
||||
|
||||
export function projectRunsLink(ownertype, ownername, projectname) {
|
||||
return { name: ownertype + " project runs", params: { orgname: ownername, projectname: projectname } }
|
||||
}
|
||||
|
||||
export function projectRunLink(ownertype, ownername, projectname, runid) {
|
||||
return { name: ownertype + " project run", params: { orgname: ownername, projectname: projectname, runid: runid } }
|
||||
}
|
||||
|
||||
export function projectRunTaskLink(ownertype, ownername, projectname, runid, taskid) {
|
||||
return { name: ownertype + " project run task", params: { orgname: ownername, projectname: projectname, runid: runid, taskid: taskid } }
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="home"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {},
|
||||
computed: {
|
||||
...mapGetters(["user"])
|
||||
},
|
||||
created: function() {
|
||||
let user = this.$store.getters.user;
|
||||
if (user) {
|
||||
this.$router.push({
|
||||
name: "user",
|
||||
params: { username: this.user.username }
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="column is-4 is-offset-4">
|
||||
<div class="box" v-for="rs in remotesources" v-bind:key="rs.id">
|
||||
<Loginform
|
||||
:name="rs.name"
|
||||
v-if="rs.auth_type == 'password'"
|
||||
v-on:login="doLogin(rs.name, $event.username, $event.password)"
|
||||
/>
|
||||
<button
|
||||
v-else
|
||||
class="button is-info is-fullwidth"
|
||||
@click="doLogin(rs.name)"
|
||||
>Login with {{rs.name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loginform from "@/components/loginform";
|
||||
import { apiurl, loginurl, fetch, login, logout } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
Loginform
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
remotesources: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getRemoteSources() {
|
||||
fetch(apiurl("/remotesources"))
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log("remote sources result", res);
|
||||
this.remotesources = res.remote_sources;
|
||||
});
|
||||
},
|
||||
doLogin(rsName, username, password) {
|
||||
let u = loginurl();
|
||||
console.log("u:", u);
|
||||
fetch(u, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
remote_source_name: rsName,
|
||||
login_name: username,
|
||||
password: password
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log("login result", res);
|
||||
if (res.oauth2_redirect) {
|
||||
window.location = res.oauth2_redirect;
|
||||
return;
|
||||
}
|
||||
login(res.token, res.user);
|
||||
this.$router.push({ name: "home" });
|
||||
});
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
logout();
|
||||
this.getRemoteSources();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template></template>
|
||||
|
||||
<script>
|
||||
import { logout } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
name: "Logout",
|
||||
created: function() {
|
||||
logout();
|
||||
this.$router.push("/");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>{{code}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, oauth2callbackurl, fetch, setUser } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
name: "Oauth2",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
run: null,
|
||||
code: this.$route.query.code,
|
||||
polling: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doOauth2() {
|
||||
let u = oauth2callbackurl();
|
||||
u.searchParams.append("code", this.$route.query.code);
|
||||
u.searchParams.append("state", this.$route.query.state);
|
||||
fetch(u)
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log("oauth2 result", res);
|
||||
if (res.request_type === "loginuser") {
|
||||
this.$root.login(res.response.token, res.response.user);
|
||||
this.$router.push("/");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.doOauth2();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="org-title">
|
||||
<span class="org-name">{{orgname}}</span>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="[{ 'is-active': currentTab === 'projects' }]">
|
||||
<a @click="currentTab = 'projects'">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<projects v-if="currentTab == 'projects'" ownertype="org" :ownername="orgname"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import projects from "@/components/projects.vue";
|
||||
|
||||
export default {
|
||||
name: "Org",
|
||||
components: { projects },
|
||||
props: {
|
||||
orgname: String,
|
||||
currentTab: {
|
||||
type: String,
|
||||
default: "projects"
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.org-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
.org-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div>
|
||||
<projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectname="projectname"/>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
:class="[{ 'is-active': $route.name.endsWith('project runs') || $route.name.endsWith('project') }]"
|
||||
>
|
||||
<router-link :to="projectRunsLink(ownertype, ownername, projectname)">Runs</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<router-link
|
||||
:to="projectRunLink(ownertype, ownername, $route.params.projectname, $route.params.runid)"
|
||||
>Run {{$route.params.runid}}</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('project run task')"
|
||||
:class="[{ 'is-active': $route.name.endsWith('project run') }]"
|
||||
>
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li v-if="$route.name.endsWith('project run task')" class="is-active">
|
||||
<router-link
|
||||
:to="projectRunTaskLink(ownertype, ownername, $route.params.projectname, $route.params.runid, $route.params.taskid)"
|
||||
>Task {{$route.params.taskid}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
projectLink,
|
||||
projectRunsLink,
|
||||
projectRunLink,
|
||||
projectRunTaskLink
|
||||
} from "@/util/link.js";
|
||||
|
||||
import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
|
||||
import runs from "@/components/runs.vue";
|
||||
import tabarrow from "@/components/tabarrow.vue";
|
||||
|
||||
export default {
|
||||
name: "Project",
|
||||
components: { projbreadcrumbs, runs, tabarrow },
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectname: String,
|
||||
currentTab: {
|
||||
type: String,
|
||||
default: "description"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
projectLink: projectLink,
|
||||
projectRunsLink: projectRunsLink,
|
||||
projectRunLink: projectRunLink,
|
||||
projectRunTaskLink: projectRunTaskLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.user-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
.user-name {
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="user-title">
|
||||
<router-link class="user-name" :to="ownerLink('user', username)">
|
||||
<span>{{username}}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">
|
||||
<router-link :to="ownerProjectsLink('user', username)">Projects</router-link>
|
||||
</li>
|
||||
<li :class="[{ 'is-active': $route.name === 'user local runs' }]">
|
||||
<router-link :to="userLocalRunsLink(username)">Local Runs</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
>
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
>
|
||||
<router-link :to="userLocalRunLink(username, $route.params.runid)">
|
||||
<p v-if="run">
|
||||
Run
|
||||
<strong>#{{run.counter}}</strong>
|
||||
</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name === 'user local run task'"
|
||||
:class="[{ 'is-active': $route.name === 'user local run' }]"
|
||||
>
|
||||
<tabarrow/>
|
||||
</li>
|
||||
<li v-if="$route.name == 'user local run task'" class="is-active">
|
||||
<router-link
|
||||
:to="userLocalRunTaskLink(username, $route.params.runid, $route.params.taskid)"
|
||||
>
|
||||
<p v-if="run">
|
||||
Task
|
||||
<strong>{{run.tasks[$route.params.taskid].name}}</strong>
|
||||
</p>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
import {
|
||||
ownerLink,
|
||||
ownerProjectsLink,
|
||||
userLocalRunsLink,
|
||||
userLocalRunLink,
|
||||
userLocalRunTaskLink
|
||||
} from "@/util/link.js";
|
||||
|
||||
import { fetchRun } from "@/util/data.js";
|
||||
|
||||
import tabarrow from "@/components/tabarrow.vue";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
components: { tabarrow },
|
||||
props: {
|
||||
username: String,
|
||||
currentTab: {
|
||||
type: String,
|
||||
default: "projects"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
run: null
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
if (!to.params.runid) next();
|
||||
let run = await fetchRun(to.params.runid);
|
||||
next(vm => (vm.run = run));
|
||||
},
|
||||
async beforeRouteUpdate(to, from, next) {
|
||||
if (!to.params.runid) next();
|
||||
this.run = await fetchRun(to.params.runid);
|
||||
next();
|
||||
},
|
||||
methods: {
|
||||
ownerLink: ownerLink,
|
||||
ownerProjectsLink: ownerProjectsLink,
|
||||
userLocalRunsLink: userLocalRunsLink,
|
||||
userLocalRunLink: userLocalRunLink,
|
||||
userLocalRunTaskLink: userLocalRunTaskLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
|
||||
.user-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 25px;
|
||||
.user-name {
|
||||
color: $grey-dark;
|
||||
padding-left: 5px;
|
||||
font-size: 1.5rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
css: {
|
||||
sourceMap: true
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue