Skip to content

Commit

Permalink
Merge pull request #3100 from csordasmarton/product_details_links
Browse files Browse the repository at this point in the history
[gui] Add shortcut links to the product page
  • Loading branch information
bruntib authored Dec 14, 2020
2 parents f6f0c89 + d49d067 commit ee278fb
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 74 deletions.
2 changes: 1 addition & 1 deletion web/server/vue-cli/src/components/Layout/TheHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default {
},
{
name: "Reports",
icon: "mdi-clipboard-text-multiple-outline",
icon: "mdi-bug",
route: "reports",
active: [ "reports" ],
exact: true,
Expand Down
128 changes: 128 additions & 0 deletions web/server/vue-cli/src/components/Product/ProductNameColumn.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<template>
<v-list-item
class="pa-0"
two-line
>
<v-list-item-avatar class="my-1">
<v-avatar
:color="strToColor(product.endpoint)"
size="48"
class="my-1"
>
<span class="white--text headline">
{{ product.endpoint | productIconName }}
</span>
</v-avatar>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title>
<span
v-if="product.databaseStatus !== DBStatus.OK || !product.accessible"
:style="{ 'text-decoration': 'line-through' }"
>
{{ product.displayedName }}
</span>

<router-link
v-else
:to="{ name: 'runs', params: { endpoint: product.endpoint } }"
>
{{ product.displayedName }}
</router-link>

<span
v-if="!product.accessible"
color="grey--text"
>
<v-icon>mdi-alert-outline</v-icon>
You do not have access to this product!
</span>

<span
v-else-if="product.databaseStatus !== DBStatus.OK"
class="error--text"
>
<v-icon>mdi-alert-outline</v-icon>
{{ dbStatusFromCodeToString(product.databaseStatus) }}
<span
v-if="product.databaseStatus === DBStatus.SCHEMA_MISMATCH_OK ||
product.databaseStatus === DBStatus.SCHEMA_MISSING"
>
Use <kbd>CodeChecker server</kbd> command for schema
upgrade/initialization.
</span>
</span>
</v-list-item-title>

<v-list-item-subtitle>
{{ product.description }}
</v-list-item-subtitle>

<v-list-item-subtitle
v-if="product.databaseStatus === DBStatus.OK && product.accessible"
>
<span
v-for="link in links"
:key="link.name"
>
<v-btn
:to="{
name: link.name,
params: { endpoint: product.endpoint },
query: link.query || {}
}"
:title="link.title"
:color="link.color"
x-small
text
icon
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>

<v-divider
v-if="link.divider"
class="mx-2 d-inline"
inset
vertical
/>
</span>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>

<script>
import { DBStatus } from "@cc/shared-types";
import { StrToColorMixin } from "@/mixins";
import { defaultReportFilterValues } from "@/components/Report/ReportFilter";
export default {
name: "ProductNameColumn",
filters: {
productIconName: function (endpoint) {
if (!endpoint) return "";
return endpoint.charAt(0).toUpperCase();
}
},
mixins: [ StrToColorMixin ],
props: {
product: { type: Object, required: true }
},
data() {
return {
DBStatus,
links: [
{ name: "runs", title: "Show runs", color: "primary",
icon: "mdi-run-fast", divider: true },
{ name: "reports", title: "Show reports", color: "rgb(236, 118, 114)",
icon: "mdi-bug", query: defaultReportFilterValues, divider: true },
{ name: "statistics", title: "Show statistics", color: "green",
icon: "mdi-chart-line", query: defaultReportFilterValues },
]
};
}
};
</script>
4 changes: 3 additions & 1 deletion web/server/vue-cli/src/components/Product/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import EditAnnouncementBtn from "./EditAnnouncementBtn";
import EditProductBtn from "./EditProductBtn";
import NewProductBtn from "./NewProductBtn";
import ProductConfigForm from "./ProductConfigForm";
import ProductNameColumn from "./ProductNameColumn";

export {
DeleteProductBtn,
EditAnnouncementBtn,
EditProductBtn,
NewProductBtn,
ProductConfigForm
ProductConfigForm,
ProductNameColumn
};
77 changes: 5 additions & 72 deletions web/server/vue-cli/src/views/Products.vue
Original file line number Diff line number Diff line change
Expand Up @@ -61,67 +61,7 @@
</template>

<template #item.displayedName="{ item }">
<v-list-item
class="pa-0"
two-line
>
<v-list-item-avatar class="my-1">
<v-avatar
:color="strToColor(item.endpoint)"
size="48"
class="my-1"
>
<span class="white--text headline">
{{ item.endpoint | productIconName }}
</span>
</v-avatar>
</v-list-item-avatar>

<v-list-item-content>
<v-list-item-title>
<span
v-if="item.databaseStatus !== DBStatus.OK || !item.accessible"
:style="{ 'text-decoration': 'line-through' }"
>
{{ item.displayedName }}
</span>

<router-link
v-else
:to="{ name: 'runs', params: { endpoint: item.endpoint } }"
>
{{ item.displayedName }}
</router-link>

<span
v-if="!item.accessible"
color="grey--text"
>
<v-icon>mdi-alert-outline</v-icon>
You do not have access to this product!
</span>

<span
v-else-if="item.databaseStatus !== DBStatus.OK"
class="error--text"
>
<v-icon>mdi-alert-outline</v-icon>
{{ dbStatusFromCodeToString(item.databaseStatus) }}
<span
v-if="item.databaseStatus === DBStatus.SCHEMA_MISMATCH_OK ||
item.databaseStatus === DBStatus.SCHEMA_MISSING"
>
Use <kbd>CodeChecker server</kbd> command for schema
upgrade/initialization.
</span>
</span>
</v-list-item-title>

<v-list-item-subtitle>
{{ item.description }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<product-name-column :product="item" />
</template>

<template #item.description="{ item }">
Expand Down Expand Up @@ -238,32 +178,25 @@ import _ from "lodash";
import { authService, handleThriftError, prodService } from "@cc-api";
import { DBStatus, Permission } from "@cc/shared-types";
import { StrToColorMixin } from "@/mixins";
import { EditGlobalPermissionBtn } from "@/components/Product/Permission";
import {
DeleteProductBtn,
EditAnnouncementBtn,
EditProductBtn,
NewProductBtn
NewProductBtn,
ProductNameColumn
} from "@/components/Product/";
export default {
name: "Products",
filters: {
productIconName: function (endpoint) {
if (!endpoint) return "";
return endpoint.charAt(0).toUpperCase();
}
},
components: {
DeleteProductBtn,
EditAnnouncementBtn,
EditGlobalPermissionBtn,
EditProductBtn,
NewProductBtn
NewProductBtn,
ProductNameColumn
},
mixins: [ StrToColorMixin ],
data() {
const sortBy = this.$router.currentRoute.query["sort-by"];
Expand Down

0 comments on commit ee278fb

Please sign in to comment.