mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
330 lines
12 KiB
330 lines
12 KiB
<template> |
|
<v-card class="d-100" style="overflow: scroll"> |
|
<v-toolbar height="40" class="elevation-0"> |
|
<v-spacer /> |
|
|
|
<x-btn outlined tooltip="Reload Project Info" color="primary" small @click="loadProjectApiInfo"> |
|
<v-icon small left> refresh </v-icon> |
|
<!-- Reload --> |
|
{{ $t('general.reload') }} |
|
</x-btn> |
|
</v-toolbar> |
|
|
|
<!-- <div class="d-flex justify-center "> |
|
<v-simple-table dense v-slot:default class="flex-shrink mt-3" v-if="info"> |
|
<thead> |
|
<tr> |
|
<th>Database</th> |
|
<th>API Type</th> |
|
<th>API Schema |
|
<x-icon tooltip="Swagger URL / Proto file / Graphiql" small>mdi-information-outline</x-icon> |
|
</th> |
|
<th>API Base URL</th> |
|
</tr> |
|
|
|
</thead> |
|
<tbody> |
|
<tr v-for="(db,i) in dbAliasList" :key="i"> |
|
<td>{{ info[db.meta.dbAlias].database }}</td> |
|
<td> |
|
|
|
<img width="40" v-if="apiTypeIcon[info[db.meta.dbAlias].apiType].type === 'img'" |
|
:src="apiTypeIcon[info[db.meta.dbAlias].apiType].src"/> |
|
<template v-else> |
|
<v-icon :color="apiTypeIcon[info[db.meta.dbAlias].apiType].iconColor"> |
|
{{ apiTypeIcon[info[db.meta.dbAlias].apiType].icon }} |
|
</v-icon> |
|
|
|
{{ info[db.meta.dbAlias].apiType }} |
|
</template> |
|
</td> |
|
<td> |
|
<a v-if="info[db.meta.dbAlias].apiType === 'rest'" :href="info[db.meta.dbAlias].swaggerUrl" target="_blank">{{ |
|
info[db.meta.dbAlias].swaggerUrl |
|
}}</a> |
|
<a v-else-if="info[db.meta.dbAlias].apiType === 'graphql'" :href="info[db.meta.dbAlias].gqlApiUrl" |
|
target="_blank">{{ info[db.meta.dbAlias].gqlApiUrl }}</a> |
|
<a v-else-if="info[db.meta.dbAlias].apiType === 'grpc'" @click.prevent="downloadProto">Download Proto |
|
File</a> |
|
|
|
</td> |
|
<td> |
|
<span v-if="info[db.meta.dbAlias].apiType === 'rest'">{{ info[db.meta.dbAlias].apiUrl }}</span> |
|
<span v-else-if="info[db.meta.dbAlias].apiType === 'graphql'">{{ info[db.meta.dbAlias].gqlApiUrl }}</span> |
|
<span v-else-if="info[db.meta.dbAlias].apiType === 'grpc'">{{ info[db.meta.dbAlias].grpcApiUrl }}</span> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</v-simple-table> |
|
|
|
<v-skeleton-loader class="mt-2" v-else type="text,table-row-divider@3"></v-skeleton-loader> |
|
|
|
</div>--> |
|
|
|
<v-container v-if="aggregatedInfo" fluid dark> |
|
<v-card class="pa-2 text-center elevation-10" dark> |
|
<h3 class="title mb-3 mt-4">Total APIs Generated</h3> |
|
<p> |
|
<!-- <span class="display-3 font-weight-bold">{{ apisCount }}</span>--> |
|
|
|
<IOdometer class="iOdometer display-3 font-weight-bold" :value="apisCount" /> |
|
|
|
<br /> |
|
<span class="subtitle grey--text text--lighten-1">within {{ timeTaken }} seconds</span> |
|
</p> |
|
</v-card> |
|
|
|
<v-row v-for="(item, i) in aggregatedInfo.list" :key="i" class="align-stretch"> |
|
<v-col> |
|
<v-row> |
|
<v-col cols="12"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> Database ({{ item.dbType }}) </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon class="mr-1 mt-n1" color="info"> mdi-database </v-icon> |
|
{{ item.databaseName }} |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col cols="6"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> # Tables </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon class="mr-1 mt-n1" color="info"> mdi-table-large </v-icon> |
|
<!-- {{ item.tablesCount }}--> |
|
<IOdometer class="iOdometer" :value="item.tablesCount" /> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col cols="6"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> # Relations </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon class="mr-1 mt-n1" color="secondary"> mdi-link </v-icon> |
|
<!-- {{ item.relationsCount }}--> |
|
<IOdometer class="iOdometer" :value="item.relationsCount" /> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col cols="4"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> # Views </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon color="success" class="mt-n2 mr-1"> mdi-table-border </v-icon> |
|
<!-- {{ item.viewsCount }}--> |
|
<IOdometer class="iOdometer" :value="item.viewsCount" /> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col cols="4"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> # Functions </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon color="success" class="mt-n2 mr-1"> mdi-function </v-icon> |
|
<!-- {{ item.functionsCount }}--> |
|
<IOdometer class="iOdometer" :value="item.functionsCount" /> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col cols="4"> |
|
<v-card dark class="elevation-10 h-100"> |
|
<v-card-text class="pb-0 font-weight-bold"> # Procedures </v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon color="success" class="mt-n2 mr-1"> mdi-code-braces </v-icon> |
|
<!-- {{ item.proceduresCount }}--> |
|
<IOdometer class="iOdometer" :value="item.proceduresCount" /> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<!--<v-col> |
|
<v-card dark class=" elevation-10"> |
|
<v-card-text class="pb-0 font-weight-bold">Time Saved in Dev Hours</v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon class="mr-1 mt-n1" color="secondary">mdi-clock-fast</v-icon> |
|
{{ hoursSaved }} |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
<v-col> |
|
<v-card dark class=" elevation-10"> |
|
<v-card-text class="pb-0 font-weight-bold">Cost Saved</v-card-text> |
|
<v-card-text class="display-1 white--text"> |
|
<v-icon color="success" class="mt-n2 mr-1">mdi-currency-usd-circle-outline</v-icon> |
|
{{ cost }} |
|
</v-card-text> |
|
</v-card> |
|
</v-col>--> |
|
</v-row> |
|
</v-col> |
|
<v-col> |
|
<v-row class="h-100"> |
|
<v-col cols="12" class="h-100"> |
|
<v-card class="pa-2 elevation-10 h-100" dark> |
|
<v-card-text v-if="item.type === 'rest'" class="pb-0 font-weight-bold"> |
|
Swagger API specification |
|
</v-card-text> |
|
<v-card-text v-else-if="item.type === 'graphql'" class="pb-0 font-weight-bold"> |
|
Graphql Endpoint |
|
</v-card-text> |
|
<v-card-text class="title white--text"> |
|
<v-icon color="success" class="mr-1"> mdi-code-json </v-icon> |
|
<a :href="`${origin}${item.apiEndpoint}`" target="_blank">{{ `${origin}${item.apiEndpoint}` }}</a> |
|
</v-card-text> |
|
</v-card> |
|
</v-col> |
|
</v-row> |
|
</v-col> |
|
</v-row> |
|
</v-container> |
|
|
|
<!-- <pre> |
|
{{ aggregatedInfo }} |
|
</pre>--> |
|
|
|
<iframe v-if="iframeUrl && showinfoIFrame" style="background: white" width="100%" height="500px" :src="iframeUrl" /> |
|
</v-card> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from 'vuex'; |
|
|
|
import IOdometer from 'vue-odometer'; |
|
import 'odometer/themes/odometer-theme-default.css'; |
|
|
|
export default { |
|
name: 'XcInfo', |
|
components: { |
|
IOdometer, |
|
}, |
|
data: () => ({ |
|
showinfoIFrame: false, |
|
iframeUrl: null, |
|
info: null, |
|
aggregatedInfo: null, |
|
apiTypeIcon: { |
|
rest: { icon: 'mdi-code-json', iconColor: 'green' }, |
|
graphql: { icon: 'mdi-graphql', iconColor: 'pink' }, |
|
grpc: { src: 'grpc-icon-color.png', type: 'img' }, |
|
}, |
|
apisCount: 0, |
|
}), |
|
computed: { |
|
...mapGetters({ |
|
dbAliasList: 'project/GtrDbAliasList', |
|
}), |
|
origin() { |
|
return location.origin; |
|
}, |
|
}, |
|
async created() { |
|
await this.loadProjectApiInfo(); |
|
try { |
|
this.iframeUrl = `${this.$axios.defaults.baseURL}/dashboard/status`; |
|
await this.$axios.get(this.iframeUrl); |
|
this.showinfoIFrame = true; |
|
} catch (e) { |
|
this.showinfoIFrame = false; |
|
} |
|
}, |
|
mounted() {}, |
|
methods: { |
|
async loadProjectApiInfo() { |
|
try { |
|
const { info, aggregatedInfo } = ( |
|
await this.$axios.get(`/nc/${this.$route.params.project_id}/projectApiInfo`, { |
|
headers: { |
|
'xc-auth': this.$store.state.users.token, |
|
}, |
|
}) |
|
).data; |
|
this.info = info; |
|
const { aggregated, list } = aggregatedInfo; |
|
|
|
this.aggregatedInfo = { |
|
aggregated, |
|
list: list.map(it => { |
|
return { |
|
...it, |
|
functionsCount: 0, |
|
proceduresCount: 0, |
|
relationsCount: 0, |
|
tablesCount: 0, |
|
viewsCount: 0, |
|
}; |
|
}), |
|
}; |
|
const apisCount = aggregatedInfo.aggregated[4]; // +(( |
|
// aggregatedInfo.aggregated[4] |
|
// + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')) || 0; |
|
this.apisCount = 0; |
|
|
|
this.$nextTick(() => { |
|
this.apisCount = apisCount; |
|
this.$set(this.aggregatedInfo, 'list', list); |
|
}); |
|
|
|
this.timeTaken = aggregatedInfo.aggregated[5]; |
|
} catch (e) { |
|
// this.$toast.error('Some error occurred').goAway(3000); |
|
} |
|
}, |
|
async downloadProto() { |
|
this.loading = true; |
|
let data; |
|
try { |
|
data = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
null, |
|
'grpcProtoDownloadZip', |
|
{}, |
|
null, |
|
{ |
|
responseType: 'blob', |
|
}, |
|
]); |
|
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/zip' })); |
|
const link = document.createElement('a'); |
|
link.href = url; |
|
link.setAttribute('download', 'proto.zip'); // or any other extension |
|
document.body.appendChild(link); |
|
link.click(); |
|
// this.$toast.success('Successfully exported metadata').goAway(3000) |
|
this.$toast.success(`${this.$t('msg.toast.exportMetadata')}`).goAway(3000); |
|
} catch (e) { |
|
this.$toast.error('Some internal error occurred').goAway(3000); |
|
} |
|
this.loading = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
iframe { |
|
border: none; |
|
} |
|
</style> |
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* @author Wing-Kam Wong <wingkwong.code@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|